Forums / Templates, Stylesheets, Page Layout / Customize Categories Tabs

Customize Categories Tabs

Started by kcorbishley on 24 Mar 2011, 10:29 PM · Views: 2,994

Results 1 to 12 of 12
24 Mar 2011, 10:29 PM
#1
kcorbishley avatar

kcorbishley

New Zenner

Join Date:
Mar 2011
Posts:
28
Plugin Contributions:
0

Customize Categories Tabs

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

24 Mar 2011, 10:34 PM
#2
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Location:
Arizona
Posts:
31,500
Plugin Contributions:
4

Re: Customize Categories Tabs

You left an image out...

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

Zen-Venom Get Bitten

24 Mar 2011, 10:43 PM
#3
kcorbishley avatar

kcorbishley

New Zenner

Join Date:
Mar 2011
Posts:
28
Plugin Contributions:
0

Re: Customize Categories Tabs

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.

24 Mar 2011, 10:46 PM
#4
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Location:
Arizona
Posts:
31,500
Plugin Contributions:
4

Re: Customize Categories Tabs

Unfortunately putting an image there makes no difference.
If you do not see it then you have not entered correctly

Zen-Venom Get Bitten

24 Mar 2011, 10:54 PM
#5
kcorbishley avatar

kcorbishley

New Zenner

Join Date:
Mar 2011
Posts:
28
Plugin Contributions:
0

Re: Customize Categories Tabs

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.

25 Mar 2011, 1:37 AM
#6
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Customize Categories Tabs

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.

25 Mar 2011, 2:15 AM
#7
kcorbishley avatar

kcorbishley

New Zenner

Join Date:
Mar 2011
Posts:
28
Plugin Contributions:
0

Re: Customize Categories Tabs

Thanks for your response, below is the content of categories_tabs.php (I believe the location is correct '/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();
}

?>

Regards

25 Mar 2011, 2:34 AM
#8
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Customize Categories Tabs

There is no #current id in use at all, so it will do nothing in your stylesheet. This```php
// 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>';


.category-subs-selected {what: ever;}
Not only won't #navCatTabs #current a { work, the elements are in the wrong order. You need 
#navCatTabs a .category-subs-selected {if you want to be that specific. You do need to include #navCatTabs in the selector if you don't want the styling to apply to the categories sdebox.
25 Mar 2011, 3:14 AM
#9
kcorbishley avatar

kcorbishley

New Zenner

Join Date:
Mar 2011
Posts:
28
Plugin Contributions:
0

Re: Customize Categories Tabs

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.

27 Mar 2011, 3:38 AM
#10
kcorbishley avatar

kcorbishley

New Zenner

Join Date:
Mar 2011
Posts:
28
Plugin Contributions:
0

Re: Customize Categories Tabs

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

28 Mar 2011, 2:14 PM
#11
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Customize Categories Tabs

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.

25 May 2011, 3:24 PM
#12
dragoon09 avatar

dragoon09

New Zenner

Join Date:
Sep 2010
Location:
Cahokia, IL
Posts:
19
Plugin Contributions:
0

Re: Customize Categories Tabs

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
https://www.moodboosters.net

thanks.

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

Matt Doty
https://www.MoodBoosters.net
"It's better to be a Smart A$$ than a Dumb A$$