Change the Color Of "On Sale" In Focal Theme On Desktop & Mobile View

[LeyDE]

Im using the focal theme 12.4.0 and I want to change the color and background color of the "on sale" accent on both desktop & mobile view.

What exactly do I need to change in the code?

 
Thanks in advance!

[Asad-Mahmood]

What's your store url ?

[LeyDE]

the store url is: https://leyah.de/products/5-in-1-airstyler

[Asad-Mahmood]

Go to your online store ->  edit code -> base.css file 
and paste this code in the end of file

.product-meta .product-meta__price-list-container span.label.label--highlight {
    background: #e7696e !important;
    color: #fff !important;
}

[LeyDE]

this didnt work

[Made4uo-Ribe]

Hi @LeyDE 

Do you mean this one? 

From the product page? or other pages? 

You need to find the code in the theme.css. and change the color. 

if cant  not add this code at the bttom of the theme.css. 

.product-meta .product-meta__price-list-container span.label.label--highlight {
    background: red !important;
    color: #282828 !important;
}

And Save. 

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[LeyDE]

product page. i have the new version 12.4.0 active now. i want to change the color of "on sale" and want the first letter to be capitalized. both in combination. i had it in the older version but it doesnt work for this one. would appreciate it if you would look up on that again. thanks.

[Made4uo-Ribe]

Okay, to change only the text color and capitalize. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.product-meta .product-meta__price-list-container span.label.label--highlight {
    color: white !important;
     text-transform: capitalize !important;
}

• And Save.
• Result:
• 

 Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[LeyDE]

this didnt work. I want the text to appear bigger, only the first letter capitalized ("You") and change color. 

Mainly for mobile view and focal 12.4.0

[Made4uo-Ribe]

Sorry, I dont understand anymore your request.

1st: color and background color of the "on sale".

2nd: color of "on sale" and want the first letter to be capitalized. 

3rd: text to appear bigger, only the first letter capitalized ("You") and change color. 

And you added more repeating code in your theme.css. Of course, it won't work!

I’ve already given you the code, but you’re making it more complicated. Stick to the initial request, solve it first, and then move forward. The color isn’t changing because you’re applying the same color repeatedly—change the color!

PLEASE, if you want to solve this remove the codes SS above.  from line 12432 until 12446 and re place the code below. 

.product-meta__price-list-container span.label.label--highlight {
    font-size: 18px !important; /*increas font*/
    text-transform: capitalize !important; /*capital all the word*/
    background-color: red !important; /*change background color*/
    color: white !important; /*text color*/
}

And Save. 

Result:

If this still didnt solve the problem, please hire a developer. Let us know if your interested. Thanks!

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!