Change color for Home page header and Footer - Trademark theme

[Anna_Wang1]

Hello Everyone,

I would like to change color for Home page(ONLY) header and footer to black. I am using Trademark theme.

How can I change the header and footer color only? Also, change the text of header and footer to white.

And my store url is: https://ctoms.ca/

Really appreciate if someone can help me. Thanks in advance.

Anna

[Anna_Wang1]

I solved this problem! 

[Hussainaliarif]

can you please share the solution here?

[BMurtagh]

Hey, 

would you be able to share your solution here - i have the exact same problem. 

[diego_ezfy]

@BMurtagh  @Anna_Wang1  @Hussainaliarif 

This is how to do it. Just change the #cccccc to any HEX color code you want:

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<style>
.template-index #shopify-section-header,
.template-index #shopify-section-header > *,
.template-index #shopify-section-footer,
.template-index #shopify-section-footer > *{
    background: #cccccc !important;
}
</style>

[BMurtagh]

Okay perfect, the background colour is now Black

How do i change the header drop down menus Text = White?

I have the logo file in white so i can change that (currently saved in Black format). 

[diego_ezfy]

<style>
.template-index #shopify-section-header,
.template-index #shopify-section-header > *,
.template-index #shopify-section-footer,
.template-index #shopify-section-footer > *{
    background: #cccccc !important;
}

.template-index #shopify-section-header,
.template-index #shopify-section-header *,
.template-index #shopify-section-footer,
.template-index #shopify-section-footer *{
    color: #ffffff !important;
}
</style>

Try this code @BMurtagh 
"color" is for the text color
"background" is for the background color

[BMurtagh]

Ahh Awesome!

Home page looks perfect!

Home Page:  Header = Black 

Text = White

I did notice though on the other pages (product, checkout etc) that the Header & Text is still the reverse (White Header, Black text).  

Do i need to copy the same code into another section?

[diego_ezfy]

Nope, it is on purpose @BMurtagh  

As OP requested, he wanted the changes to apply exclusively to the home page. 

I would like to change color for Home page(ONLY) header and footer to black. 

---

[BMurtagh]

Ok no problems. 

If I did want to make all pages the same (Black Header, White Text) how would you do this?

PS. thanks for your help this far, really is appreciated to have such amazing support in this community!