Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
afaris

Change the dimmed overlay transparency on Sold Products in the Supply Template

Question

Posted (edited)

Hello,

Is it possible to change the transparency value of the overlay on sold-out products in the Supply template? If so, would you please explain how?

Thanks,Andrew

Edited by afaris
Initial Revision

Share this post


Link to post

9 answers to this question

Recommended Posts

  • 0
Posted (edited)

@afaris Try this


.sold-out~.masonry-thumbnail {
   opacity: 1;
}

Contributors do not receive anything from Squarespace when answering the question here. So if the answer is correct, Accept the question and upvote. It will motivate them to continue answering many questions.

Reference (2500 Custom CSS for Squarespace Templates): https://beaverhero.com/squarespace-all-css

Edited by tuanphan
Initial Revision

Share this post


Link to post
  • 0

@afaris Add to Home > Design > Custom CSS


.no-touch .collection-type-products.view-list.product-list-style-viewbook .sold-out~.masonry-overlay {
   background: rgba(255,255,255,.65);
}

Change .65 to number what you want. It should be 0 to 1, with .65 = 0.65

If it doesn't work, add !important to after, eg: background: rgba(255,255,255,.25) !important;

you can also change to other background color, eg: background: rgba(0,0,0,0.5) !important;

Share this post


Link to post
  • 0

@tuanphan Thank you, that works to control the transparency for the rollover of the Sold products, but I would like to change the transparency value for the up state of the Sold products before you rollover the sold product. I'd like to lessen the transparency of the Sold overlay. I'd like to make the Sold images more visible than they currently are. Is that possible? Thank you.

Share this post


Link to post
  • 0

Hi @tuanphan - I tried the code. It removes the rollover affect on the product image, but the product image is still dimmed/transparent regardless of rollover/mouse position. I'd like to control the transparency/dimness of the product image without any mouse interaction. I'd like to have the image look more like the unsold products. More saturated. Less dim. Thanks for your help.

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...