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