Jump to content

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

Go to solution Solved by paul2009,

Recommended Posts

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • Solution

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

 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
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 

Link to comment
  • 3 weeks later...
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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 months later...

 

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>

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 months later...

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!

Link to comment
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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
  • 5 months later...
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?

Link to comment
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;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 7 months later...
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

Link to comment
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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 weeks later...

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

Link to comment
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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 5 months later...

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.