Jump to content

Changing header and footer color on one page only

Recommended Posts

Hey everyone! I need help with my css code injection. I want to change the color of my header and footer on certain webpages, but when I tried to used other codes posted on this forum, they didn't work for me. Not sure if its something in my code that's blocking the change. Also, please let me know if there is anything I can do to make my codes better.

the password is: madameafwik

Thank you!

Screen Shot 2023-04-22 at 11.05.54 AM.png

Screen Shot 2023-04-22 at 11.03.59 AM.png

Screen Shot 2023-04-22 at 11.04.27 AM.png

Screen Shot 2023-04-22 at 11.04.55 AM.png

Screen Shot 2023-04-22 at 11.05.14 AM.png

Link to comment
  • Replies 8
  • Views 1.8k
  • Created
  • Last Reply

Top Posters In This Topic

To change Header/Footer Background Color on One Page, add this code into Page Header (DO NOT add code to Custom CSS)

<style>
  header#header .header-background-solid, footer.sections section, footer.sections .section-background {
    background-color: #f1f !important;
}
</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

Use this

<style>
  header#header .header-background-solid, footer.sections section, footer.sections .section-background {
    background-color: #f1f !important;
}
  header#header * {
  	color: black !important;
  }
  footer.sections * {
  	color: #f1f !important;
  }
</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
  • 7 months later...
On 12/20/2023 at 7:39 AM, cherylr said:

I'd like to do this (change header color and link color) without using code injection but instead by using the collection ID. (Because my client doesn't want to pay for more than the personal plan)

Can you help?

I can't seem to get it quite right. https://www.katienave.com/

(here's the page I want to change: https://www.katienave.com/voiceover

Thanks in advance

You can use Code Block instead, just edit page > Add a Code Block (anywhere on page) > Then paste the code

Personal Plan still supports Code Block

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.