[Skip to main content](#vessel-content) # Change the font colour on discount prices ## - **[golda](/forum/user/32307-golda "View golda's Profile")** - [![golda's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/32307-golda "View golda's Profile") Topic Author - [ Offline](/forum/user/32307-golda) Less More - Posts: 2 - Thank you received: 0 - - 12 years 4 months ago [\#159518](#159518) by [golda](/forum/user/32307-golda "View golda's Profile") *[Change the font colour on discount prices](/forum/46-discount-coupon/868874-change-the-font-colour-on-discount-prices#159518 "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")* was created by *[golda](/forum/user/32307-golda "View golda's Profile")* 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](http://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 Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQ2LWRpc2NvdW50LWNvdXBvbi84Njg4NzQtY2hhbmdlLXRoZS1mb250LWNvbG91ci1vbi1kaXNjb3VudC1wcmljZXM/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[lionel75](/forum/user/11856-lionel75 "View lionel75's Profile")** - [![lionel75's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/11856-lionel75 "View lionel75's Profile") - [ Offline](/forum/user/11856-lionel75) Less More - Posts: 846 - Thank you received: 92 - - 12 years 4 months ago - 12 years 4 months ago [\#159523](#159523) by [lionel75](/forum/user/11856-lionel75 "View lionel75's Profile") Replied by *[lionel75](/forum/user/11856-lionel75 "View lionel75's Profile")* on topic *[Change the font colour on discount prices](/forum/46-discount-coupon/868874-change-the-font-colour-on-discount-prices#159523 "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 &amp;#x274c; 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 [ ](http://all-free-download.com/free-vector/cross-check-mark.html)[ all-free-download.com/free-vector/cross-check-mark.html](http://all-free-download.com/free-vector/cross-check-mark.html). perhaps the unicode value is this value &amp;#x274c; rendering like &#x274c; see [ ](http://www.fileformat.info/info/unicode/char/274c/index.htm)[ www.fileformat.info/info/unicode/char/274c/index.htm](http://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](http://en.wikipedia.org/wiki/Gecko_%28layout_engine%29) use by firefox cross-firefox-3D.png 3D view of layer in firefox Last edit: 12 years 4 months ago by [lionel75](/forum/user/11856-lionel75 "View lionel75's Profile"). The following user(s) said Thank You: [golda](/forum/user/32307-golda "View golda's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQ2LWRpc2NvdW50LWNvdXBvbi84Njg4NzQtY2hhbmdlLXRoZS1mb250LWNvbG91ci1vbi1kaXNjb3VudC1wcmljZXM/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png)](/forum/user/63-nicolas "View nicolas's Profile") - [ Away](/forum/user/63-nicolas) Less More - Posts: 86292 - Thank you received: 14269 - - 12 years 4 months ago [\#159522](#159522) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Change the font colour on discount prices](/forum/46-discount-coupon/868874-change-the-font-colour-on-discount-prices#159522 "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")* 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](http://www.hikashop.com/support/support/documentation/153-customize-the-display.html) The following user(s) said Thank You: [golda](/forum/user/32307-golda "View golda's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQ2LWRpc2NvdW50LWNvdXBvbi84Njg4NzQtY2hhbmdlLXRoZS1mb250LWNvbG91ci1vbi1kaXNjb3VudC1wcmljZXM/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. Board Categories HikaShop- Install & Update- Product & Category Display- Content Creation- Sales and Orders- - Orders management- - Reports & Statistics- Customers- Checkout- Payment Methods- Shipping Methods- Import & Export (CSV, XLS…)- Specific Features- - Affilation- - Taxes- - Wishlist- - Vote- - Carousel & Slider- - Mass Actions- - Filters & Search- - Discount & Coupon- - Feature Request- Integrations- Showcase- General Talk about HikaShop- Development- - HikaShop 3.0 Beta- Translation- Commercial Jobs HikaShop Components- HikaMarket- - Market: Feature requests- - Market: How to?- - Market: Bug Report- HikaSerial- - General talk about HikaSerial- - Serial: Bug Report- - Serial: How to?- - Support en Français de HikaSerial (French Support)- - HikaSubscription- HikaAuction- - Auction: Feature requests- - Auction: How to?- - Auction: Bug report Hikashop around the world- Support en Français (French Support)- Russian- - FAQ. Курс выживания с Hikashop. Частые вопросы и о- - Расширения Hikashop- - Наши сайты на Hikashop- 日本語版サポート(Japanese Support)- Thai- German Archives- Bug Report- How to? [](/forum/topics/feed/mode-topics?format=feed&type=rss) Time to create page: 0.192 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org) [](#top)