Customize Categories Tabs

[kcorbishley]

Thanks for all your help, but still no joy im afraid.
Im listing both stylesheets to my site and both tab files, just incase I've missed something during the changes, but I've double checked, but maybe fresh eyes could do the trick.


includes/modules/my_theme/categories_tabs.php

<?php
/**
 * categories_tabs.php module
 *
 * @package templateSystem
 * @copyright Copyright 2003-2006 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: categories_tabs.php 3018 2006-02-12 21:04:04Z wilt $
 */
if (!defined('IS_ADMIN_FLAG')) {
  die('Illegal Access');
}
$order_by = " order by c.sort_order, cd.categories_name ";

$categories_tab_query = "select c.categories_id, cd.categories_name from " .
TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd
                          where c.categories_id=cd.categories_id and c.parent_id= '0' and cd.language_id='" . (int)$_SESSION['languages_id'] . "' and c.categories_status='1'" .
$order_by;
$categories_tab = $db->Execute($categories_tab_query);

$links_list = array();
while (!$categories_tab->EOF) {

  // 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'];
  }

  // create link to top level category
  $links_list[] = '<a class="' . $new_style . '" href="' . zen_href_link(FILENAME_DEFAULT, 'cPath=' . (int)$categories_tab->fields['categories_id']) . '">' . $categories_tab_current . '</a> ';
  $categories_tab->MoveNext();
}

?>

includes/templates/my_theme/templates/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>

includes/templates/my_theme/css/stylesheet.css

/**
 * Main CSS Stylesheet
 *
 * @package templateSystem
 * @copyright Copyright 2003-2007 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: stylesheet.css 5952 2007-03-03 06:18:46Z drbyte $
 */

body {
	margin: 0;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 62.5%;
	color: #000;
	background-color: #000;
	}

a img {border: none; }

a:link, #navEZPagesTOC ul li a {
	color: #3300FF;
	text-decoration: none;
	}
 
a:visited {
	color: #3300FF;
	text-decoration: none;
	}

a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, {
	color: #FF0000;
	margin: 0px;
	padding: 0px;
	}

a:active {
	color: #0000FF;
	}

h1 {
	font-size: 1.5em;
	color: #9a9a9a;
	}

h2 {
	font-size: 1.4em;
	}

h3 {
	font-size: 1.3em;
	}

h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{
	font-size: 1.1em;
	}

.biggerText {
	font-size: 1.2em;
	}

h1, h2, h3, h4, h5, h6 {
	margin: 0.3em 0;
	}

.searchHeader {
	}

/*  Might uncomment either or both of these if having problems with IE peekaboo bug:
h1, h2, h3, h4, h5, h6, p {
	position: relative;
	}
*html .centerColumn {
	height: 1%;
	}
*/

CODE {
	font-family: arial, verdana, helvetica, sans-serif;
	font-size: 1em;
	}

FORM, SELECT, INPUT {
	display: inline;
	font-size: 1em;
	margin: 0.1em;
	}

TEXTAREA {
	margin: auto;
	display: block;
	width: 95%;
	}

input:focus, select:focus, textarea:focus {
	background: #E4FEF5;
	}

FIELDSET {
	padding: 0.5em;
	margin: 0.5em 0em;
	border: 1px solid #cccccc;
	}

LEGEND {
	font-weight: bold;
	padding: 0.3em;
	color: black;
	}

LABEL, h4.optionName {
	line-height: 1.5em;
	padding: 0.2em;
	}

LABEL.checkboxLabel, LABEL.radioButtonLabel {
	margin: 0.5em 0.3em;
	}

#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
	float: left;
	}

LABEL.inputLabel {
	width: 9em;
	float: left;
	}

LABEL.inputLabelPayment {
	width: 14em;
	float: left;
	padding-left: 2.5em;
	}

LABEL.selectLabel, LABEL.switchedLabel, LABEL.uploadsLabel {
	width: 11em;
	float: left;
	}

#checkoutPayment LABEL.radioButtonLabel {
	font-weight: bold;
	}

P, ADDRESS {
	padding: 0.5em;
	}

ADDRESS {
	font-style: normal;
	}

.clearBoth {
	clear: both;
	}

HR {
	height: 1px;
	margin-top: 0.5em;
	border: none;
	border-bottom: 1px solid #9a9a9a;
	}

