Header colours on website shopping cart & order confirmation pages

Site URL: https://www.fly.org.au

Hi, I have a theme throughout the website where the header of each page is a darker colour than the body. I cannot find a way to change the header sections on the shopping cart and order confirmation pages - because the headers are in the same colour as the body, the logo doesn't contrast enough to be visible.

Add to Design > Custom CSS

body#cart .system-page, body#order-confirmed, body#order-confirmed #confirmed-page {
    background: #28b0ac;
}

On 12/4/2021 at 6:21 PM, tuanphan said:

Add to Design > Custom CSS

body#cart .system-page, body#order-confirmed, body#order-confirmed #confirmed-page {
    background: #28b0ac;
}

 

Thank you, that seems to recolor the entire page though, not just the header. I'm looking for a way to keep the page contents on #f2f2f2 but the header in #28b0ac. Thanks

On 12/6/2021 at 6:14 AM, mattarnold68 said:

Thank you, that seems to recolor the entire page though, not just the header. I'm looking for a way to keep the page contents on #f2f2f2 but the header in #28b0ac. Thanks

If you wnat to change header only, use this new code

body#cart, body#order-confirmed {
header#header {
    background: #28b0ac;
}}

19 hours ago, tuanphan said:

If you wnat to change header only, use this new code

body#cart, body#order-confirmed {
header#header {
    background: #28b0ac;
}}

 

Sorry to say this didn't work. Is there somewhere I can find out the page names to custom create some css, or do you have an alternate code?

On 12/12/2021 at 11:14 AM, tuanphan said:

Try this code

body#cart header#header, body#order-confirmed header#header {
    background-color: #28b0ac !important;
}

Awesome, thank you so much!

Is there a snippet of code I can add to that for the Blog posts too?

On 12/15/2021 at 7:59 AM, mattarnold68 said:

Awesome, thank you so much!

Is there a snippet of code I can add to that for the Blog posts too?

 

 

Try this code

/* this code run on individual blog posts only */
body[class*="collection-type-blog"].view-item header#header {
 background-color: #28b0ac !important;
}