CSS for top right corner alerts

  • Posts: 120
  • Thank you received: 14
  • Hikashop Business
7 months 2 weeks ago #360712

How to edit the alerts such as ... item has been added to the cart ... so that it's more readable
Also how to adjust the time delay on that alert as well.

Thanks

Please Log in or Create an account to join the conversation.

  • Posts: 83007
  • Thank you received: 13398
  • MODERATOR
7 months 2 weeks ago #360714

Hi,

The delay can be modified in the settings of the HikaShop cart notification plugin via the Joomla plugins manager.

The text in these alerts can be changed with translation overrides:
www.hikashop.com/download/languages.html#modify

The style of the alert boxes can be changed with CSS code.
Here is a tutorial on how to add custom CSS to HikaShop:
www.hikashop.com/support/documentation/1...ize-the-display.html

Please Log in or Create an account to join the conversation.

  • Posts: 120
  • Thank you received: 14
  • Hikashop Business
7 months 2 weeks ago #360772

Time delay working now - thanks
Language translation works fine as is

Alert boxes has been challenging not only there but others.

Editing the Front-end CSS File and Styles for the front-end custom css doesn't achieve anything
Changing colour yes, anything such as font family or font size is crossed out / ignored

Chased down other CSS that refers to J! alerts and the two files that are referenced
...
/media/joomla-custom-elements/joomla-alert.css
/media/joomla-custom-elements/joomla-alert-min.css

Regardless of editing nothing changes.

Digging time ?

Thanks again

Last edit: 7 months 2 weeks ago by yerg55.

Please Log in or Create an account to join the conversation.

  • Posts: 83007
  • Thank you received: 13398
  • MODERATOR
7 months 2 weeks ago #360774

Hi,

You need to add CSS, not change it.
As the tutorial link I gave explains, you can use the inspector tool of your browser on the elements you want to style in order to find the CSS code already applying to the elements and write and test the CSS code you want to use to override the default CSS.
Here is an example of what someone else added to change the colors of these alert popups:
www.hikashop.com/support/forum/orders-ma...st-popup.html#279849

Please Log in or Create an account to join the conversation.

  • Posts: 120
  • Thank you received: 14
  • Hikashop Business
7 months 1 week ago #360820

You need to add CSS, not change it.
Absolutely understand why that's necessary.
Figured I'd test that way as well as these below

  • I've added everything I wish to change in the custom.css in Hikashop
  • I've added everything I wish to change in the custom.css in Template as well.

This is what I've added to force something dramatic to ensure I can see changes.
.notifyjs-metro-base.notifyjs-metro-warning {
  color: #CD0000 !important;
  background-color: #fafafa;
  border: 1px solid #CD0000;
font-family: "Arial"; 
  font-size: 20px;
}

Colours work great.
Font Family and size are totally ignored / struck out.


That's all for the negative alerts

Now for the add to cart alert



This style is referenced at ..... /media/com_hikashop/css/notify-metro.css?v=504
.notifyjs-metro-base .text-wrapper, .notifyjs-metro-lite-base .text-wrapper {
  text-align: left;
  font-family: 'Segoe UI';
}

I changed the font family to Arial.. No change

Out of desperation what I've done is added ALL the changes I am seeking into the system config.css, the media/com_hikashop/css, and all other CSS files.

NO cache enabled on the site as well just to be sure

Yup I'm desperate. :S

Attachments:
Last edit: 7 months 1 week ago by yerg55. Reason: clarity

Please Log in or Create an account to join the conversation.

  • Posts: 83007
  • Thank you received: 13398
  • MODERATOR
7 months 1 week ago #360822

Hi,

Well, it's hard to say anything precise without being able to study the situation directly with my browser's inspector tool.
Could you provide the URL of the pages and instructions to reproduce the different alert boxes and explain how you're trying to change them so that we can study the situation ? With all that, we should be able to tell you what you're missing.

Please Log in or Create an account to join the conversation.

  • Posts: 120
  • Thank you received: 14
  • Hikashop Business
7 months 1 week ago #360830

Thanks

Same product 2 options

newfreedombakery.com.au/2023/pastries/pr...astie-meat-vegetable

Add two and yup it's ok
Add 4 and not so good

I've been a dab hand at styling since Mambo OS and Virtuemart :blink:
This one has me absolutely stumped

Thanks Nicholas :)

Please Log in or Create an account to join the conversation.

  • Posts: 4760
  • Thank you received: 647
  • MODERATOR
7 months 1 week ago #360832

Hello,

In order to increase your css command priority the "!important" is a solution, BUT if there are another command that use an "!important" then the other way to override css command is to have a better selector.

Example :
=> From least priority to most priority
.html_class
.html_class div (or p, a, span etc...)
#container_id (or .container class) .html_class div

In your case we notice that you are targeting the container of your texts, so try adding the tag (div, span) and/or the class of your text element.
AND if that still doesn't work, add a class containing your entire notify popup.

Regards

Last edit: 7 months 1 week ago by Philip.
The following user(s) said Thank You: yerg55

Please Log in or Create an account to join the conversation.

  • Posts: 120
  • Thank you received: 14
  • Hikashop Business
7 months 1 week ago #360850

Understand your logic Nicholas and thanks for your patients

ALL the edits I made were simply to change font-family: to Arial and font-size to 20px in existing CSS files that were referenced in the live outcome.

Situation / Resolution
I'm using Gantry framework / theme
I ended up putting ALL the css changes into the template/custom/scss/custom.scss file and recompiling the css.

Finally resolved
:woohoo:

Last edit: 7 months 1 week ago by yerg55. Reason: Resolution found
The following user(s) said Thank You: nicolas

Please Log in or Create an account to join the conversation.

Time to create page: 0.079 seconds
Powered by Kunena Forum