Jump to content

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

Recommended Posts

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

Edited by paul2009

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
  • 3 months later...

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

#promotedGalleryWrapper .color-overlay, .promoted-gallery-wrapper .color-overlay, .banner-thumbnail-wrapper .color-overlay, .sqs-featured-posts-gallery .color-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(189,0,0,.67);
z-index: 99;
}

 

 

Link to comment

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

.homepage

 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

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;
}

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

 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.