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

Modifying SOLD OUT and SALE labels


judith1570048218

Question

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 post
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Hi @judith1570048218, You can target them individually by their additional classes. So for example, try adding this code within Design > Custom CSS: /*This targets any elements w

@tcp13 Perfect. Exactly what I needed (and easier than I thought, can you tell I know nothing about coding). Thanks Tyler!

Posted Images

2 answers to this question

Recommended Posts

  • 0

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

Edited by tcp13

Is your Squarespace website ADA compliant? Find out in 60 seconds with our free accessibility audit!

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