/*warnings, errors, messages*/
.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {
	line-height: 1.8em;
	padding: 0.2em;
	border: 1px solid #9a9a9a;
	}

.messageStackWarning, .messageStackError {
	background-color: #ff0000;
	color: #ffffff;
	}

.messageStackSuccess {
	background-color: #99FF99;
	color: #000000;
	}

.messageStackCaution {
	background-color: #FFFF66;
	color: #000000;
	}

/*wrappers - page or section containers*/
#mainWrapper {
	text-align: left;
	width: 100%;
	vertical-align: top;
	}

#headerWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
	margin: 0em;
	padding: 0em;
	}

#headerWrapper {
	text-align: none;
	}

#contentMainWrapper {
	margin: 0em;
	padding: 0em;
	background-color: #FFF;
	}

#logoWrapper{
	background-repeat: repeat-x;
	height:75px;
	display: block;
	}

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
	margin: 0;
	} 
#navColumnOneWrapper, #navColumnTwoWrapper {
	margin-left: 0.5em;
	margin-right: 0.5em;
	}
	
#tagline {
	color:#000000;
	font-size: 14px;
	text-align : center;
	vertical-align: middle;
	display: block;
	}

#sendSpendWrapper {
	border: 1px solid #cacaca;
	float: right;
	margin: 0em 0em 1em 1em;
	}

.floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper {
	margin: 0;
	width: 47%;
	}

.wrapperAttribsOptions {
	margin: 0;
	}

/*navigation*/

.navSplitPagesResult {}
.navSplitPagesLinks {}

.navNextPrevCounter {
	margin: 0em;
	font-size: 0.9em;
	}
.navNextPrevList {
	display: inline;
	white-space: nowrap;
	margin: 0;
	padding: 0.5em 0em;
	list-style-type: none;
	}

#navMainWrapper, #navSuppWrapper, {
	margin: 0;
	width: 100%;
	display: block;
	background-image: url(../images/search_bg.png);
	background-repeat: repeat-x;
	padding: 0;
	font-weight: bold;
	color: #ffffff;
	text-align: left;
	}

#navCatTabsWrapper {
	text-align: left;
	display: inline;
	padding: 0;
	margin: 0;
	height: 34px;
	width: 100%;
	}

#navSupp ul, {
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: left;
	}
	
#navMain ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: left;
	line-height: 0;
	}

#navMain ul li, #navSupp ul li {
	display: inline;
	}

#navMain ul li a, #navSupp ul li a, {
	text-decoration: none;
	padding: 0;
	margin: 0;
	color: #ffffff;
	}

#navEZPagesTOCWrapper {
	font-weight: bold;
	background: url("../images/search_bg.png") repeat-x top;
	text-align: center;
	float: right;
	border: 1px solid #9a9a9a;
	}

#navEZPagesTOC ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	line-height: 0;
	}

#navEZPagesTOC ul li {
	white-space: nowrap;
	}

#navEZPagesTOC ul li a {
	padding: 0;
	margin: 0;
	}

#navCategoryIcon, .buttonRow, #indexProductListCatDescription {
	margin: 0.5em;
	}

#navMainSearch {
	width: 410px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	}

#navBreadCrumb {
	padding: 0.5em 0.5em;
	font-size: 0.95em;
	font-weight: bold;
	margin: 0em;
	}

#navEZPagesTop {
	background-color: #abbbd3;
	background-image: url(../images/tile_back.gif);
	font-size: 0.95em;
	font-weight: bold;
	margin: 0em;
	padding: 0;
	}

#navColumnTwo {
	background-color: #000;
	background-image: url(../images/col_two_bg.png);
	background-repeat: repeat-y;
	background-position: left;
	}
	
#navColumnOne {
	background-color: #000;
	background-image: url(../images/col_one_bg.png);
	background-repeat: repeat-y;
	background-position: right;
	}

/*The main content classes*/
#contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {
	vertical-align: top;
	}

/*.content,*/ #productDescription, .shippingEstimatorWrapper {
	/*font-size: 1.2em;*/
	padding: 0.5em;
	}

.alert {
	color: #FF0000;
	margin-left: 0.5em;
	}
.advisory {}
.important {
	font-weight: bold;
	}
