Jump to content

Looking to change one page of my website to a different background color

Recommended Posts

I just redid my website using the IMPACT template on version 7. My website background is black and the header and body text is white. Everything looks great except I have one page that is text heavy and I believe a little hard to read with the black background. Is there custom CSS I can do to allow me to change the background on just one page to white and make the heading and body text black? I want to keep the overall aesthetic of the black but just this one page white so it's easier for clients to read. 

Thanks

Link to comment
  • Replies 5
  • Views 153
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Can you share your website URL and the page that you want to be a white background? Thanks!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Try adding this to Custom CSS as a test:

#collection-54ee7596e4b0702493cc8b9c {
  .Main {
    background-color:#fff;
  }
  h1, h2, h3, h4, p {
    color:#000;
  }
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

@Ziggy I tried entering it but nothing happened.  I should see the change right away right? I don't need to hit save first? In any case I wanted to you you what other custom CSS I had just in case it was interfering;

 

header{
 position: fixed;
 width: 100%;
 z-index: 9998;
 }

main{
 padding-top: 100px;
}

ajax{
 z-index: 9999;
}

@media only screen and (max-width: 1000px){ main {
 padding-top: 0px;
 }

Link to comment
On 1/21/2023 at 2:43 AM, oceans0321 said:

@Ziggy I tried entering it but nothing happened.  I should see the change right away right? I don't need to hit save first? In any case I wanted to you you what other custom CSS I had just in case it was interfering;

 

header{
 position: fixed;
 width: 100%;
 z-index: 9998;
 }

main{
 padding-top: 100px;
}

ajax{
 z-index: 9999;
}

@media only screen and (max-width: 1000px){ main {
 padding-top: 0px;
 }

Move this code to top of CSS box

#collection-54ee7596e4b0702493cc8b9c {
  .Main {
    background-color:#fff !important;
  }
  h1, h2, h3, h4, p {
    color:#000;
  }
}

 

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.