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.

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

Step Four

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

Save and refresh the page. 🎉