Jump to content

I want a different color footer on certain pages

Recommended Posts

Site URL: https://www.theredwindow.com/lrw-menu

Hi,

I've been trolling forums and I've tried so many different lines of code but for some reason I can't seem to change the color of the footer on certain pages using css. I was able to customize my header and figured it would be similar but for some reason the footer has proven to be more difficult. I would love and appreciate any and all help 🙂

 

Thank you!

Link to comment
  • Replies 2
  • Views 2.1k
  • Created
  • Last Reply
On 12/22/2020 at 10:46 PM, fhasson said:

Site URL: https://www.theredwindow.com/lrw-menu

Hi,

I've been trolling forums and I've tried so many different lines of code but for some reason I can't seem to change the color of the footer on certain pages using css. I was able to customize my header and figured it would be similar but for some reason the footer has proven to be more difficult. I would love and appreciate any and all help 🙂

 

Thank you!

First you need to find the collection id of the specific page using this chrome extension

https://chrome.google.com/webstore/detail/igjamfnifnkmecjidfbdipieoaeghcff

In your case, the correct collection id is, kindly repeat the process with another page

#collection-5fdfb83f1c66f52f5fa6ff6c #footer-sections .section-background {
    background-color: #2874af;
}

image.thumb.png.29bc18f6a2963181b2bb93c32fca62c1.png

Changed color footer

image.thumb.png.733d6242ba602350d7751436fd41e63d.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 2 weeks later...

If you use Business Plan or higher, you can also add this code to Page Header

<style>
  #footer-sections .section-background {
    background-color: #2874af;
}
</style>

If you use Personal Plan, you can edit page > Add a Code Block (any where) > Paste this code

<style>
  #footer-sections .section-background {
    background-color: #2874af;
}
</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!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.