Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
CL2020

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

Question

6 answers to this question

Recommended Posts

  • 0

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

 


sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include.
Explore our range of Squarespace Extensions, including the Wishlist, Variant Availability and Datepicker Extension
Note that links in my posts may be affiliate links. Need personal help? 
Book a Squarespace Expert.

Share this post


Link to post
  • 0

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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
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 

Share this post


Link to post
  • 0
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;
}

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...