CSS Conflict with Contact Enhanced

Hello team,

There seems to be a CSS issue with Contact Enhanced component (not sure about others).

When I'm on the page "Orçamento" which is a Contact Enhanced Single Contact menu type, the template seems to load a different CSS and the menu ends up with Black menu items + Pink on hover (ads underline as well) and on active

http://awesomescreenshot.com/0494zr69ec
http://www.lightstyle.co.nz/web/dridemo/index.php/orcamento

On any other page/menu type the template uses White menu items + transparency? on hover and active, without underline.

http://awesomescreenshot.com/07c4zr6f69
http://www.lightstyle.co.nz/web/dridemo/index.php/ensaio-newborn

How can this be fixed?

Thanks,
Andre

Hi,
it's quite easy to fix, but I don't understand why we always have to fix issues which are not belongs to us?
I'm not irritated but you have to understand us.

Please this following code is for active menu item and now your turn:

#gkHeader li.active a {color:#8E4848 !important; text-decoration:underline;}

or
for hover only

#gkHeader li a:hover {color:#red !important; text-decoration:underline;}

Oscar,


Upon proper investigation I found out that the template is pulling the code for suffix dark-bg, template.css, line 1304 https://www.dropbox.com/s/p6x4jnwwebf9t8w/1304.jpg?dl=0 while the page/menu that points to Contact Enhanced was pulling it from template.css, line 1152 https://www.dropbox.com/s/66c6o88x24d1rws/1152.jpg?dl=0. Why? Beats me, but I'm sure the template's developer will have an answer...

Regardless of who the issue belongs to and who has to solve it, I'll leave my solution bellow in case another user faces similar issue with one of the 9000+ Joomla extensions out there. It might not be the most exact one (but at least worked) so if anyone knows of a better solution I'd love to hear from you.

1) Go to Extensions > Template Manager > gk_quark and click on the Features tab
Under Suffixes for pages ad com_contactenhanced (in this case) + dark-bg + click on Add rule + save. Make sure the rule is there, in my case it got stripped out and I had to ad the rule for the second time. https://www.dropbox.com/s/cpe7kskf0piqbek/quark_suffix.jpg?dl=0.

2) If like in my case the step above solves the color issue but doesn't solve the underline issue, ad the code bellow to the override.css file (make sure CSS overrides is enabled under template's Advanced settings tab) or directly into the Custom CSS code area of the template's Advanced settings tab.

Code: Select all

    .dark-bg .gkMainMenu > .gkmenu > li > a:hover,
    .dark-bg .gkMainMenu > .gkmenu > li > a:active,
    .dark-bg .gkMainMenu > .gkmenu > li > a:focus,
    .dark-bg .gkMainMenu > .gkmenu > li.active > a {
      text-decoration: none !important;
    }

Thanks,
Andre

Thanks for auto-help. But my solution also worked for hover.
And you didn't mentioned about active, but ... okey, thanks I hope that your post will help others.
Have a nice day.