Customize Categories Tabs

[kcorbishley]

I have tried to customise the cat tabs in the header of my store. I have looked around the forums for ways to do this and one way worked well, but it didnt change the style for the tab of the category currently being viewed (basically a different background image).
From looking around it seemed I needed to add a new style to my css '#navCatTabs #current', the '#current' wasn't in my stylesheet previous to this mod even though '#navCatTabs' on it's own was. I am using Zen Cart v1.3.9h. I believe the '#current' may have been present in previous version, or im just doing something completely wrong. Below is the current code:

tpl_modules_categories_tabs.php:

<?php
/**
 * Module Template - categories_tabs
 *
 * Template stub used to display categories-tabs output
 *
 * @package templateSystem
 * @copyright Copyright 2003-2005 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_modules_categories_tabs.php 3395 2006-04-08 21:13:00Z ajeh $
 */

  include(DIR_WS_MODULES . zen_get_module_directory(FILENAME_CATEGORIES_TABS));
?>
<div style="width: 100%; display: block;">
<?php if (CATEGORIES_TABS_STATUS == '1' && sizeof($links_list) >= 1) { ?>
<div id="navCatTabsWrapper">
<div id="navCatTabs">
<ul>
<?php for ($i=0, $n=sizeof($links_list); $i<$n; $i++) { ?>
  <li><?php echo $links_list[$i];?></li>
<?php } ?>
    <li><a href="http://www.chimp-tech.co.uk/hosting/" target="_blank">Hosting</a></li>
    <li><a href="http://www.chimp-tech.co.uk/hosting/web_design.html" target="_blank">Web Design</a></li>
</ul>
</div>
</div>
<?php } ?>
</div>

stylesheet.categorytabs.css

  #navCatTabs {
      float:left;
      width:100%;
      background:url("") repeat-x bottom;
      font-size:93%;
      line-height:normal;
      }
    #navCatTabs ul {
      width:100%;
      margin:0;
      padding: 0px 10px 0px 5px;
      list-style:none;
      }
    #navCatTabs li {
      float:left;
      background:url("../images/left.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 9px;
      border-bottom:1px solid #765;
      }
    #navCatTabs a {
      float:left;
      display:block;
      background:url("../images/right.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      text-decoration:none;
	  font-weight: bold;
      color:#000;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #navCatTabs a {float:none;}
    /* End IE5-Mac hack */
    #navCatTabs a:hover {
      color:#fff;
      }
    #navCatTabs #current {
      background-position:url("../images/left_current.gif") no-repeat left top;
      border-width:0;
      }
    #navCatTabs #current a {
      background-position:url("../images/right_current.gif") no-repeat right top;
      padding-bottom:5px;
      color:#000;
      }
    #navCatTabs li:hover, #navCatTabs li:hover a {;
      color:#fff;
      }
    #navCatTabs li:hover a {
      }

I hope someone can help, thank you in advance.


Regards,
kcorbishley

[kobra]

You left an image out...

  #navCatTabs {
      float:left;
      width:100%;
      background:url("") repeat-x bottom;
      font-size:93%;
      line-height:normal;
      }

[kcorbishley]

Thanks, good to notice, to be honest I was meant to remove that entire line. Unfortunately putting an image there makes no difference.

Thanks for looking though, I appreciate the help.

[kobra]

Unfortunately putting an image there makes no difference.

If you do not see it then you have not entered correctly

[kcorbishley]

Sorry, I meant to say no difference in with changing the background of the category tab for the current active category. The tab for the current category the user is in still shows the normal background image and not the left/right_current.gif image, it still shows right/left.gif image. I have just added the right_current.gif url into the line that you spotted (that I was meant to remove) but obviously you wouldn't be able to see that image as the '#navCatTabs a' would be over it.


Thanks again.

[gjh42]

tpl_modules_categories_tabs.php is irrelevant to the problem... what code do you have in the module file? (categories_tabs.php) That is where the current id will be applied as $links_list is built.

Seeing your site live will let us advise if your CSS selector is correct or not.