GlennieS Posted November 1, 2023 Share Posted November 1, 2023 What code would change the header background colour on blog posts. This is a second blog on the site and I want to have the change of header colour apply to this blog only. I want to keep the post content section as white background. I assume the code would be added to the Blog Settings > Post Blog Item Code Injection. URL is www.sandypoint.vic.au/plants Thanks for helping, Glenda Link to comment
tuanphan Posted November 3, 2023 Share Posted November 3, 2023 You mean Blog List Page or Blog Detail Post? If list page, add this code to Website > Website Tools > Custom CSS. DO NOT ADD TO CODE INJECTION [class*="type-blog"].view-list header#header { background-color: #f1f !important; } If blog detail post, add this to Custom CSS [class*="type-blog"].view-item header#header { background-color: #f1f !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
GlennieS Posted November 17, 2023 Author Share Posted November 17, 2023 Thankyou for your reply Tuan. I am developing a second blog on my site and would like the header colour to be different for its item pages. The code I currently have for one blog is as follows ... body[class*="collection-type-blog"].view-item header#header { background-color: #6ec4cd !important; } body[class*="collection-type-event"].view-item header#header { background-color: #ffdf77 !important; } How do I have code that applies a different colour to each of the now 2 blogs? Link to comment
Solution tuanphan Posted November 20, 2023 Solution Share Posted November 20, 2023 On 11/18/2023 at 6:58 AM, GlennieS said: Thankyou for your reply Tuan. I am developing a second blog on my site and would like the header colour to be different for its item pages. The code I currently have for one blog is as follows ... body[class*="collection-type-blog"].view-item header#header { background-color: #6ec4cd !important; } body[class*="collection-type-event"].view-item header#header { background-color: #ffdf77 !important; } How do I have code that applies a different colour to each of the now 2 blogs? Can you share link to 2 blogs? In case you use a Business Plan or higher, just add code to Blog Page Header Code Injection <style> body.view-item header#header { background-color: #ffdf77 !important; } </style> Repeat for another blog page Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
GlennieS Posted November 21, 2023 Author Share Posted November 21, 2023 Thankyou Tuan. This worked in the Blog Page Header Code Injection once I deleted the code (shown above) that I had in Design>Custom CSS Thanks again, Glenda Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment