Highlight current page in speedbar
 

Hi there, currently I'm trying to highlight the speedbar link for the current page on which the user is. See the attached image to get my idea. So basicly when a user clicks on contacts in the speed bar, the contacts box link stays highlighted, which will make the menu more user-friendly. At first I thought this could be done with the active link property in CSS, but unfortunatelly it can't. So I've searched google and found out a way, but I'm not quite sure how to integrate this with X-Cart, so what we should do is assign id for the body of each page we have link to in the speed bar like this:


And after that for each link we must add a custom class like this:



And then we must add the custom classes in our CSS like this:



That sounds reasonable when we are dealing with HTML, but how to do this with X-Cart and Smarty. I really need this one and it is a feature, that everybody will enjoy. Can someone point me out to the right files that we need to edit and tell me how to adapt the code to use with this great shopping cart system?

Re: Highlight current page in speedbar
 

Use $main, $help_section and $page_data and define css style "current" or wnatever you want to call it

{if $main eq "...."}, {if $help_section eq "contactus"}, {if $page_data.pageid eq "...."}

Something like this

<a href=""{if $help_section eq "contactus"} class="current"{/if}>Contact Us</a>
<a href=""{if $page_data.pageid eq "5"} class="current"{/if}>Skin Care</a>

Re: Highlight current page in speedbar
 

Thank you, Sir. But in which file I should put this, and also all the links in my speed bar are links to categories in my site. So I'll be glad if you point me to the right file. Thanks in advance!

Re: Highlight current page in speedbar
 

These will be your links so where you want them to appear thats where you put them. Not sure right now what the template for the speed bar links was called but if you look in head,tpl you should be able to find it. If links are based on categories you can use

{if $current_category.categoryid eq "xxx"}

Re: Highlight current page in speedbar
 

I can't find the speedbar links. I got as far as tabs.tpl:

Re: Highlight current page in speedbar
 

These are the speed bar links. They are in an array called $speed_bar and the templates just loops trhough them. Put the if statement inside the <a>

Re: Highlight current page in speedbar
 

Something like this? How I should apply this for all of the 7 links and I know it sounds stupid but how can I get the category ID :) Thank you man, you are the one who is helping me since my fist post in this forum. I appreciate it, too bad I can't help you a lot with my poor knowledge...

Re: Highlight current page in speedbar
 

you can get the cat id in the admin section.

just click on the cat and then the id will show in the URL

Re: Highlight current page in speedbar
 

See above in red. You can get the catid from admin - open categories, point to the category in question - it is in the url or you can export categories and look in the csv file. The foreach loops through all speed bar links and will apply class current to the item only if that item in the loop is matching the if statement

Re: Highlight current page in speedbar
 

Thank you so much, that did the job! :)

PS: Is there a way to assign this current class to all subcategories in the main category, cause the highlighting disappears when I go into a subcategory?

Re: Highlight current page in speedbar
 

Re: Highlight current page in speedbar
 

Thanks, again Steve. This was extremely helpful, is there any way this to be done for the sub-sub categories without writing a whole bunch of numbers?

Take a look

Re: Highlight current page in speedbar
 

Not sure but there is probably a way

Re: Highlight current page in speedbar
 

{if $current_category.categoryid_path|regex_replace:" /\/[0-9\/]*/":""}class="current"{/if}

This should work

Re: Highlight current page in speedbar
 

Thanks Ash, where to put the category ID?

Re: Highlight current page in speedbar
 

{if $current_category.categoryid_path|regex_replace:" /\/[0-9\/]*/":"" eq "259"}class="current"{/if}

Re: Highlight current page in speedbar
 

Thaht did a perfect job. Ash, you are awesome. You and Steve, figured out the whole thing for me. Thanks guys! :)

Re: Highlight current page in speedbar
 

no problem, glad I could help.

Re: Highlight current page in speedbar
 

I want to remove the link on the tab, when same page is being viewed. So I made this change to skin1/customer/head.tpl . This is in 4.2.x

And then you can change the color of .current class as you wish

Re: Highlight current page in speedbar
 

Is there a way of doing this to highlight using the page Id for static pages?

Re: Highlight current page in speedbar
 

NOt exactky sure what you want to accomplish. What do you mean highlight??

Re: Highlight current page in speedbar
 

Hi,

For example when on the FAQ's (static) page I'd like to make the link in the main nav have a light green background. Perhaps by adding a class to the link and using CSS to style its background.

Please look at my link. http://www.urlgone.com/0feb23/

Re: Highlight current page in speedbar
 

ok gotcha. Yes there is a way.

{if $page_data.pageid = '2'}class="current"{/if}

replace the 2 with your faq page id class.

Re: Highlight current page in speedbar
 

Thanks ARW VISIONS.

But that applies the class to all the links — as the if statement is true each time the loop that generates the menu is cycled through.

I would like just the link that applies to the current to have the class.

Re: Highlight current page in speedbar
 

ok how about this....

{if $page_data.pageid eq '2' && $sb.title eq 'Test'}style="color:#cc0000"{/if}

replace with your data.

Re: Highlight current page in speedbar
 

{if $page_data.title eq $sb.title}style="color:#cc0000"{/if}
would work for all static pages as long as the page title and the speed bar title are the same.

Re: Highlight current page in speedbar
 

This seems to do the trick. Thank you very much.

Going to be a bugger if the client renames the pages though!

I thought this sort of functionality would be a standard feature for designers to latch onto.

Maybe Ill suggest as a feature request.

Thanks again.

Re: Highlight current page in speedbar
 

Ok - now I have to feature out the dynamic pages Eg. Contact

help.php?section=contactus

Do these page types have ID or titles?

Re: Highlight current page in speedbar
 

You can use "main" and "section" for help pages

Re: Highlight current page in speedbar
 

{if $page_data.title eq $sb.title}style="color:#cc0000"{/if} if u do this, the as long as speed bar title and page title match its good.

Re: Highlight current page in speedbar
 

{if $main eq "catalog" && $sb.title eq 'Shop'} class="current"{/if}

Seems to do the trick. Thank you all!