[Skip to main content](#vessel-content)

#   How to change style of added to cart info message

##

- **[jeffmcbiscuit](/forum/user/60250-jeffmcbiscuit "View jeffmcbiscuit's Profile")**
- [![jeffmcbiscuit's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/60250-jeffmcbiscuit "View jeffmcbiscuit's Profile") Topic Author
- [ Offline](/forum/user/60250-jeffmcbiscuit)

Less More

- Posts: 32
- Thank you received: 1
-
-

5 years 11 months ago [\#326578](#326578) by [jeffmcbiscuit](/forum/user/60250-jeffmcbiscuit "View jeffmcbiscuit's Profile")  *[How to change style of added to cart info message](/forum/27-checkout/901351-how-to-change-style-of-added-to-cart-info-message#326578 "-- HikaShop version -- : 4.4.0 -- Joomla version -- : 3.9.22 -- PHP version -- : 7.4  I'm trying to style the &quot;X product has been added to cart&quot; message drop down, but I can't find the CSS for it anywhere, and for some reason you've used !important for the 'color' attribute which is pretty bad practice. I can't override this in my custom.css file.   .notifyjs-metro-warning { color: #8a6d3b !important; background-color: #fcf8e3; border: 1px solid #faebcc; }")* was created by *[jeffmcbiscuit](/forum/user/60250-jeffmcbiscuit "View jeffmcbiscuit's Profile")*

-- HikaShop version -- : 4.4.0
-- Joomla version -- : 3.9.22
-- PHP version -- : 7.4

I'm trying to style the "X product has been added to cart" message drop down, but I can't find the CSS for it anywhere, and for some reason you've used !important for the 'color' attribute which is pretty bad practice. I can't override this in my custom.css file.

&lt;style&gt;
.notifyjs-metro-warning {
color: #8a6d3b !important;
background-color: #fcf8e3;
border: 1px solid #faebcc;
}

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI3LWNoZWNrb3V0LzkwMTM1MS1ob3ctdG8tY2hhbmdlLXN0eWxlLW9mLWFkZGVkLXRvLWNhcnQtaW5mby1tZXNzYWdlP3RtcGw9bWFya2Rvd24=) 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?1793428657)](/forum/user/63-nicolas "View nicolas's Profile")
- [ Offline](/forum/user/63-nicolas)

Less More

- Posts: 86556
- Thank you received: 14304
-
-

5 years 11 months ago [\#326584](#326584) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile")  Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[How to change style of added to cart info message](/forum/27-checkout/901351-how-to-change-style-of-added-to-cart-info-message#326584 "-- HikaShop version -- : 4.4.0 -- Joomla version -- : 3.9.22 -- PHP version -- : 7.4  I'm trying to style the &quot;X product has been added to cart&quot; message drop down, but I can't find the CSS for it anywhere, and for some reason you've used !important for the 'color' attribute which is pretty bad practice. I can't override this in my custom.css file.   .notifyjs-metro-warning { color: #8a6d3b !important; background-color: #fcf8e3; border: 1px solid #faebcc; }")*

Hi,

That CSS is not added by us. It's inside the library notify-js which HikaShop uses to display the notification boxes.
You can find it in the file media/com_hikashop/js/notify.js with the code: Code:

addStyle("metro-lite", { html: '&lt;div&gt;&lt;div class="text-wrapper"&gt;&lt;div class="title" data-notify-html="title"&gt;&lt;/div&gt;&lt;div class="text" data-notify-html="text"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;', classes: { error: { "color": "#a94442 !important", "background-color": "#f2dede", "border": "1px solid #ebccd1" }, success: { "color": "#3c763d !important", "background-color": "#dff0d8", "border": "1px solid #d6e9c6" }, info: { "color": "#31708f !important", "background-color": "#d9edf7", "border": "1px solid #bce8f1" }, warning: { "color": "#8a6d3b !important", "background-color": "#fcf8e3", "border": "1px solid #faebcc" }, black: { "color": "#fafafa !important", "background-color": "#333", "border": "1px solid #000" }, white: { "background-color": "#f1f1f1", "border": "1px solid #ddd" } } });

It indeed cannot be overridden in CSS.
To override it, you would have to add that same javascript modified with the colors you want in a view file used where the notification is displayed.
That way, your javascript would override the "metro" style used by notify-js with your own colors.

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI3LWNoZWNrb3V0LzkwMTM1MS1ob3ctdG8tY2hhbmdlLXN0eWxlLW9mLWFkZGVkLXRvLWNhcnQtaW5mby1tZXNzYWdlP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[jeffmcbiscuit](/forum/user/60250-jeffmcbiscuit "View jeffmcbiscuit's Profile")**
- [![jeffmcbiscuit's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/60250-jeffmcbiscuit "View jeffmcbiscuit's Profile") Topic Author
- [ Offline](/forum/user/60250-jeffmcbiscuit)

Less More

- Posts: 32
- Thank you received: 1
-
-

5 years 11 months ago [\#326651](#326651) by [jeffmcbiscuit](/forum/user/60250-jeffmcbiscuit "View jeffmcbiscuit's Profile")  Replied by *[jeffmcbiscuit](/forum/user/60250-jeffmcbiscuit "View jeffmcbiscuit's Profile")* on topic *[How to change style of added to cart info message](/forum/27-checkout/901351-how-to-change-style-of-added-to-cart-info-message#326651 "-- HikaShop version -- : 4.4.0 -- Joomla version -- : 3.9.22 -- PHP version -- : 7.4  I'm trying to style the &quot;X product has been added to cart&quot; message drop down, but I can't find the CSS for it anywhere, and for some reason you've used !important for the 'color' attribute which is pretty bad practice. I can't override this in my custom.css file.   .notifyjs-metro-warning { color: #8a6d3b !important; background-color: #fcf8e3; border: 1px solid #faebcc; }")*

OK thanks Nicolas.

> To override it, you would have to add that same javascript modified with the colors you want in a view file used where the notification is displayed.

So I can copy / paste this into one of the Hikashop view files and change the colours to suit myself? That's fine. Do you know which view it needs to be please?

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI3LWNoZWNrb3V0LzkwMTM1MS1ob3ctdG8tY2hhbmdlLXN0eWxlLW9mLWFkZGVkLXRvLWNhcnQtaW5mby1tZXNzYWdlP3RtcGw9bWFya2Rvd24=) 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?1793428657)](/forum/user/63-nicolas "View nicolas's Profile")
- [ Offline](/forum/user/63-nicolas)

Less More

- Posts: 86556
- Thank you received: 14304
-
-

5 years 11 months ago [\#326685](#326685) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile")  Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[How to change style of added to cart info message](/forum/27-checkout/901351-how-to-change-style-of-added-to-cart-info-message#326685 "-- HikaShop version -- : 4.4.0 -- Joomla version -- : 3.9.22 -- PHP version -- : 7.4  I'm trying to style the &quot;X product has been added to cart&quot; message drop down, but I can't find the CSS for it anywhere, and for some reason you've used !important for the 'color' attribute which is pretty bad practice. I can't override this in my custom.css file.   .notifyjs-metro-warning { color: #8a6d3b !important; background-color: #fcf8e3; border: 1px solid #faebcc; }")*

Hi,

Which view depends on where you have the add to cart button displayed.
If it's only on the product details page, then you can add that code in the product / show.php view file.
Note that you'll need to encapsulate that code in script tags.

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI3LWNoZWNrb3V0LzkwMTM1MS1ob3ctdG8tY2hhbmdlLXN0eWxlLW9mLWFkZGVkLXRvLWNhcnQtaW5mby1tZXNzYWdlP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[jeffmcbiscuit](/forum/user/60250-jeffmcbiscuit "View jeffmcbiscuit's Profile")**
- [![jeffmcbiscuit's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/60250-jeffmcbiscuit "View jeffmcbiscuit's Profile") Topic Author
- [ Offline](/forum/user/60250-jeffmcbiscuit)

Less More

- Posts: 32
- Thank you received: 1
-
-

5 years 11 months ago [\#326688](#326688) by [jeffmcbiscuit](/forum/user/60250-jeffmcbiscuit "View jeffmcbiscuit's Profile")  Replied by *[jeffmcbiscuit](/forum/user/60250-jeffmcbiscuit "View jeffmcbiscuit's Profile")* on topic *[How to change style of added to cart info message](/forum/27-checkout/901351-how-to-change-style-of-added-to-cart-info-message#326688 "-- HikaShop version -- : 4.4.0 -- Joomla version -- : 3.9.22 -- PHP version -- : 7.4  I'm trying to style the &quot;X product has been added to cart&quot; message drop down, but I can't find the CSS for it anywhere, and for some reason you've used !important for the 'color' attribute which is pretty bad practice. I can't override this in my custom.css file.   .notifyjs-metro-warning { color: #8a6d3b !important; background-color: #fcf8e3; border: 1px solid #faebcc; }")*

I use custom pages for my products and have cart buttons dotted all around the site. Will I be able to tell which views if I do the 'show views on frontend' thingy from advanced config?

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI3LWNoZWNrb3V0LzkwMTM1MS1ob3ctdG8tY2hhbmdlLXN0eWxlLW9mLWFkZGVkLXRvLWNhcnQtaW5mby1tZXNzYWdlP3RtcGw9bWFya2Rvd24=) 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?1793428657)](/forum/user/63-nicolas "View nicolas's Profile")
- [ Offline](/forum/user/63-nicolas)

Less More

- Posts: 86556
- Thank you received: 14304
-
-

5 years 11 months ago [\#326706](#326706) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile")  Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[How to change style of added to cart info message](/forum/27-checkout/901351-how-to-change-style-of-added-to-cart-info-message#326706 "-- HikaShop version -- : 4.4.0 -- Joomla version -- : 3.9.22 -- PHP version -- : 7.4  I'm trying to style the &quot;X product has been added to cart&quot; message drop down, but I can't find the CSS for it anywhere, and for some reason you've used !important for the 'color' attribute which is pretty bad practice. I can't override this in my custom.css file.   .notifyjs-metro-warning { color: #8a6d3b !important; background-color: #fcf8e3; border: 1px solid #faebcc; }")*

Hi,

The "Display view files" setting will only work for HikaShop views.
Based on how the add to cart buttons were added to all your pages, it's possible that it won't show anything, which will mean that no HikaShop view is involved. It's worth giving it a shot though.
In case no Hikashop view file is involved, you could add the code in your template, so that it is available on all the pages.
However, you'll have to add a check on the addStyle function to run this code only if this function is present.

The following user(s) said Thank You: [levelup](/forum/user/61801-levelup "View levelup's Profile")

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI3LWNoZWNrb3V0LzkwMTM1MS1ob3ctdG8tY2hhbmdlLXN0eWxlLW9mLWFkZGVkLXRvLWNhcnQtaW5mby1tZXNzYWdlP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[jeffmcbiscuit](/forum/user/60250-jeffmcbiscuit "View jeffmcbiscuit's Profile")**
- [![jeffmcbiscuit's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/60250-jeffmcbiscuit "View jeffmcbiscuit's Profile") Topic Author
- [ Offline](/forum/user/60250-jeffmcbiscuit)

Less More

- Posts: 32
- Thank you received: 1
-
-

5 years 11 months ago [\#326737](#326737) by [jeffmcbiscuit](/forum/user/60250-jeffmcbiscuit "View jeffmcbiscuit's Profile")  Replied by *[jeffmcbiscuit](/forum/user/60250-jeffmcbiscuit "View jeffmcbiscuit's Profile")* on topic *[How to change style of added to cart info message](/forum/27-checkout/901351-how-to-change-style-of-added-to-cart-info-message#326737 "-- HikaShop version -- : 4.4.0 -- Joomla version -- : 3.9.22 -- PHP version -- : 7.4  I'm trying to style the &quot;X product has been added to cart&quot; message drop down, but I can't find the CSS for it anywhere, and for some reason you've used !important for the 'color' attribute which is pretty bad practice. I can't override this in my custom.css file.   .notifyjs-metro-warning { color: #8a6d3b !important; background-color: #fcf8e3; border: 1px solid #faebcc; }")*

Thanks Nicolas, I'll give it a go and let you know if I get stuck.

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI3LWNoZWNrb3V0LzkwMTM1MS1ob3ctdG8tY2hhbmdlLXN0eWxlLW9mLWFkZGVkLXRvLWNhcnQtaW5mby1tZXNzYWdlP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[levelup](/forum/user/61801-levelup "View levelup's Profile")**
- [![levelup's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/61801-levelup "View levelup's Profile")
- [ Offline](/forum/user/61801-levelup)

Less More

- Posts: 145
- Thank you received: 6
-
-

4 years 9 months ago [\#338676](#338676) by [levelup](/forum/user/61801-levelup "View levelup's Profile")  Replied by *[levelup](/forum/user/61801-levelup "View levelup's Profile")* on topic *[How to change style of added to cart info message](/forum/27-checkout/901351-how-to-change-style-of-added-to-cart-info-message#338676 "-- HikaShop version -- : 4.4.0 -- Joomla version -- : 3.9.22 -- PHP version -- : 7.4  I'm trying to style the &quot;X product has been added to cart&quot; message drop down, but I can't find the CSS for it anywhere, and for some reason you've used !important for the 'color' attribute which is pretty bad practice. I can't override this in my custom.css file.   .notifyjs-metro-warning { color: #8a6d3b !important; background-color: #fcf8e3; border: 1px solid #faebcc; }")*

Hi
How can I edit the content of this notify?
i want add a button and a link to it?

---

Life is the unique stage of our art. Everyone sings their own song and leaves the stage. The stage is always permanent. Blessed is that song that people remember.

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI3LWNoZWNrb3V0LzkwMTM1MS1ob3ctdG8tY2hhbmdlLXN0eWxlLW9mLWFkZGVkLXRvLWNhcnQtaW5mby1tZXNzYWdlP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[Philip](/forum/user/34318-philip "View Philip's Profile")**
- [![Philip's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/34318-philip "View Philip's Profile")
- [ Offline](/forum/user/34318-philip)

Less More

- Posts: 4820
- Thank you received: 652
-
-

4 years 9 months ago -  4 years 9 months ago [\#338677](#338677) by [Philip](/forum/user/34318-philip "View Philip's Profile")  Replied by *[Philip](/forum/user/34318-philip "View Philip's Profile")* on topic *[How to change style of added to cart info message](/forum/27-checkout/901351-how-to-change-style-of-added-to-cart-info-message#338677 "-- HikaShop version -- : 4.4.0 -- Joomla version -- : 3.9.22 -- PHP version -- : 7.4  I'm trying to style the &quot;X product has been added to cart&quot; message drop down, but I can't find the CSS for it anywhere, and for some reason you've used !important for the 'color' attribute which is pretty bad practice. I can't override this in my custom.css file.   .notifyjs-metro-warning { color: #8a6d3b !important; background-color: #fcf8e3; border: 1px solid #faebcc; }")*

Hello,

In order to better understand your need, can you precise the context and be more specific on your need, and so for this :
**1.** An **url link** in order to see the context
**2.** Describe your **needs** and the changes you want to make

Awaiting your returns to answer you precisely.
Regards

Last edit: 4 years 9 months ago by [Philip](/forum/user/34318-philip "View Philip's Profile").

The following user(s) said Thank You: [levelup](/forum/user/61801-levelup "View levelup's Profile")

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI3LWNoZWNrb3V0LzkwMTM1MS1ob3ctdG8tY2hhbmdlLXN0eWxlLW9mLWFkZGVkLXRvLWNhcnQtaW5mby1tZXNzYWdlP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[levelup](/forum/user/61801-levelup "View levelup's Profile")**
- [![levelup's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/61801-levelup "View levelup's Profile")
- [ Offline](/forum/user/61801-levelup)

Less More

- Posts: 145
- Thank you received: 6
-
-

4 years 9 months ago [\#338789](#338789) by [levelup](/forum/user/61801-levelup "View levelup's Profile")  Replied by *[levelup](/forum/user/61801-levelup "View levelup's Profile")* on topic *[How to change style of added to cart info message](/forum/27-checkout/901351-how-to-change-style-of-added-to-cart-info-message#338789 "-- HikaShop version -- : 4.4.0 -- Joomla version -- : 3.9.22 -- PHP version -- : 7.4  I'm trying to style the &quot;X product has been added to cart&quot; message drop down, but I can't find the CSS for it anywhere, and for some reason you've used !important for the 'color' attribute which is pretty bad practice. I can't override this in my custom.css file.   .notifyjs-metro-warning { color: #8a6d3b !important; background-color: #fcf8e3; border: 1px solid #faebcc; }")*

I want the shopping cart notify to open as a modal and the buttons to "continue shopping" and "go to the cart".

---

Life is the unique stage of our art. Everyone sings their own song and leaves the stage. The stage is always permanent. Blessed is that song that people remember.

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI3LWNoZWNrb3V0LzkwMTM1MS1ob3ctdG8tY2hhbmdlLXN0eWxlLW9mLWFkZGVkLXRvLWNhcnQtaW5mby1tZXNzYWdlP3RtcGw9bWFya2Rvd24=) 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?1793428657)](/forum/user/63-nicolas "View nicolas's Profile")
- [ Offline](/forum/user/63-nicolas)

Less More

- Posts: 86556
- Thank you received: 14304
-
-

4 years 9 months ago [\#338791](#338791) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile")  Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[How to change style of added to cart info message](/forum/27-checkout/901351-how-to-change-style-of-added-to-cart-info-message#338791 "-- HikaShop version -- : 4.4.0 -- Joomla version -- : 3.9.22 -- PHP version -- : 7.4  I'm trying to style the &quot;X product has been added to cart&quot; message drop down, but I can't find the CSS for it anywhere, and for some reason you've used !important for the 'color' attribute which is pretty bad practice. I can't override this in my custom.css file.   .notifyjs-metro-warning { color: #8a6d3b !important; background-color: #fcf8e3; border: 1px solid #faebcc; }")*

Hi,

You want to edit the HikaShop cart notification plugin via the Joomla plugins manager.
There, you have an option where you can select the "popup" mode and it will work like what you want.

The following user(s) said Thank You: [levelup](/forum/user/61801-levelup "View levelup's Profile")

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI3LWNoZWNrb3V0LzkwMTM1MS1ob3ctdG8tY2hhbmdlLXN0eWxlLW9mLWFkZGVkLXRvLWNhcnQtaW5mby1tZXNzYWdlP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

Board Categories HikaShop Install &amp; Update Product &amp; Category Display Content Creation Sales and Orders Orders management Reports &amp; Statistics Customers Checkout Payment Methods Shipping Methods Import &amp; Export (CSV, XLS…) Specific Features Affilation Taxes Wishlist Vote Carousel &amp; Slider Mass Actions Filters &amp; Search Discount &amp; 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.069 seconds

[Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org)
