Changing footer background color on specific pages

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.

Any help is much appreciated.

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>

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!

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!

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

Thank you, this has worked perfectly!

Just popping in with a JavaScript solution if anyone is looking to use their site style themes to change the footer on a specific page. 

Full step-by-step instructions are here on my blog: https://laz-i.com/blog/changing-footer-background-on-a-single-page-squarespace

This will help you match the footer theme to the rest of the page that uses a certain theme. 

On 8/29/2024 at 4:54 AM, laz-i said:

Just popping in with a JavaScript solution if anyone is looking to use their site style themes to change the footer on a specific page. 

Full step-by-step instructions are here on my blog: https://laz-i.com/blog/changing-footer-background-on-a-single-page-squarespace

This will help you match the footer theme to the rest of the page that uses a certain theme. 

 

Tutorial link doesn't exist. Can you check it again?