Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1
Elo2

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

Question

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!

Edited by Jeng
retag

Share this post


Link to post

9 answers to this question

Recommended Posts

  • 1

I figured out the answer! Here is the code:


   #collection-54e8f6c2e4b068927b0c9dca 
   .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 :)

Share this post


Link to post
  • 0

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?
homepageCollectionId":"54e7af8de4b0360a497a0bef

CODE


#collection-54e7af8de4b0360a497a0bef
   .banner-thumbnail-wrapper .color-overlay {
     background-color: transparent !important
   }

What am I doing wrong?

Thanks!

Edited by ivanwr

Share this post


Link to post
  • 0

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.

Share this post


Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...