change background color on specific index page

To start with this you will need to use the slug of the page in the Index you want to adjust as the id (after the #) will use the page slug.

For example, if your page slug was named home, you could use this code in the main custom CSS tab.

.collection-type-index #home {background:red}

YASSS!!! Thank you so much! This post needs to be bumped up higher, and probably deserves a blog post or tutorial or something. Here's the code I used:

 .collection-type-index #who-we-serve {
 background-color: #e8eddb, !important;
}

@csmith333 How did you know to target .collection-type-index ? I don't remember seeing that anywhere when I was looking at the code using Google dev tools. Is there some super secret master list of all Squarespace selectors somewhere?

Thank you so much! This worked.

worked like charm

THANK YOU! I've just spent about 2 hours trying to figure this out and your line worked for me on the Hyde template

Help!!! What am I doing wrong?  It looks correct in the Squarespace builder but when I go to check it on another device it's not working...

Quote

.collection-602aa939c1889644fc2abcc1 #pe-class{
  background: #E5E2DA !important
}

@CSmith333 @brandy

On 1/20/2021 at 4:35 PM, bangank36 said:

Could you share your site url?

It's rough around the edges because I'm still in creation mode.  But it's ferret-drum-ndgp.squarespace.com password erika

2 minutes ago, sequoiac said:

It's rough around the edges because I'm still in creation mode.  But it's ferret-drum-ndgp.squarespace.com password erika

And ferret-drum-ndgp.squarespace.com/services is the index I'm talking about. @bangank36

On 2/25/2021 at 1:15 AM, sequoiac said:

And ferret-drum-ndgp.squarespace.com/services is the index I'm talking about. @bangank36

which section you want to change color and the color code you needed?

22 hours ago, bangank36 said:

which section you want to change color and the color code you needed?

Most of the sections have color changes.

#pe-class {

  background-color: #E5E2DA;

}

#coaching {

  background-color: #E9C262 !important;

}

#type-confident{

  background-color: #8D623F !important;

}

#ewe{

  background-color: #C883A3 !important;

}

@sequoiac