How to Change or Remove the Index Overlay Color of one Page in an Index (7.0)

One of the features that I like in the Brine family of templates is the index page feature. I love creating full width image banners and playing around with the overlay color. However, one problem is - the overlay color setting under Squarespace’s Site Styles is a global setting. This means I don’t have a choice but to have this overlay color on all index pages with banner images! Thankfully, I discovered the CSS code to remove or change the overlay color of a single index page, and I want to share it with you! Here it goes:

Step One

From your Squarespace account, go to the Custom CSS Editor: Design > Custom CSS

Step Two

Copy and paste this code into the Custom CSS Editor. This code will remove the overlay color of the desired index page.

[data-parallax-id="REPLACE-ID"] .Index-page-image:before {
  background-color: rgba(0,0,0,0);
}

Step Two

Right click on the index page you want to change the overlay color of and click Inspect. Find the [data-parallax-id] and copy the characters inside the “ “.

Step Three

Paste in the code like below

[data-parallax-id="5cef7bcddffb700001676c2d"] .Index-page-image:before {
  background-color: rgba(0,0,0,0);
}

Step Four

Change the rgba(0,0,0,0) value with the color of your choice.

Save and refresh the page. 🎉