mireiamireia Posted November 12, 2022 Share Posted November 12, 2022 I don't like how the "Sold Out" tag is displayed. It is shown with small caps and a brown color. I want it like I've written it (the S and the O as capitals, and the rest lowercase), in italic and white color. I also don't like how it's on the very right of the image, making it too close to the next product's name. I'd like to have it next to the product's name, like this: Futur solitari Sold Out Can I do both changes? Link to comment
mireiamireia Posted November 12, 2022 Author Share Posted November 12, 2022 I have managed to change some of these things. Right now, I've changed the typeface, the color, and from regular to italic. For some reason I still can't change the text to lowercase, eventhough I selected the option. I also can't seem to find how to move the text to the left, and leaving it AFTER the product name. mirelha.xyz/shop Link to comment
tuanphan Posted November 21, 2022 Share Posted November 21, 2022 #1. Add to Design > Custom CSS .product-mark.sold-out { text-transform: uppercase; } #2. Move it to after name like this? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
mireiamireia Posted November 26, 2022 Author Share Posted November 26, 2022 (edited) #1 I want the "sold out" to be LOWERCASE or SENTENCE CASE. I've tried your code, putting lowercase On 11/21/2022 at 6:34 AM, tuanphan said: #1. Add to Design > Custom CSS .product-mark.sold-out { text-transform: uppercase; } but it doesn't change. And as i have shown in my previous screenshot, i've marked the lowercase option. So basically, although i have the lowercase design option and your code, it somehow still shows up in uppercase. #2 On 11/21/2022 at 6:34 AM, tuanphan said: #2. Move it to after name like this? Yes! That would be ideal!! Could it look like that only in desktop version? And in mobile version leave it as it is now in the right corner? Edited November 26, 2022 by mireiamireia Link to comment
Solution tuanphan Posted November 29, 2022 Solution Share Posted November 29, 2022 #1. If lowercase, you need to use this code .product-mark.sold-out { text-transform: lowercase !important; } #2. Use this CSS @media screen and (min-width:768px) { .product-mark.sold-out { display: none; } .sold-out .grid-title:after { content: "sold out"; font-family: IM Fell English; font-weight: bold; font-style: italic; letter-spacing: .01em; text-transform: lowercase; line-height: .5em; color: gray; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
mireiamireia Posted December 1, 2022 Author Share Posted December 1, 2022 thank you so much!! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment