Change the font colour on discount prices

How can I change the font color on discounted items to RED, that is I would like the old price to be crossed out in red and the new price to be displayed in red.



-- url of the page with the problem -- : samorahouse.com
-- HikaShop version -- : 2.3.0 (Free version)
-- Joomla version -- : 2.5.19
-- PHP version -- : x.x.x
-- Browser(s) name and version -- : XXXXX x.x.x
-- Error-message(debug-mod must be tuned on) -- : Error_message

There is many way in css to have this. I give you somecode to adpat to your own code
I put the CSS inline but you can use the class name i put in the code to remove the inline css code .
a--use image overlay
b-use the HTML code ❌ to show a cross
b1 put this symbol inside a html tag p with selector and place the p box over the price like image overlay
b2 put in the box around the value you want the cross by using pseudo element after


a-- use an image overlay on top of the text ( z-index) . the image could be SVG ot png


<div class="cross" style="position:relative;width:100px;height:100px">
.......... <div class="price" style="position:absolute;top:0">20€</div>
...........<div class="old" style="position:absolute;bottom:0;right:0;color:red;">
.....................30€
.................... <div class="overlay" style="position: absolute; z-index: 999; background: url(cross.png);
............................. background-repeat: no-repeat; bottom: -71px; right: -56px; width: 88px; height: 100px;">
......................</div>
...........</div>
</div>


b2-- use CSS :before :after with an icon with font-face item set for content : X; that embed a cross symbol
Wingdings symbol all-free-download.com/free-vector/cross-check-mark.html .
perhaps the unicode value is this value &amp;#x274c; rendering like &#x274c; see www.fileformat.info/info/unicode/char/274c/index.htm .
so the CSS code ll look like
selectorName:after {
content :"&amp;#x274c;" ;
left: value;
to do position .....}

I hope the code ll help you

---

attachment
cross.png file with transparent background
cross_firefox_capturescreen.png html rendering capture screen by gecko layout engine use by firefox
cross-firefox-3D.png 3D view of layer in firefox

Hi,

You'll have to add custom CSS on the discounted price and original price classes to change the color of their text.
You can follow our tutorial on how to modify the CSS of HikaShop here:
www.hikashop.com/support/support/documen...ize-the-display.html