Brine Family / How to remove the overlay color on just one page within an Index Page?

I'm trying to remove the overlay color of the banner section of one of the Index Pages on my site.... The option in the Style Editor will remove it from all pages... Any idea?

After playing around, this code in the Page Header Code Injection of the Index Page, where I don't want the overlay color, works!:

<style>
.Index-page--has-image:before {
 background-color:rgba(0,0,0,0)
}
</style>

Hope it helps!

So I tried this answer. But it doesn't seem to work. I'm using Rally, which is also part of the Brine family.

I wasn't actually trying to remove the colour, but simply change it.

Any thoughts?

Hi there-

We typically only use Brine family templates and have used this method to hide Index Overlay over certain sections of a website from time to time.

It seems the Brine template was recently updated and the code for Index Overlays is no longer found at .Index-page--has-image:before. Support will not look into where the Index Overlay code has moved.

Has anyone found where this has moved?

So looks like it's now displaying the overlay without the :before but it's a bit of the reverse, if you use CSS to try to hide the overlay, the overlay will still display.

We found to fix our existing sites using this approach, we had to turn OFF the overlay in settings and apply it manually w/CSS to any sections needing an overlay.

.Index-page--has-image, .Intro--has-image { background-color: rgba(255,255,255,.5) !important;}

If anyone finds anything else / can find how to hide overlay over just one section in an Index after SS's recent change, we're all ears!

@HortonGroup – It seems like SS has changed the way color overlays work in the Brine template family compared to previous templates. This may have something to do with how they're achieving the parallax effect now and also in a way that protects large background images from being accessible (and stolen!) by a site visitor. When you set an overlay color in the Style Editor, it seems to take the transparency and apply it directly to the image (which is hidden from the HTML code) rather than using the rgba declaration on a separate div's background-color. To override this behavior and accomplish what you mentioned above about targeting one specific section and canceling out the overlay, I simply set the overlay color to 0% opacity in the Style Editor which effectively nullifies that style setting. Then in my Custom CSS, I added this bit of code to rewrite the global color overlay for all background/banner images:

.tweak-overlay-parallax-enabled .Index-page--has-image, .tweak-overlay-parallax-enabled .Intro--has-image {
     background-color: rgba(15,40,45,.7);
   }

Then, I was able to target the section I wanted to remove the overlay from via its section ID name:

#mission {
 background-color:rgba(0,0,0,0);
}

... where "mission" was my section/page title and my rgba settings cancel out any color from overlaying the banner image for that section/page.

Hope that helps. I would love to know where SS put the background images and if they can still be accessible through the code.

Hi there-

@hellothisisjeff Thanks much. My phrasing isn't always the greatest... yes, we're doing what you're suggesting. Manually applying the overlay "we had to turn OFF the overlay in settings and apply it manually w/CSS to any sections needing an overlay."

*The overlay is not being applied to the image directly. You can still view source or inspect element and see the original uploaded image.

Your reply got me digging again and I'm clear now...

PARALLAX ON: the images and overlay are being loaded in a div - div class="Parallax-host-outer"

that is just after the div class="Mobile loaded" section and before the div class=" Site loaded" section that holds the announcement bar, header, content and footer sections.

In this case it's probably easiest to do the approach we're both doing, setting the overlay in CSS.

PARALLAX OFF: I wasn't thinking properly I guess b/c it seems it IS still set up the old way where you could override an Overlay Color set by the Style Editor by calling the #section ID .Index-page-image:before and setting the background color to transparent.

Thanks for the input / getting my head back on track. :)

It was a slight tweak to the callout that worked for me:

This worked for me in the index page header:

anyone have any updates on this? I am trying to make one section of the home page orange and then remove said color from the banner section (top of page). I am using Impact.

@leohorton @hortongroup @jcuvdb @hellothisisjeff

This worked for me in the Vow template. Thanks for the help! D

this worked. thx.

I have the same question, using the Impact... code injection... I'd like to target one banner image on a page within the Index and remove that color but can't figure out what the code language is for "overlay"

The following worked for me in template Wav from the Brine family: I have an overlay defined in the global Style Editor of Squarespace.For Pages where I don't want the overlay I injected this in the page-level CSS:

.Intro--has-image:before {
background-color: transparent !important;
}

This normally works for 7.0 sites > add it to the CSS editor but you need a the browser inspection tool to find out the ID of that section you want to disable the overlay color
 

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

Thank you very much @ArminB

I had been trying with:  .Intro--has-image:before   and  .Index-page--has-image:before

but your suggestion of   .Index-page-image:before   was a winner! 

I'm happy to hear that!