How to change Special Price label colour?

Hi there,

I’ve been setting up a Magento 2.2.3 with Ultimo theme installed. I wanted to change the Special Price label colour of my demo store and have followed the instructions for adding my_styles.css in pub/media. However the Special Price colour is still in red. The CSS code I used is shown below:
.special-price .price, .special-price .price-label{ color: #ae9d6f; }

Any help/advice on how to change the Special Price colour would be greatly appreciated!
Kind regards,
Teo

Hey @Teodor_Bogdanov, glad to have you with us!

I’d be glad to try and answer your question. I just need a day-or-so to spin up a new server and install Ultimo on it. That way I can answer your question a bit better. I’ll come back to you here once I’m up and running if that’s ok :+1:

Hi @digitalstartup Thank you so much bud! All your time is appreciated truly. I’ve got this weird file in root/asset/dynamic/assets/m/iult/f/cfg.css that seems to be overriding my_styles.css but I can’t find that folder/file anywhere in the cPanel? Again, many thanks in advance!
Kindest,
Teo

Ok, so I’ve just:

  • Built a clean server
  • Installed Magento 2.2.5
  • Installed Sample Data
  • Installed Ultimo

So now we should be on the same-page (so to speak). I’ve applied a Special Price to an item and injected your CSS (which works perfectly).

Usual methods
With Ultimo there’s 3-ways in which you can apply your CSS:

  1. via the Dropdown under Configuration > Stores > Infortis > Theme Configuration. However, in this case it Special Price isn’t listed in the options
  2. via a Child Theme
  3. via Content > Design > Configuration > HTML Head by introducing a new css file.

The issue
Based on your post, I can see that it’s method 3 that you’ve gone with. In most cases this would work fine. However, in this case it appears that the CSS which makes it red is hardcoded into a phtml file (app/code/Infortis/Ultimo/view/frontend/templates/assets/css/design.phtml). Note: as this is considered “core code”, you can’t just change what’s in this file.

Anyway, browsers always apply the CSS that it reads last. And because the Special Price CSS is hardcoded to the page, it’s seeing that you want to change the colour to gold but ignoring it as red was the last thing it read. - If that makes sense??

Solution
Personally, I feel this is a flaw with Ultimo’s theme implementation. The simplest way to fix this (which doesn’t involve override modules) is to use the !important flag at the end of your css changes. For example:

.special-price .price, .special-price .price-label{ color: #ae9d6f !important; }

Normally, I’m dead against the use of !important as it can break CSS. But in your case, I don’t see an alternative method. So long as you aren’t planning that colour to change dynamically, you’ll be fine.

Try it out and let me know how you get on :+1:

P.S. When I have a bit more time, I’ll go over the steps I took to find the issue/file/code

3 Likes

I owe you there @digitalstartup ! Awesome - it did fix it, silly of me not trying that out! Big learning point there, thanks for which!
Kindest,
Teo

2 Likes