Jump to content

Change "Index Overlay/Background Colors" opacity for certain instances on individual pages (Henson/Tremont template)

Recommended Posts

I am creating a website using the Henson template (Tremont family).  I have used the Design > Site Styles to set up overlay opacities that I like, but there is one customization that does not seem possible with the built-in styles:

At the bottom of each "Portfolio" index (/brand, /data, and /web), the "collectionDesc" reappears, overlaid on the media image for that index.  I would like to add a white background overlay at 95% opacity when this happens, so the image looks ghosted and the text is more legible.  I can accomplish this by setting the Overlay Opacity under "Index Overlay/Background Colors" in Site Styles, but the images then continue to look ghosted on that page and throughout the site when the collection is active (mouse is hovering over the collection menu).

Is there code injection I could add to the header of the 3 portfolio index pages (brand, data, and web) or to the site-wide Custom CSS that will set the "Index Overlay/Background Colors" to #fff 95% opacity only when the "collectionDesc" is visible?

You can view the in-progress site at the link below:

password = chameleon

I have also attached images to help demonstrate the issue:

1. How the "collectionDesc" looks at the bottom of the /web index with no "Index Overlay/Background Colors" visible (opacity set to 0)
2. How I want the "collectionDesc" to look at the bottom of the /web index *
3. How I want the collection media to appear on hover *

* note: #2 and #3 are mutually exclusive using the built-in Site Styles (increasing opacity to achieve #2 ghosts out #3 and vice-versa)

Any guidance on resolving this issue would be much appreciated!

Screen Shot 2020-01-23 at 4.34.40 PM.png

Screen Shot 2020-01-23 at 4.38.57 PM.png

Screen Shot 2020-01-23 at 4.39.27 PM.png

Link to comment
  • Replies 3
  • Views 968
  • Created
  • Last Reply


This topic is now archived and is 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.