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!

[diego_ezfy]

@BMurtagh no problems, for the sake of organization kindly create a new post and I'll help you.

[Andy_Espenel]

Hello,

I made these changes and it looks great on desktop, except on mobile my menu on the left (three horizontal lines) is still black.

Can you advise how to customize this, as well as applying this to all pages?

Thanks for your help!

[Anna_Wang1 · Accepted solution]

<style>

      .page__container--secondary .header--init,

      .page__container--secondary .footer

      {

    background: #2D2D2D ;

      }

      .page__container--secondary .main {

    background: #1D1D1D;

}

</style>

Just added this in Index.liquid

[Baileyatk13]

Is there a way to do this for the header only? I'm using the Brooklyn theme and just want the header colour changed on the home page only. Thanks 🙂

[Anna_Wang1]

Hi,

This is only for the header, and you can change whatever color you want.

If you want to change it only on the home page, you can add an If condition.

Not sure if the header's name is the same.