Highlight current page in speedbar

FTI · #1 05-03-2010, 01:18 PM

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:

Code:

<body class=■home■>

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

Code:

<ul>
  <li><a href=■home■ class=■home■>Home</a>
  <li><a href=■articles.html■ class=■articles■>Articles</a>
  <li><a href=■blog.html■ class=■blog■>Blog</a>
  ┘ etc┘
  </ul>

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

Code:

body.home a.home, body.articles a.articles, body.blog a.blog {
  background-color: green;
  }

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?

cflsystems · #2 05-03-2010, 04:38 PM

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>

FTI · #3 05-04-2010, 04:55 AM

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!

cflsystems · #4 05-04-2010, 07:28 AM

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"}

FTI · #5 05-10-2010, 08:47 AM

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

Code:

{*
$Id: tabs.tpl,v 1.2 2009/04/21 11:42:00 max Exp $
vim: set ts=2 sw=2 sts=2 et:
*}
{if $speed_bar}
  <div class="tabs">
    <ul>
      {foreach from=$speed_bar item=sb name=tabs}
        <li{interline name=tabs}><a href="{$sb.link|amp}">{$sb.title}</a></li>
      {/foreach}
    </ul>
  </div>
{/if}

cflsystems · #6 05-10-2010, 12:35 PM

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>

FTI · #7 05-11-2010, 06:22 AM

Code:

{*
$Id: tabs.tpl,v 1.2 2009/04/21 11:42:00 max Exp $
vim: set ts=2 sw=2 sts=2 et:
*}
{if $speed_bar}
  <div class="tabs">
    <ul>
      {foreach from=$speed_bar item=sb name=tabs}
        <li{interline name=tabs}><a href="{$sb.link|amp}"{if $current_category.categoryid eq "xxx"}>{$sb.title}</a></li>
      {/foreach}
    </ul>
  </div>
{/if}

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...

ARW VISIONS · #8 05-11-2010, 07:14 AM

you can get the cat id in the admin section.

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

cflsystems · #9 05-11-2010, 09:41 AM

Quote:

Originally Posted by FTI

Code:

{*
$Id: tabs.tpl,v 1.2 2009/04/21 11:42:00 max Exp $
vim: set ts=2 sw=2 sts=2 et:
*}
{if $speed_bar}
  <div class="tabs">
    <ul>
      {foreach from=$speed_bar item=sb name=tabs}
        <li{interline name=tabs}><a href="{$sb.link|amp}"{if $current_category.categoryid eq "xxx"} class="current"{/if}>{$sb.title}</a></li>
      {/foreach}
    </ul>
  </div>
{/if}

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...

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

FTI · #10 05-24-2010, 06:36 AM

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?