Jump to content

Hayden/Bedford: Remove the overlay on just ONE banner image?

Recommended Posts

There I was, rubbing my hands together, ready for the official launch of my website. After uploading the top picture which was simply a white background with my logo centered, in big, I was gleaming with excitement but TO MY HORROR I realized the picture I posted had an overlay on it just like every other picture on the entire website.

The masterpiece I had spent weeks working had been ruined. The big bright logo looked dull and mundane. How could I overlooked such an obvious mistake? I practically tried to redo the entire website so I won’t even post the link to what is now an abomination! I just wanted the Bedford template to feature my logo in the middle on the top like templates like Pacific or Dovetail.

That is my tale of woe.

So how do you remove the overlay on just ONE banner image with a Hayden/Bedford template using CSS? It is the homepage, the first picture in my index. GENNICK? Squarespace Guru? Alan Houser? Somebody help!

Link to comment
  • 3 months later...
  • Replies 9
  • Views 20.1k
  • Created
  • Last Reply

I figured out the answer! Here is the code:

   .banner-thumbnail-wrapper .color-overlay {
     background-color: transparent !important

You would need to find the collection child ID of the page that has the banner within your index for this to be applied to one of the banner images, or the collection ID of the whole page to have the option of no banner overlay on a singular page.

To find your collection ID, search your source code in this way: http://answers.squarespace.com/questions/58545/find-collection-id-squarespace-7

I just used this on my Hayden template, and it works :)

Link to comment
  • 2 weeks later...

Hi everyone,I have been trying to inject the above code, but have been getting 0 result. My goal is to remove overlay from the homepage only. Here is exactly what I am injecting, am I missing some syntax or something?


   .banner-thumbnail-wrapper .color-overlay {
     background-color: transparent !important

What am I doing wrong?


Link to comment
  • 3 months later...

I found an option working with Bryant that may also work for you, since it is a variation of Bedford. I didn't grab the collection ID but rather used the specific index as the reference. For example:

#index-page-slug .banner-thumbnail-wrapper .color-overlay  {
   background-color: #17c700;

Where "index-page-slug" is the slug name you assigned to the index page. You would want to change the Hex color reference to an RGB value with 100% transparency.

Link to comment
  • 6 months later...
  • 10 months later...
  • 2 years later...


This topic is now archived and is closed to further replies.

This topic is now closed to further replies.

  • 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.