HOW TO CHANGE THE OVERLAY OF A SINGLE BANNER IN HAYDYN TEMPLATE

Hi All, 

I am using Haydyn template which features an overlay on all of the banners, however i would like to adjust the overlay for one of the banners so that it doesn't affect the rest of the site. 

Any help appreciated!

Hi Natasha

That's pretty easy to achieve once you understand how Squarespace works. There are a number of guides that collectively explain how to do this. First you need to identify the Collection ID of the page you want to change, then you need to identify the specific class(es) that apply to the overlay on the Bedford/Bryant template. You can then add some CSS to the Custom CSS area that targets a combination of the Collection ID and the class(es).

If you'd like a specific answer for your site/page then we'll need a working link to the page on the website. It's the same with all coding questions as @e2astudio explains. If your site isn't live yet, please set a site password and tell us what it is, otherwise we won't be able to view the page.

-Paul

Hi Paul, 

I have a very similar issue, I only need/want a color overlay on the homepage banner. I inspected the page and was able to grab the following CSS but can't seem to target just the homepage banner. I'm using the Bryant Template, site is live http://www.uhdcolumbus.com/

Thank you in advance to any help you can provide 🙂

Ashlee

@ashlee if the CSS works on the site, you can limit it to the homepage by prefixing it with:

.homepage

Thank you @paul2009. I was able to make the change to only effect the homepage banner with the following CSS but the overlay is only covering half the banner. Do you have any thoughts on how to fix this?

#collection-5e1f2c60f33d00219d905499 .body-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(189,0,0,.67);
z-index: 99;
}

.homepage .banner-thumbnail-wrapper .color-overlay {
  background-color: rgba(189,0,0,.67);
}