Jump to content

Change header color on just my home page

Go to solution Solved by paul2009,

Recommended Posts

My homepage currently look like this (which is how I want it to look like), first picture.

However, the rest of my site has the cream color as the background so I want to have the colors in the header swapped to look like (second picture) with the header in the dark wine color and the logo and text in the cream color.

I know this is something to do with CSS, I just don't know how to do that.

I know I have to set the header to be in the dark variation for the whole site and then add custom CSS to change the colors for just the home page. I was wondering if anyone knows how to do that? Please help a girl out.

 

The color HEX codes are:

Cream - #FFF4EA

Burgundy - #331719

Thank you!

 

Screenshot 2024-02-20 at 6.13.57 PM.png

Screenshot 2024-02-20 at 6.13.47 PM.png

Link to comment
12 hours ago, WebDesignerVJubes said:

My homepage currently look like this (which is how I want it to look like), first picture.

However, the rest of my site has the cream color as the background so I want to have the colors in the header swapped to look like (second picture) with the header in the dark wine color and the logo and text in the cream color.

I know this is something to do with CSS, I just don't know how to do that.

I know I have to set the header to be in the dark variation for the whole site and then add custom CSS to change the colors for just the home page. I was wondering if anyone knows how to do that? Please help a girl out.

 

The color HEX codes are:

Cream - #FFF4EA

Burgundy - #331719

Thank you!

 

Screenshot 2024-02-20 at 6.13.57 PM.png

Screenshot 2024-02-20 at 6.13.47 PM.png

What is the website URL?

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
  • Solution
14 hours ago, WebDesignerVJubes said:

Change header color on just my home page. I have to set the header to be in the dark variation for the whole site and then [I want to] add custom CSS to change the colors for just the home page. 

Try this in Custom CSS panel:

.homepage [data-header-style="theme"].header {
  background-color: #FFF4EA;
}
.homepage :not(.header--menu-open) .header-nav-wrapper a {
  color: #331719;
}
.homepage .header-title-logo img {
  filter: invert(.9);
}

Example of it being applied:

image.gif.efd5877b34570f39a2a4c73b34099902.gif

Did this help? Please give feedback by clicking an icon below  ⬇️

Edited by paul2009

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
2 hours ago, paul2009 said:

Try this in Custom CSS panel:

.homepage [data-header-style="theme"].header {
  background-color: #FFF4EA;
}
.homepage :not(.header--menu-open) .header-nav-wrapper a {
  color: #331719;
}
.homepage .header-title-logo img {
  filter: invert(.9);
}

Example of it being applied:

image.gif.efd5877b34570f39a2a4c73b34099902.gif

Did this help? Please give feedback by clicking an icon below  ⬇️

Hi Paul! One more question. So I did this and it's almost perfect! Except it made my logo black. Is there any way to make the logo the burgundy color? You have been such great help!

Link to comment
1 hour ago, WebDesignerVJubes said:

I did this and it's almost perfect! Except it made my logo black. Is there any way to make the logo the burgundy color?

You can't change the colour of an image using CSS so the last part of the code simply inverts the logo color to make it visible. It's a compromise.

The only way to make it a specific color us to load another image in place of the existing one. There are a number of ways to do this but first you'd need to add the alternative image to your site and provide a link 🙂.

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
7 hours ago, paul2009 said:

You can't change the colour of an image using CSS so the last part of the code simply inverts the logo color to make it visible. It's a compromise.

The only way to make it a specific color us to load another image in place of the existing one. There are a number of ways to do this but first you'd need to add the alternative image to your site and provide a link 🙂.

How would I do that? I have the PNG and SVG of the logo in both colors. Thank you again, you have been super helpful.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.