Changing the colour for Header and Footer on one page

Site URL: https://chiton-bassoon-6dzg.squarespace.com

Hi everyone, 

I'm looking to change the colour for the header and footer on one page, the 'about' page. I'd like to change it to the inverse of what I've got going for the rest of the site, so black font on a white background, which is the 'Lightest 1' option in the colour palette. 

Any help would be appreciated. 

Thanks

On 6/13/2021 at 2:04 PM, Shabeerz said:

Site URL: https://chiton-bassoon-6dzg.squarespace.com

Hi everyone, 

I'm looking to change the colour for the header and footer on one page, the 'about' page. I'd like to change it to the inverse of what I've got going for the rest of the site, so black font on a white background, which is the 'Lightest 1' option in the colour palette. 

Any help would be appreciated. 

Thanks

Hi. Your site is private. Can you setup password & share url again? We can help easier

Tuanphan, I've removed the password, you should be able to see it now. 

Thanks
 

On 6/30/2021 at 5:48 PM, Shabeerz said:

Tuanphan, I've removed the password, you should be able to see it now. 

Thanks
 

Hi. It looks like you solved this? I see black header & white font here.

Hi

I'm actually looking for White header and footer on the 'about' page with black font, just like the body text. 

On 7/2/2021 at 5:28 PM, tuanphan said:

Hi. It looks like you solved this? I see black header & white font here.

Hi Tuanphan, 

Would you know how to do this: "I'm actually looking for White header and footer on the 'about' page with black font, just like the body text. "

20 hours ago, Shabeerz said:

 

Hi Tuanphan, 

Would you know how to do this: "I'm actually looking for White header and footer on the 'about' page with black font, just like the body text. "

Add to Design > Custom CSS

/* About page */
body#collection-60b09f85dc1205130b007bec {
	header#header *:not(.btn) {
    color: black;
}
header#header {
    background-color: white !important;
}
footer.sections .section-background {
    background-color: white;
}
footer.sections * {
    color: black !important;
}
}

Hi there,

How do I give each footer section a different colour background on each page, please?

18 hours ago, Iwan said:

Hi there,

How do I give each footer section a different colour background on each page, please?

Edit each page >> Add a Code Block at bottom of page > Paste this code

<style>
  footer.sections .section-background {
    background-color: white;
}
</style>

Hi Tuan, thank you. But if I paste this code in the Custom CSS portal, will it not apply the code to all the footers?

I would like the footer on each page to have a different background colour?

2 hours ago, Iwan said:

Hi Tuan, thank you. But if I paste this code in the Custom CSS portal, will it not apply the code to all the footers?

I would like the footer on each page to have a different background colour?

Add the code to the Page Settings > Advanced area of each page. Simply change the colour of the code whenever you add it.

@Jia Ah! Great! Thank you so much!

Hi again @Jia, I've tried the above, it isn't working?

2 hours ago, Iwan said:

Hi again @Jia, I've tried the above, it isn't working?

Please share the website link and password (if applicable) so I can take a look

Thanks again @Jia https://beige-oleander-mp66.squarespace.com/ password: sqsp 

1 hour ago, Iwan said:

Thanks again @Jia https://beige-oleander-mp66.squarespace.com/ password: sqsp 

As mentioned, add this code to the Page Settings > Advanced area of each page. Just replace 'HEX' with the values of your preferred colours. Let me know how it goes 🙂

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

Thank you I will try it out!

Another question please @Jia🙏 On this page:

https://beige-oleander-mp66.squarespace.com/new-page password tuansqsp

Can I merge the background image of the section above the footer with the background of the footer? So basically the bottom section plus footer must have the one same background image?? 

13 minutes ago, Iwan said:

Thank you I will try it out!

Another question please @Jia🙏 On this page:

https://beige-oleander-mp66.squarespace.com/new-page password tuansqsp

Can I merge the background image of the section above the footer with the background of the footer? So basically the bottom section plus footer must have the one same background image?? 

It's a different section, so unfortunately no, I dont think this is possible.

Ok, thank you @Jia

But it is possible with the header...as on my homepage the top section has the same background as the header.

So it's def not possible with the footer?

Hi @Jia, the code injection in the advanced header section of my page to change the colour of the footer background isn't working...please help?? It was working, now it isn't...

23 hours ago, Iwan said:

Hi @Jia, the code injection in the advanced header section of my page to change the colour of the footer background isn't working...please help?? It was working, now it isn't...

Can you share link to page where you have problem?

Hi @tuanphan, I figured out the problem...

For the pages where I have inserted the header code injection to change the colour of the footer, it disables the background of the sections on that page where I've applied an ART background... 

So on my ABOUT page https://beige-oleander-mp66.squarespace.com/about I want the white footer...but now I can apply the ART function to any of the sections...

And on my SPEAKING page https://beige-oleander-mp66.squarespace.com/speaking I want a white footer, but if I insert the code I lose the ART background in the quote section...

Can you help? How do I insert the footer colour change code but also be able to use ART background effect?

My two cents: I found the  *:not(.btn) to do the trick. I don't know what it means, but it worked where nothing else has. Thank you.

11 hours ago, TaitDesign said:

My two cents: I found the  *:not(.btn) to do the trick. I don't know what it means, but it worked where nothing else has. Thank you.

*:not(.btn) will target all elements except those with class name of .btn. Btn usually only appears in Header Buttons

Thanks. I'll explore removing the 'btn'. I didn't know what it meant, but the code worked so I used it. I'll clean it up. Thanks again.