Change color for Home page header and Footer - Trademark theme

Solved
Anna_Wang1
Excursionist
55 1 0

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

Accepted Solution (1)

Accepted Solutions
Anna_Wang1
Excursionist
55 1 0

This is an 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

View solution in original post

Replies 14 (14)
Anna_Wang1
Excursionist
55 1 0

I solved this problem! 

Hussainaliarif
New Member
1 0 0

can you please share the solution here?

BMurtagh
New Member
5 0 0

Hey, 

 

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

diego_ezfy
Shopify Partner
2749 513 695

@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
New Member
5 0 0

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). 

 

Screen Shot 2020-08-09 at 10.15.11 am.png

diego_ezfy
Shopify Partner
2749 513 695
<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
New Member
5 0 0

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
Shopify Partner
2749 513 695

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
New Member
5 0 0

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
Shopify Partner
2749 513 695

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

Andy_Espenel
New Member
3 0 0

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
Excursionist
55 1 0

This is an 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
Excursionist
14 0 3

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
Excursionist
55 1 0

 

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.

Anna_Wang1_0-1627406641811.png