Active Link same as Hover

[DCDC]

Greetings,

I am putting the finishing touches on a site, http://www.metrorelocations.com/showroom. I am attempting to make the active link the same background as the hover. Hover works fine, but I am at a loss for how to successfully change the active link.

When I look at the source for the live file, I see that it is placing the the active link's words in a span. So when I change the css stylesheet with span, it only updates the background of the words, not the tab itself. I need to figure out how to change the span for an active link to the entire link, and not just the category words. Unless there is a better way to do this.

I'm guessing this is going to require a php modifcation. Any help would be most appreciated.

Thanks in advance,

Christopher

[gjh42]

Make the span's class display: block; in the stylesheet. You will need to give it a width, and possibly float: left; to keep the links on the same line.

Categories Dressing takes care of this for the categories sidebox, but it doesn't apply to the categories-tabs menu.

[DCDC]

Thanks for your response. I tried what you suggested, but it resulted in even further funkiness. Here's the applicable piece of code in the css:

		#navCatTabs span {
      /*background-position:0% -150px;*/
      /*color:#716767;*/
			background:url("../images/right_botha.gif") no-repeat right top;
			color: #FFFFFF;
			display: block;
			width: 100%;
			height: 100%;
			float: left;
		  }

You can see what it does when you go out to the live site.

Thanks in advance for any further help you can provide.

Christopher

[gjh42]

Perhaps the best thing will be to rework the code for categories-tabs a bit. The <a> elements get the category-top class, but as all the links in that bar are the same level, moving the class-defining code from a span to the link wouldn't decrease any functionality.

Look at it and see what you can do; I'll be back later if you need more help.

[DCDC]

Glen,

The NavCatTabs isn't coded in the way *I* would normally code a static site menu, but there's so much code in this stylesheet I'm afraid of recoding and causing conflicts.

Can you give me an example of what you were referring to before I start ripping apart this section of code?

Thanks,
Christopher

[gjh42]

The relevant section is very simple.

  // currently selected category
  if ((int)$cPath == $categories_tab->fields['categories_id']) {
    $new_style = 'category-top';
    $categories_tab_current = '<span class="category-subs-selected">' . $categories_tab->fields['categories_name'] . '</span>';
  } else {
    $new_style = 'category-top';
    $categories_tab_current = $categories_tab->fields['categories_name'];
  } 

All you need to do is add -selected to the category-top class in the first case:

  // currently selected category
  if ((int)$cPath == $categories_tab->fields['categories_id']) {
    $new_style = 'category-top-selected';
    $categories_tab_current = '<span class="category-subs-selected">' . $categories_tab->fields['categories_name'] . '</span>';
  } else {
    $new_style = 'category-top';
    $categories_tab_current = $categories_tab->fields['categories_name'];
  } 

then style

.category-top-selected {}

in your stylesheet.

[gjh42]

Forgot to note that the above code is in /includes/modules/your_template/categories_tabs.php.

If you want to put the class tag in the <li>, you can leave that file as is and edit /includes/templates/your_template/templates/tpl_modules_categories_tabs.php instead.

<div id="navCatTabs">
<ul>
<?php for ($i=0, $n=sizeof($links_list); $i<$n; $i++) { ?>
  <li><?php echo $links_list[$i];?></li>
<?php } ?>
</ul>
</div>

Add

<?php echo ereg('(category_subs_selected)',$links_list[$i])? ' class="category_top_selected"':''; ?>

<div id="navCatTabs">
<ul>
<?php for ($i=0, $n=sizeof($links_list); $i<$n; $i++) { ?>
  <li<?php echo ereg('(category_subs_selected)',$links_list[$i])? ' class="category_top_selected"':''; ?>><?php echo $links_list[$i];?></li>
<?php } ?>
</ul>
</div>

If this code finds the string "category_subs_selected" inside the link being processed, it will add the class tag to the <li>.

[DCDC]

Dear Glenn,

Thank you so very much. I've got it working now thanks to your help.

Christopher

[gjh42]

Glad it's sorted!

(For readers, the site is using the first method, from post #6.)