Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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

Go to solution Solved by Casperster18,


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:


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

Edited by sethbarham
Link to post
  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

5 answers to this question

Recommended Posts

  • 2

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 post
  • 0
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

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...