Jump to content

How do you change the header/footer colour on a single page?

Go to solution Solved by paul2009,

Recommended Posts

Posted (edited)

Site URL: https://www.wealthihernetwork.com/the-lessons-1

Heya,

So i'm designing a website for a client and i'd like certain pages to have an individual colour scheme, i intend to that by changing the colour of the header and footer. Could anyone help me with the CSS code?

 

Thank you!

Edited by CL2020
Posted

Add to Page Settings > Advanced > Header

<style>
  header.Header.Header--top {
    background: red;
}
  footer.Footer {
    background: green;
}
</style>

Disable Ajax loading if the code doesn't work. https://support.squarespace.com/hc/en-us/articles/115000253288-Ajax-loading

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • Solution
Posted

Another option is to identify the Collection ID of the individual pages, and then add some styles to Design > Custom CSS.

You can learn how to identify the IDs by following this guide: How to apply CSS to one Squarespace page.

This will allow you to continue using Ajax loading, for faster website performance. For example, to change the header and footer on the the-lessons-1 page, you could use:

#collection-5ea010c47e131c476b10d320 .Header--top, #collection-5ea010c47e131c476b10d320 .Footer {
  background: #facfcf;
}

 

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide 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. Buying a coffee is generous but optional.

Posted
17 minutes ago, paul2009 said:

Another option is to identify the Collection ID of the individual pages, and then add some styles to Design > Custom CSS.

You can learn how to identify the IDs by following this guide: How to apply CSS to one Squarespace page.

This will allow you to continue using Ajax loading, for faster website performance. For example, to change the header and footer on the the-lessons-1 page, you could use:


#collection-5ea010c47e131c476b10d320 .Header--top, #collection-5ea010c47e131c476b10d320 .Footer {
  background: #facfcf;
}

 

THANK YOU SOOOO MUCHHHH!!!!!! You're a life saver 

  • 3 weeks later...
Posted
On 5/8/2020 at 7:08 AM, Modern_B said:

@paul2009 I tried the code above with my collection ID but couldn't get it to work, do you think you could take a look for me? I'm on 7.1.

URL: https://www.studiobon.co.nz/work Password: TEMPB1803

Add to Home > Design > Custom CSS

body#collection-5eab9155cdbffc0abd0ff5ef .header-announcement-bar-wrapper {
    background: red !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 4 months later...
Posted

Hello @paul2009

Thank you! This code worked on the header, but I can´t get my footer to change color. Can I get some help to get a code like this for footer? : )

body#collection-5eab9155cdbffc0abd0ff5ef .header-announcement-bar-wrapper {
    background: red !important;
}
  • 3 months later...
Posted

Hello!

I´m trying to do something similar.

I´m in squarespace 7.1, and using "transparent header" (with image behind the navigation).

When I have a dark image behind the navigation, I need the navigation font color to be white.

When I have a light background image behind the navigation, I need the navigation font color to be dark.

Does anyone know how to do this?

 

Thanks in advance!

Posted
On 1/20/2021 at 3:17 PM, Erlend-fs said:

Hello!

I´m trying to do something similar.

I´m in squarespace 7.1, and using "transparent header" (with image behind the navigation).

When I have a dark image behind the navigation, I need the navigation font color to be white.

When I have a light background image behind the navigation, I need the navigation font color to be dark.

Does anyone know how to do this?

 

Thanks in advance!

Hi. Can you share site url? We can help easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 1 month later...
  • 5 months later...
Posted
On 5/11/2020 at 2:12 PM, tuanphan said:

Add to Home > Design > Custom CSS

body#collection-5eab9155cdbffc0abd0ff5ef .header-announcement-bar-wrapper {
    background: red !important;
}

 

Hi, Could you help me do this for just the footer on my homepage?

  • 7 months later...
Posted
On 5/11/2020 at 2:12 PM, tuanphan said:
body#collection-5eab9155cdbffc0abd0ff5ef .header-announcement-bar-wrapper {
    background: red !important;
}