.notice {}
.rating{}
.gvBal {
	float: right;
	}
.centerColumn, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix {
	padding: 0;
	}

.smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP {
	font-size: 0.9em;
	}

/*Shopping Cart Display*/
#cartAdd {
	float: right;
	text-align: center;
	margin: 1em;
	border: 1px solid #000000;
	padding: 1em;
	}

.tableHeading TH {
	border-bottom: 1px solid #9a9a9a;
	}

.tableHeading, #cartSubTotal {
	background-color: #e9e9e9;
	 }

#cartSubTotal {
	border-top: 1px solid #cccccc;
	font-weight: bold;
	text-align: right;
	line-height: 2.2em;
	padding-right: 2.5em;
	}

.tableRow, .tableHeading, #cartSubTotal {
	height: 2.2em;
	}

.cartProductDisplay, .cartUnitDisplay, .cartTotalDisplay, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, #cartInstructionsDisplay, .cartTotalsDisplay {
	padding: 0.5em 0em;
	}

.cartUnitDisplay, .cartTotalDisplay {
	text-align: right;
	padding-right: 0.2em;
	}

#scUpdateQuantity {
	width: 2em;
	}

.cartQuantity {
	width: 4.7em;
	}

.cartNewItem {
	color: #33CC33;
	position: relative;  /*do not remove-fixes stupid IEbug*/
	}

.cartOldItem {
	color: #660099;
	position: relative;  /*do not remove-fixes stupid IEbug*/
	}

.cartBoxTotal {
	text-align: right;
	font-weight: bold;
	}

.cartRemoveItemDisplay {
	width: 3.5em;
	}

.cartAttribsList {
	margin-left: 1em;
	}

#mediaManager {
	width: 50%; 
	margin: 0.2em;
	padding: 0.5em;
	background-color: #E4FEf5;
	border: 1px solid #003D00;
	}
.mediaTitle {
	float: left;
	}
.mediaTypeLink {
	float: right;
	}

.normalprice, .productSpecialPriceSale {
	text-decoration: line-through;
	}

.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount {
	color: #ff0000;
	}

.orderHistList {
	margin: 1em;
	padding: 0.2em 0em;
	list-style-type: none;
	} 

#cartBoxListWrapper ul, #ezPageBoxList ul {
	list-style-type: none;
	}

#cartBoxListWrapper li, #ezPageBoxList li, .cartBoxTotal {
	margin: 0;
	padding: 0.2em 0em;
	} 

#cartBoxEmpty, #cartBoxVoucherBalance {
	font-weight: bold;
	}

.totalBox {
	width: 5.5em;
	text-align: right;
	padding: 0.2em;
	}

.lineTitle, .amount {
	text-align: right;
	padding: 0.2em;
	}

.amount {
	width: 5.5em;
	}

/*Image Display*/
#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
	margin: 0em 1em 1em 0em ;
	}

.categoryIcon {}

#cartImage {
	margin: 0.5em 1em;
	}

/*Attributes*/
.attribImg {
	width: 20%;
	margin: 0.3em 0em;
}

.attributesComments {}

/*list box contents*/
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {
	margin: 1em 0em;
	}

.centerBoxWrapper {
	border: 1px solid #9a9a9a;
	height: 1%;
	margin: 0;
	}

h2.centerBoxHeading {
	font-size: 1.3em;
	color: #ffffff;
	}

/*sideboxes*/
.columnLeft {}

h3.leftBoxHeading, h3.leftBoxHeading a,
h3.rightBoxHeading, h3.rightBoxHeading a {
	font-size: 1em;
	color: #ffffff;
	}
#manufacturersHeading, #currenciesHeading, #musicgenresHeading, #recordcompaniesHeading, #searchHeading, #search-headerHeading {
	font-size: 0.9em;
	color: #ffffff;
}

.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
	margin: 0em;
	background-color: #00cc00;
	background-image: url(../images/sidebox_bg.png);
	border-bottom: 2px solid #9e6400;
	padding: 0.5em 0.2em;
	}

.leftBoxContainer, .rightBoxContainer {
	margin: 0em;
	border: 2px solid #9e6400;
	margin-top: 1.5em;
	}
	
.leftBoxContainer {
	margin-left: 5px;
	}

.rightBoxContainer {
	margin-left: 6px;
	}

