Change blocktopmenu current links

[soldier]

Hello Everyone,

I would like to change the colors of the navigation bar to red on the hover and the current link. I changed the hover it works fine. How do you change the color, for example when you click about us page it turns red, while the other links are blue.

 

I tried to edit the superfish_modified.css in the modules/topblockmenu/css and i have written this code:

 

.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {

background: #fe0003;

 

}

 

This works for the hover, but once clicked the page I am on doesnt change color for link.

 

Any help is greatly appreciated, I just drunk 12 cups of coffee and still haven't figured this out.

[NemoPS]

Hi,

I haven't tested this on cms pages, but it works on categories. I noticed the menu, in 1.5.3.1, assigns the class sfHoverForce to the current top link. You may want to try styling that!

 

Cheers!

[soldier]

which stylesheet is this is, super-modified.css?

[NemoPS]

Well you can add it wherever you want since it doesn't seem to be assigned already, but that file would be optimal indeed

Edited January 25, 2013 by Nemo1 (see edit history)

[soldier]

I tried this code but it wont work.

.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active, .sf-menu a:sfHoverForce{

background: #fe0003;

 

}

[NemoPS]

Of course not, it's a class, not a state. Uhm... you know how to edit css don't you?

Like this

a.sfHoverForce {

color:green

}

[soldier]

I added that code in superfish-modified.css. Still doesn't work. I guess this is virtually impossible.

[NemoPS]

Some would say Impossible is nothing...

But seriously, you're doing something wrong for sure, the classed one is probably the list item, try li.sfHoverForce

Mine was just an example

Edited January 25, 2013 by Nemo1 (see edit history)

[soldier]

i triedli.sfHoverForce too

[soldier]

i would do the regular a.current way in the css, but I just don't know where to add the html code. I guess I will have to pay for a module because this Top Horizontal Menu is too much of a pain.

Edited January 25, 2013 by soldier (see edit history)

[NemoPS]

Aw, cm on, don't give up just yet.

There is no regular or uncommon way, .current is the exact same as .sfhoverforce since it's just a class.

 

You can't do it by css and html only, if you really want to change the current class. You will have to mess with php.

 

targeting .shHoverForce works for me. Again, you must be on 1.5.3.1

[yaniv14]

can you post your site url?

[NemoPS]

I didn't do it on my site, i did it locally by changing it directly in the browser, and wrked, you can try it yourself with firebug or chrome dev tools

[soldier]

do you know which css file you edited?

[WIZZAH]

Maybe this could help you to get the job done. With version 1.5.3.1 I built a custom horizontal top menu for some of the static pages in the shop. In my theme I added to the header template "header.tpl" the following code:

 

<div id="header_menu_balk">
<ul>
  <li class="item"><a {if substr_count($smarty.server.REQUEST_URI, "prices-drop" )}id="current_headermenuitem"{/if} href="{$link->getPageLink('prices-drop')}" title="{l s='Price drop'}">{l s='Price drop'}</a></li>
  <li class="item"><a {if substr_count($smarty.server.REQUEST_URI, "new-products" )}id="current_headermenuitem"{/if} href="{$link->getPageLink('new-products')}" title="{l s='New products'}">{l s='New products'}</a></li>
  <li class="item"><a {if substr_count($smarty.server.REQUEST_URI, "best-sales" )}id="current_headermenuitem"{/if} href="{$link->getPageLink('best-sales')}" title="{l s='Top sellers'}">{l s='Top sellers'}</a></li>
  <li class="item"><a {if substr_count($smarty.server.REQUEST_URI, "stores" )}id="current_headermenuitem"{/if} href="{$link->getPageLink('stores')}" title="{l s='Our stores'}">{l s='Our stores'}</a></li>
  <li class="item"><a {if substr_count($smarty.server.REQUEST_URI, "contact-us" )}id="current_headermenuitem"{/if} href="{$link->getPageLink('contact')}" title="{l s='Contact'}">{l s='Contact'}</a></li>
  </ul>
</div>

 

To change the list items for the current state I added the following to my custom stylesheet:

 

#header_menu_balk  li > a {
color: #ffffff;
}
#header_menu_balk  li > #current_headermenuitem{
color: #59bde8;
}
#header_menu_balk  li > a:hover {
color: #59bde8;
text-decoration: none;
}

[soldier]

Thanks Wizzah,

This seems to work, but how do I call the custom stylesheet once i add your code?

[WIZZAH]

Multiple solutions:

 

1. you add it to the header template itself enclosed in the smarty tag {literal}{/literal} to prevent the {} brackets in the styles from generating Smarty errors.

 

{literal}
<style>
#header_menu_balk  li > a {
color: #ffffff;
}
#header_menu_balk  li > #current_headermenuitem{
color: #59bde8;
}
#header_menu_balk  li > a:hover {
color: #59bde8;
text-decoration: none;
}
</style>
{/literal}

 

2. You add it to one of the style sheets that are already loaded by your theme.

 

3. You add a new custom stylesheet to your header.tpl.

Make sure you load this custom stylesheet right before the closing </head> tag to prevent other styles from overruling your customisations.

<link href="/themes/your_theme/css/your_custom_stylesheet.css" rel="stylesheet" type="text/css" media="all" />

 

Hope this helps. Have a great weekend.

[soldier]

Thank you Wizzah! This really made my day. I used method 1 and it worked perfectly. Thank you so much.

[NemoPS]

If you're interested, i wrote a simple tutorial about it, no need to change the tpls.

 

Here:

 

http://nemops.com/prestashop-top-menu-current-state/

[Baraku]

Hi! It works with category but not for home.. do you have a nice way to edit the php file to add class "sfHoverForce (for example)" on the li selected?

 

personnaly, I trought editing this part of code:

case 'SHOP':
 $selected = ($this->page_name == 'index' && ($this->context->shop->id == $id)) ? ' class="sfHover"' : '';

 

while doing:

case 'SHOP':
                   $selected = ($this->page_name == 'index' && ($this->context->shop->id == $id)) ? ' class="sfHover sfHoverForce"' : '';

..

 

no way! It doesnt work.. I was expecting the "sfHoverForce" class will be added on the line selected. Normally, this could have effect to add that class when the Case condition is valid.. but none!

 

any better idea? or tell me what have I forget to do...

 

Tks so much!

[NBBO]

Hey Baraku.

 

Did you ever solve this problem?

Been trying to find a solution myself without any luck.....