Information Pop Up - icon overlaps with text

• url of the page with the problem -- :http://www.campology.ca/index.php/store-home
• HikaShop version -- : 2.2.2
• Joomla version -- : 2.5

The "information" and "warning" popups that inform buyers during registration etc... don't show correct... partly it is my template which creates "check mark" bullets...



The issue: The "information icon" or "Warning Icon" overlaps with the text.

Hi,

It is related to your Joomla template only.
HikaShop uses the Joomla message system of Joomla and does not put any image or CSS to modify it.
docs.joomla.org/Display_error_messages_and_notices

Regards,

That explains a lot... no wonder I couldn't find it...Your timely help is once again greatly appreciated.

Hey Jerome,

I tried to remove the Icon with no luck... I can't find it's source location within my template. The link you sent me has no mention of the icon. Do you have any ideas where it is?

As an alternative, maybe you could help me find the location for the Text within the popup...that I believe is in hikashop. Then I could give the test a margin or paddle to move it to the right of the icon.

Hi,

In your template, you can probably add the following css property:
#system-message li{ margin-left: 10px !important;}
Actually the margin-left seems to be set to "-16px" by your template.

... as usual your team was a great help. Unfortunately changing the margin in the template didn't work for me. As it turned out it effected other essentials parts of my site.... and yes the margin is -16 px ( you guys are good)

I now think the best solution for me is to remove the icons from the pop ups notifications. I can't find them... the search now begins.

Thanks again.

You have to change it in the file:
www.campology.ca/templates/campologystore/css/template.css
And using the " !important" should override the existing property.

Xavier wrote: You have to change it in the file:
www.campology.ca/templates/campologystore/css/template.css
And using the " !important" should override the existing property.

...BINGO... I was in the right CSS file however the I wrote the code wrong.

You guys are awesome once again....

I changed the margin to 30px to get is past the icon... and yippee dippeee it works. SEE ATTACHED