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

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!

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

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 

@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

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;
}

Thank you so much

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;
}

On 5/13/2020 at 5:49 PM, Modern_B said:

Thank you so much

Edit Page > Add Code Block > paste this code

<style>
  footer.Footer {
    background: red;
}
</style>

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!

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

URL: https://spinach-keyboard-w7ws.squarespace.com/

PW: hoyden2021

I found a solution! The theme-color of the first section of the page, affects the navigation links in the header. 

Thanks anyway!

I'm still curious about this. I was able to get it to work ! Thanks!

48 minutes ago, alexavisho said:

I was able to get it to work!

Do you mean you could not get it to work and you need help?

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?

On 8/25/2021 at 10:52 PM, qeys said:

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

Use this code

body#collection-5eab9155cdbffc0abd0ff5ef footer.sections .section-background {
    background: red !important;
}

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

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;
}}

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?

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?

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>

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.

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?

Why cant Squarespace just let you manually do it on each page,  a bit annoying doing all these codes for simple things.....