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

April 22, 2020

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 April 22, 2020 by CL2020

tuanphan · April 22, 2020

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

paul2009 · April 22, 2020

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

April 22, 2020

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

Modern_B · May 8, 2020

@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

tuanphan · May 11, 2020

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

Modern_B · May 13, 2020

Thank you so much

ems_1 · October 8, 2020

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

tuanphan · October 10, 2020

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>

Erlend-fs · January 20, 2021

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!

tuanphan · January 23, 2021

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

Erlend-fs · January 25, 2021

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!

Edited January 25, 2021 by Erlend-fs

alexavisho · March 19, 2021

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

creedon · March 19, 2021

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?

qeys · August 25, 2021

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?

tuanphan · August 27, 2021

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

EL_LINGO · April 1, 2022

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

tuanphan · April 2, 2022

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

Keenan14 · April 18, 2022

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?

tuanphan · April 19, 2022

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>

Skates · April 20, 2022

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 April 20, 2022 by Skates

tuanphan · April 23, 2022

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?

philipcondron · October 7, 2022

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

Iwan · December 8, 2023

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??

tuanphan · December 10, 2023

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

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

Recommended Posts

Guest

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Erlend-fs

Posted Images

Guest

Create an account or sign in to comment

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources