Jump to content

How do I change the overlay color for one index section (Sofia)?

Go to solution Solved by Casperster18,

Recommended Posts

Hi all, I am slowly learning CSS but inevitably have problems with syntax between different themes. I'm trying to change the background color (technically an overlay in this case) for the Services section on this index page. The collection ID is 59e653fc8fd4d2e4bc8651b2, which I've tried to incorporate in various ways, but I cannot get the bloody syntax right.

Sofia (Brine family) has two overlays that alternate on indexes, so sometimes if you want to change the color on one section the overlay will ruin an image on another section.

I'm trying to change the color to hsla(28, 100%, 44%, 0.18).

The site in question:

https://www.joannethedoglady.com

Thanks for any and all help, hopefully I'll be asking less questions in the future and answering more!

Edited by sethbarham
Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

Hey there,

Instead of using the Collection ID to change background colors, you can use the pagename.

This should work instead:


#services { background-color: #e06900; }

I know right? It's much easier than you'd expect.I hope this works for you!

Edited by Casperster18
Initial Revision
Link to comment
  • 3 months later...
  • 2 years later...
1 hour ago, KingdomCreativeCo said:

Thanks for this... I have the same need, but then also need to switch the font color in this section for body and headings. Can anyone help? I want the font to be white.

Can you share link to your site? We can take a look

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.