Change color for Home page header and Footer - Trademark theme

Highlighted
New Member
41 0 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

0 Likes
Highlighted
New Member
41 0 0

I solved this problem! 

0 Likes
Highlighted
New Member
1 0 0

can you please share the solution here?

0 Likes
Highlighted
New Member
5 0 0

Hey, 

 

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

0 Likes
Highlighted
Astronaut
1149 193 232

@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>
◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
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

0 Likes
Astronaut
1149 193 232
<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

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
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?

0 Likes
Highlighted
Astronaut
1149 193 232

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. 



◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
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!

0 Likes