Jump to content

Modifying SOLD OUT and SALE labels

Recommended Posts

Site URL: https://www.judithandrolfe.com/fine-art

Hi,

I need some help trying to figure out some custom CSS. At the moment, the SALE and SOLD labels look identical (white font in black square). I would like to change one of the tags to have a different background color so that the difference is immediately obvious (for eg. changing the SALE background to red) Got to the .product-mark tag, but can't figure out how to change one but not the other.

Thanks in advance for the help.

Screen Shot .png

Link to comment
  • Replies 2
  • Views 1.3k
  • Created
  • Last Reply

Hi @judith1570048218,

You can target them individually by their additional classes.

image.png.ced95395d4109a28a7d9a28f9c9074c8.png

So for example, try adding this code within Design > Custom CSS:

/*This targets any elements with BOTH the .product-mark and .sold-out classes.*/
.product-mark.sold-out{background-color:#A40000!important;}

With this expected result:

image.png.e89b33a1b93bd56b5ec32dea715c8bea.png

Presumably, there'd be a comparable class for products on sale, likely .sale or .on-sale, but I can't find anything currently on sale within your site.

Hope this helps!
-Tyler

The above post may be outdated. I’m no longer active in the Squarespace ecosystem, so I won’t see your direct messages. For better resources about web accessibility, I’ve documented some of my thoughts on my forum profile.

Link to comment

Archived

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.