.sideBoxContent {
	background-color: #ffffff;
	padding: 0.4em;
	}

h3.leftBoxHeading a:hover, h3.rightBoxHeading a:hover {
	color: #FFFF33;
	text-decoration: none;
	} 

.rightBoxHeading a:visited, .leftBoxHeading a:visited, .centerBoxHeading a:visited {
	color: #FFFFFF;
	}

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
	text-align: center;
	}

#bestsellers .wrapper {
	margin: 0em 0em 0em 1.5em;
	}

#bestsellers ol {
	padding: 0;
	margin-left: 1.1em;
	}

#bestsellers li {
	padding: 0;
	margin: 0.3em 0em 0.3em 0em;
	}

#bannerboxHeading {
	background-color: #0000CC;
}

#upProductsHeading {
	text-align: left;
	}

#upDateHeading {
	text-align: right;
	}

/* categories box parent and child categories */
A.category-top, A.category-top:visited {
	color: #008000;
	text-decoration: none;
	}
A.category-links, A.category-links:visited {
	color: #004080;
	text-decoration: none;
	}
A.category-subs, A.category-products, A.category-subs:visited, A.category-products:visited {
	color: #FF0000;
	text-decoration: none;
	}
SPAN.category-subs-parent {
	font-weight: bold;
	}
SPAN.category-subs-selected {
	font-weight: bold;
	}
/* end categories box links */

/*misc*/
.back {
	float: left;
	}

.forward, #shoppingCartDefault #PPECbutton {
	float: right;
	}

.bold {
	font-weight: bold;
	}

.rowOdd {
	background-color: #E8E8E8;
	height: 1.5em;
	vertical-align: top;
	}

.rowEven {
	background-color: #F0F0F0;
	height: 1.5em;
	vertical-align: top;
	}

.hiddenField {
	display: none;
}
.visibleField {
	display: inline;
}

CAPTION {
	/*display: none;*/
	}

#myAccountGen li, #myAccountNotify li {
	margin: 0;
	} 

.accountTotalDisplay, .accountTaxDisplay {
	width: 20%;
	text-align: right;
	/*vertical-align: top*/
	}

.accountQuantityDisplay {
	width: 10%;
	vertical-align: top
	}

TR.tableHeading {
	background-color: #cacaca;
	height: 2em;
	}

.productListing-rowheading {
	background-color: #abbbd3;
	background-image: url(../images/tile_back.gif);
	height: 2em;
	color: #FFFFFF;
	}

#siteMapList {
	width: 90%;
	float: right;
	}

.ratingRow {
	margin: 1em 0em 1.5em 0em;
	}

LABEL#textAreaReviews {
	font-weight: normal;
	margin: 1em 0em;
	}

#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp, #infoShoppingCart {
	background-color: #ffffff;
	}
.information {padding: 10px 3px; line-height: 150%;}

#shoppingcartBody #shippingEstimatorContent {
	clear: both;
	}

.seDisplayedAddressLabel {
	background-color:#85C285;
	text-align: center;
	}
.seDisplayedAddressInfo {
	text-transform: uppercase;
	text-align: center;
	font-weight: bold;
	}
#seShipTo {
	padding: 0.2em;
	}

includes/templates/my_theme/css/stylesheet.categorytabs.css

  #navCatTabs {
      float:left;
      width:100%;
      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 a .category-subs-selected {
      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 {
      }

Thanks again for your help.

[kcorbishley]

Just a quick message to say that I'm getting use to not having the current category tab showing a different background to the other tabs, but if anyone can solve this, whenever they get chance, I think it could be quite a good for many people.

Thanks again to everyone who has tried to help .

[gjh42]

Is your extra stylesheet really named stylesheet.categorytabs.css? That form of name may not be recognized; try stylesheet_categorytabs.css instead, or try putting the new rules in your main stylesheet.

If we can see your site live, we can tell you exactly what will work; without that, we have to play guessing games.

[dragoon09]

I too am in the process of altering my cat tabs. I have figured out to change the name and destination of the links, my only problem is that since I now hava a second line, it is colored like the top one.
I have tried different things in the stylesheet and other files, but nothing seems to work.

Any ideas?

Here is a link to my site where you can see I mean
www.moodboosters.net

thanks.

ps - I am using Crista Violet Temp with ZC 139h