Jump to content

Changing the background color of a single page

Go to solution Solved by tuanphan,

Recommended Posts

Hey folks! 

I'm helping a friend as a favour with the CSS on her site (she has the personal plan only) and she's wanting to turn the story page background to a specific red color (the text and logo will be a cream color but this part works). Below is the CSS I've got. I verified it should work through copilot but still having issues with the background color not changing:

 

/* Target header, main content, and footer areas */
#collection-66274ae76bea753399fd7c77,
#collection-66274ae76bea753399fd7c77 .Header,
#collection-66274ae76bea753399fd7c77 .Main,
#collection-66274ae76bea753399fd7c77 .Footer {
  background-color: #692125 !important;
  color: #f7f9f4 !important;
}

/* Ensure links in header and main areas are styled */
#collection-66274ae76bea753399fd7c77 .Header a,
#collection-66274ae76bea753399fd7c77 .Main a,
#collection-66274ae76bea753399fd7c77 .Footer a {
  color: #f7f9f4;
}

/* Ensure all text elements inherit the font color 
#collection-66274ae76bea753399fd7c77 h1,
#collection-66274ae76bea753399fd7c77 h2,
#collection-66274ae76bea753399fd7c77 h3,
#collection-66274ae76bea753399fd7c77 h4,
#collection-66274ae76bea753399fd7c77 h5,
#collection-66274ae76bea753399fd7c77 h6,
#collection-66274ae76bea753399fd7c77 p,
#collection-66274ae76bea753399fd7c77 a,
#collection-66274ae76bea753399fd7c77 span {
  color: #f7f9f4;
}*/


/* Target specific section by data-section-id */
section[data-section-id="662f1a82086eb86585b797e2"] {
  background-color: #692125;
  color: #f7f9f4;
}
 

If you need to view the site, the password is forumhelp . I've also attached an image of the appearance we're after 🙂

Thank you so much! 

Screen Shot 2024-08-28 at 8.04.01 PM.png

Link to comment
  • Replies 4
  • Views 251
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution
On 9/3/2024 at 4:35 AM, plaid-bee said:

Hey! Thanks for your patience, it's https://www.anastasiyakonstantine.com/story

Try this CSS code

body#collection-66274ae76bea753399fd7c77 {
.sections .section-background {
    background-color: red !important;
}
.section-border,section {
    background-color: transparent !important;
}}

 

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.