Jump to content

Changing footer background color on specific pages

Recommended Posts

PW: benbenben

https://wisteria-koala-fmym.squarespace.com/birth

https://wisteria-koala-fmym.squarespace.com/breathe

https://wisteria-koala-fmym.squarespace.com/feel

I have these three unique pages on the website I'm building, each denoted by their own specific content and background color. I'm wondering if there's a way to change the footer background color per each page. I've been trying to target it with collection ID, but nothing is working.

As you can see, on the pink/orange/tan pages I'd like for the background color to continue into the footer, instead of being the off-white color.

image.thumb.png.56ae7c6e2251ab4c7d89bd4f7cbfb261.pngimage.thumb.png.d138d2b73817333b1a42590916bf57cd.pngimage.thumb.png.59360ce4fd7721cfbb72a365060573ae.png

 

Any help is much appreciated.

 

Link to comment
  • Replies 4
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

You can use this code to Page Header Code Injection or Code Block on each page

<style>
  footer.sections {
    background-color: #f1f !important;
}
footer.sections .section-background, footer.sections .section-border {
    background-color: transparent !important;
}
</style>

Page Header1 Min

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

Hi there, I'm also having some difficulty with the same issue.

On my site, I have some pages that have a white background, and other pages that have a black background. Naturally, the white background pages have black text and the black background have white text. These are currently controlled by theme settings. It appears the footer can only have one setting.

I've been experimenting with adding adding custom css but changing the background to black makes the text invisible (black on black) and vice versa.

Is there are way to set the footer to "transparent" so that it takes the theme colour ways from the previous block?

Please help!

black-footer-on-black-bg.png

white-footer-on-black-bg.png

white-footer-on-white-bg.png

Link to comment
On 2/23/2024 at 6:12 PM, harryfox03 said:

Hi there, I'm also having some difficulty with the same issue.

On my site, I have some pages that have a white background, and other pages that have a black background. Naturally, the white background pages have black text and the black background have white text. These are currently controlled by theme settings. It appears the footer can only have one setting.

I've been experimenting with adding adding custom css but changing the background to black makes the text invisible (black on black) and vice versa.

Is there are way to set the footer to "transparent" so that it takes the theme colour ways from the previous block?

Please help!

black-footer-on-black-bg.png

white-footer-on-black-bg.png

white-footer-on-white-bg.png

To change on One Page, you can use this code to Page Header Code Injection (or edit page > Add a Code Block)

<style>
  footer.sections, footer.sections .section-background, footer.setions .section-border {
  	background-color: black !important;
  }
  footer.sections * {
  	color: white !important;
  }
</style>

With icon color, you need to share site url, we can check code easier

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

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.