Hey there,
I've tried the suggestions above and can't get any to work for my site. I have CSS on the page to use a different logo in the header for just that page, but I can't get the background colour of the site header to change with custom CSS or page code! Any tips?

https://www.ellenling.com/home

Posted
21 hours ago, EL_LINGO said:

Hey there,
I've tried the suggestions above and can't get any to work for my site. I have CSS on the page to use a different logo in the header for just that page, but I can't get the background colour of the site header to change with custom CSS or page code! Any tips?

https://www.ellenling.com/home

Use this code

/* page background */
body#collection-62399dd02762250058fb107d {
.section-background, .page-section {
    background: transparent !important;
}
&, header#header, .header-announcement-bar-wrapper {
   background-color: red !important;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 3 weeks later...
Posted

Hey guys, 

I'm running into the same issue as the ones listed above. I cant find the collection, instead I have found the collections of my website on the footer as well as the social links but cant change the full header. The page I am trying to change is currently not active so I understand it wont be as easy to ask for help. I currently have tried all the suggestions you guys have given above:

  footer.Footer {
    background: #f06124 !important;
}
  #block-7d3f4481884c58b4a085 { 
    background-color: #f06124 !important;
    }  
  
#block-15525ead0d0c964c8990 { 
    background-color: #f06124 !important;
    }  
  section[data-section-id="61fb27b21f58a95b2d338a18"]
  {background-color: #f06124 !important;
    } 


 But still nothing 😕 The only time I have seen any activity was when I added the blocks but dont know where to find the full footer. Do you guys know where I am messing up?

Screen Shot 2022-04-18 at 10.53.01 AM.png

Screen Shot 2022-04-18 at 10.55.35 AM.png

Posted
18 hours ago, Keenan14 said:

Hey guys, 

I'm running into the same issue as the ones listed above. I cant find the collection, instead I have found the collections of my website on the footer as well as the social links but cant change the full header. The page I am trying to change is currently not active so I understand it wont be as easy to ask for help. I currently have tried all the suggestions you guys have given above:

  footer.Footer {
    background: #f06124 !important;
}
  #block-7d3f4481884c58b4a085 { 
    background-color: #f06124 !important;
    }  
  
#block-15525ead0d0c964c8990 { 
    background-color: #f06124 !important;
    }  
  section[data-section-id="61fb27b21f58a95b2d338a18"]
  {background-color: #f06124 !important;
    } 


 But still nothing 😕 The only time I have seen any activity was when I added the blocks but dont know where to find the full footer. Do you guys know where I am messing up?

Screen Shot 2022-04-18 at 10.53.01 AM.png

Screen Shot 2022-04-18 at 10.55.35 AM.png

You can edit Page >> Add a Code Block at bottom of page >> Paste this code

<style>
  .section-background, .page-section {
    background: transparent !important;
}
body, header#header, .header-announcement-bar-wrapper {
   background-color: red !important;
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted (edited)

Hi, 
I have tried all the codes you have provided to assist me in fixing this issue on my website, but it continues to only change the body colour and footer despite header#header being present. 
My website is: https://mabeljones.squarespace.com/
PW: MabelJ 
Please help! I am running out of options.

Edited by Skates
Posted
On 4/20/2022 at 4:41 PM, Skates said:

Hi, 
I have tried all the codes you have provided to assist me in fixing this issue on my website, but it continues to only change the body colour and footer despite header#header being present. 
My website is: https://mabeljones.squarespace.com/
PW: MabelJ 
Please help! I am running out of options.

You want to change header + footer color? Which page? Or Homepage?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 5 months later...
  • 1 year later...
Posted
On 12/8/2023 at 5:23 PM, Iwan said:

Hi all

On all the pages of my site the footer has a white background except this page

https://jeanine-thompson.squarespace.com/book-release

How do I make the background of this footer on this page white too??

You can add this code to Website Tools (under Not Linked) > Custom CSS to fix problem

footer.sections .section-background {
    background-color: white !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.