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

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

@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

Send me a message if you have any questions (free 10 minutes).

4000+ free code: Adirondack - Avenue - Brine - Bedford - and more (all 7.0 template & 7.1)

Useful guide: How to share url (trial plan) - 2 languages site - 3 languages

Plugins: Product Enquiry Form - Product Color/Image Swatch VariantLightbox Anything

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

Share this post


Link to post
  • 0

Can you share site url? @afaris


Send me a message if you have any questions (free 10 minutes).

4000+ free code: Adirondack - Avenue - Brine - Bedford - and more (all 7.0 template & 7.1)

Useful guide: How to share url (trial plan) - 2 languages site - 3 languages

Plugins: Product Enquiry Form - Product Color/Image Swatch VariantLightbox Anything

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

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;


Send me a message if you have any questions (free 10 minutes).

4000+ free code: Adirondack - Avenue - Brine - Bedford - and more (all 7.0 template & 7.1)

Useful guide: How to share url (trial plan) - 2 languages site - 3 languages

Plugins: Product Enquiry Form - Product Color/Image Swatch VariantLightbox Anything

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

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

@afaris try this code


.product-mark.sold-out ~ .masonry-overlay {
   opacity: 0 !important;
   background: #fff !important;
}



Send me a message if you have any questions (free 10 minutes).

4000+ free code: Adirondack - Avenue - Brine - Bedford - and more (all 7.0 template & 7.1)

Useful guide: How to share url (trial plan) - 2 languages site - 3 languages

Plugins: Product Enquiry Form - Product Color/Image Swatch VariantLightbox Anything

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

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

@afaris Try this


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



Send me a message if you have any questions (free 10 minutes).

4000+ free code: Adirondack - Avenue - Brine - Bedford - and more (all 7.0 template & 7.1)

Useful guide: How to share url (trial plan) - 2 languages site - 3 languages

Plugins: Product Enquiry Form - Product Color/Image Swatch VariantLightbox Anything

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

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