Sideboxes with different colours?

Hi,

how do you change the background colour/image, on each sidebox of your page?

Example: Colour A is shoppingcart sidebox and colour B is whosonline sidebox etc..

How do you get the result with css?

  -Jarsa-

If ou use firefox and the developers toolkit to look at the css for your pages, you see that each sidebox has it's own id (categoriesHeading, sponsorsHeading, etc.).

In order to make each box different simply add the defines for each heading to the end of your css

Hope that helps !

Thank You TinaS!!! I am on the road again:wink2:

-Jarsa-

Okay I don't mean to be a dummy about this, but I can't figure out how to make this work... What am I doing wrong here???

http://divawebdzine.com/clients/TreeLifePublishing/

I used the blank sidebox contribution. I want this new sidebox to have no background. I am getting nowhere fast..

Here's the relevant portion of my CSS: what did I do wrong:

/*sideboxes*/
.columnLeft {}

h3.leftBoxHeading, h3.leftBoxHeading a, h3.leftBoxHeading label, h3.rightBoxHeading, h3.rightBoxHeading a, h3.rightBoxHeading label {
	font-size: 1.1em;
	color: #ffffff;
	}

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

.leftBoxHeading, .rightBoxHeading {
	margin: 0em;
	background-image:url(../images/box000.gif);
	background-repeat: no-repeat;
	padding: 20px;
	}

.centerBoxHeading {
	font-size: 12px;
	background-image:url(../images/bar.gif);
	background-repeat: repeat-x;
	padding-top: 7px;
	padding-bottom: 13px;
	}

.leftBoxContainer, .rightBoxContainer {
	background-image:url(../images/box001.gif);
	background-repeat: repeat-y;
	margin-top: 0px;
	}

.sideBoxContent {
	background-image:url(../images/box002.gif);
	background-repeat: no-repeat;
	font-size: 11px;
	line-height: 125%;
	background-position:bottom;
	padding-top: 5px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 25px;
	}

.contentSideBox {
	font-size: 11px;
	line-height: 125%;
	padding-top: 5px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 25px;
	}

#contentboxsidebox{
	margin-top: 0px;
	}

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #navCatTabsWrapper, #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 {
	font-size: 11px;
	text-align: center;
	}

h3.leftBoxContainer, #whatsnewHeading, #searchHeading, #recordcompaniesHeading, #searchContent, #featuredContent, #specialsHeading, #manufacturersHeading, #reviewsHeading, #featuredHeading, #musicgenresHeading, #currenciesHeading, #shoppingcartHeading {
	font-size: 11px;
	text-align: center;
	}

.productListing-rowheading {
	font-size: 12px;
	background-image: url(../images/bar.gif);
	background-repeat: repeat-x;
	height: 30px;
	}

#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;
	}

Your div with ID contentboxsidebox also has the class leftBoxContainer, which specifies a background image:

.leftBoxContainer, .rightBoxContainer {
background-image:url(../images/box001.gif);

okay so I added this to the stylesheet, but still ended up with the same result.. I am stumped here..

.leftBoxContainer, #contentboxsidebox{};

Empty declaration don't do anything.....
Try this

#contentboxsidebox.leftBoxContainer {background-image: none;}

barco57:

Empty declaration don't do anything.....
Try this

#contentboxsidebox.leftBoxContainer {background-image: none;}

 
:lamo: Thanks a heap.. I'm understand how classes in stylesheets work.. ID's confuse me..:wacko: I get it now.. :D

If I dont want the

/background-image: url(../images/tile_back.gif);/

can it just be commented out rather than changed to none?

It just seems easier to revert.

EyefulTower:

If I dont want the

/background-image: url(../images/tile_back.gif);/

can it just be commented out rather than changed to none?

It just seems easier to revert.

That's if you don't want it on ALL sideboxes, but she wanted it off for the #contentboxsidebox, but wanted it on for others. :cool:

#contentboxsidebox.leftBoxContainer {background-image: none;}

jettrue:

That's if you don't want it on ALL sideboxes, but she wanted it off for the #contentboxsidebox, but wanted it on for others. :cool:

#contentboxsidebox.leftBoxContainer {background-image: none;}

Aaah, I see that now, thanks.

Hi

Inow this is old but could you help me I need the side boxes with differebt colours but for it to be auto changed so the admin swithes can still be used?

I don't understand what you are wanting that is not already standard behavior.
You can specify in the stylesheet for each sidebox to have its own background, and this will not interfere with turning the boxes on & off in admin > Tools > Layout Boxes Controller.

gjh42:

I don't understand what you are wanting that is not already standard behavior.
You can specify in the stylesheet for each sidebox to have its own background, and this will not interfere with turning the boxes on & off in admin > Tools > Layout Boxes Controller.

I need the boxes on left and right to look like this:

1st box to be lets say red
2nd box to be lets say blue
3rd box to be red
4th box to be blue
ect...

above needs to be auto as which boxes they are can change

This will require some PHP code modification, but is fairly simple to do. Copy /includes/modules/column_left.php to /includes/modules/your_template/column_left.php. Find this section (which is most of the file):```php
$box_cnt=0;
while (!$column_left_display->EOF and $box_cnt < 100) {
$box_cnt++;
if ( file_exists(DIR_WS_MODULES . 'sideboxes/' . $column_left_display->fields['layout_box_name']) or file_exists(DIR_WS_MODULES . 'sideboxes/' . $template_dir . '/' . $column_left_display->fields['layout_box_name']) ) {
?>

<?php //$column_box_spacer = 'column_box_spacer_left'; $column_width = BOX_WIDTH_LEFT; if ( file_exists(DIR_WS_MODULES . 'sideboxes/' . $template_dir . '/' . $column_left_display->fields['layout_box_name']) ) { $box_id = zen_get_box_id($column_left_display->fields['layout_box_name']); require(DIR_WS_MODULES . 'sideboxes/' . $template_dir . '/' . $column_left_display->fields['layout_box_name']); } else { $box_id = zen_get_box_id($column_left_display->fields['layout_box_name']); require(DIR_WS_MODULES . 'sideboxes/' . $column_left_display->fields['layout_box_name']); } } // file_exists $column_left_display->MoveNext(); } // while column_left ```and add . ' leftBox' . $box_cnt in two places at the end of $box_id = zen_get_box_id($column_left_display->fields['layout_box_name']); statements to get```php $box_cnt=0; while (!$column_left_display->EOF and $box_cnt < 100) { $box_cnt++; if ( file_exists(DIR_WS_MODULES . 'sideboxes/' . $column_left_display->fields['layout_box_name']) or file_exists(DIR_WS_MODULES . 'sideboxes/' . $template_dir . '/' . $column_left_display->fields['layout_box_name']) ) { ?> <?php //$column_box_spacer = 'column_box_spacer_left'; $column_width = BOX_WIDTH_LEFT; if ( file_exists(DIR_WS_MODULES . 'sideboxes/' . $template_dir . '/' . $column_left_display->fields['layout_box_name']) ) { $box_id = zen_get_box_id($column_left_display->fields['layout_box_name']) . ' leftBox' . $box_cnt; require(DIR_WS_MODULES . 'sideboxes/' . $template_dir . '/' . $column_left_display->fields['layout_box_name']); } else { $box_id = zen_get_box_id($column_left_display->fields['layout_box_name']) . ' leftBox' . $box_cnt; require(DIR_WS_MODULES . 'sideboxes/' . $column_left_display->fields['layout_box_name']); } } // file_exists $column_left_display->MoveNext(); } // while column_left ``` Repeat for column_right.php. Now you should have two ids for each sidebox, one with its name and one with leftBox1, leftBox2, etc. I have just verified that this works in my local test site. In your stylesheet, style as desired: #leftBox1 {background-color: #aabbcc;} #leftBox2 {background-color: #aaffcc;} #leftBox3 {background-color: #ddbbcc;} ... #rightBox1 {background-color: #aabbee;} #rightBox2 {background-color: #aa66cc;} #rightBox3 {background-color: #99bbcc;} ...

Hi
the code has work thanks but the css
has not worked this is my css code:

/**
 * 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: #000000;
    background-color: #FFFFFF;
    }

a img {border: none; }

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

a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
    color: #FF0000;
    }

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;
    }

/*  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 {
    font-size: 13px;
    color: #5f6601;
    text-align: left;
    font-weight: bold;
    line-height: 1.5em;
    }

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 {
    background-color: #ffffff;
    text-align: left;
    width: 100%;
    vertical-align: top;
    }

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

#logoWrapper{
//    background-image: url(../images/header_bg.jpg);
    background-repeat: repeat-x;
    background-color: #ffffff;
    height:75px;
    }

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
    margin: auto;
    } 
#navColumnOneWrapper, #navColumnTwoWrapper {
    margin-left: 0.5em;
    margin-right: 0.5em;
    }
    
#tagline {
    color:#000000;
    font-size: 2em;
    text-align : center;
    vertical-align: middle;
    }

#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.3em 0em;
    }

/*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, #navCatTabsWrapper {
    margin: 0em;
    background-color: #FC8200;
    //background-image: url(../images/tile_back.gif);
    padding: 0.5em 0.2em;
    font-weight: bold;
    color: #ffffff;
    height: 1%;
    }

#navCatTabsWrapper {
    background-color: #ffffff;
    color: #9a9a9a;
    background-image:none;
}

#navMain ul, #navSupp ul, #navCatTabs ul {
    margin: 0;
    padding: 0.5em 0em;
    list-style-type: none;
    text-align: center;
    line-height: 1.5em;
    }

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

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
    text-decoration: none;
    padding: 0em 0.5em;
    margin: 0;
    color: #ffffff;
    white-space: nowrap;
    }

#navCatTabs ul li a {
    color: #9a9a9a;
    }

#navEZPagesTOCWrapper {
    font-weight: bold;
    float: right;
    height: 1%;
    border: 1px solid #9a9a9a;
    }

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

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

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

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

#navMainSearch {
    float: right;
    }

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

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

#navColumnOne, #navColumnTwo {
    background-color: transparent;
    }

/*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.8em;
    }

.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: 1.1em 0;
    }

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

/*sideboxes*/
.columnLeft {}

h3.leftBoxHeading, h3.leftBoxHeading a,
h3.rightBoxHeading, h3.rightBoxHeading a {
    font-size: 13px;
    color: #5f6601;
    text-align: left;
    font-weight: bold;
    }
h3.leftBoxHeading,
h3.rightBoxHeading {
    padding-left: 30px;
    }
#manufacturersHeading, #currenciesHeading, #musicgenresHeading, #recordcompaniesHeading, #searchHeading, #search-headerHeading {
    font-size: 13px;
    color: #5f6601;
    text-align: left;
    font-weight: bold;
}

.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
    margin: 0em;
    background-color: #C5D304;  
//    padding: 0.5em 0.2em;
border-top: 1px dotted white;
border-bottom: 1px dotted white;
padding: 2px 0px 2px 2px;
    }

.leftBoxContainer, .rightBoxContainer {
    margin: 0em;
    border: 1px solid #9a9a9a;
    border-bottom: 5px solid #336633;
    margin-top: 1.5em;
    }

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

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

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

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #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: #C5D304;
}

#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;
    }
.xsnazzy h1, .zsnazzy h1 {
margin:0; 
font-size:1.2em; 
padding:0 10px 5px 10px; 
}
.xsnazzy p, .zsnazzy p {
margin:0; 
padding:5px 10px; 
font-size:10px;
}
.xhsnazzy {
background: transparent; 
margin:0 3px;
    margin-top: 0.8em;
}
.xsnazzy {
background: transparent; 
margin:0 3px;
    margin-top: 0.4em;
}
.xtop, .xbottom {
display:block; 
background: transparent; 
font-size:1px;
}
.xb1, .xb2, .xb3, .xb4 {
display:block; 
overflow:hidden;
}
.xb1, .xb2, .xb3 {
height:1px;
}
.xb2, .xb3, .xb4 {
background: #E2E9A3; 
}
.xb1 {
margin:0 5px; 
}
.xb2 {
margin:0 3px;
border-width:0 2px;
}
.xb3 {
margin:0 2px;
}
.xb4 {
height:2px; 
margin:0 1px;
}

.xhtop, .xhbottom {
display:block; 
background: transparent; 
font-size:1px;
}
.xhb1, .xhb2, .xhb3, .xhb4 {
display:block; 
overflow:hidden;
}
.xhb1, .xhb2, .xhb3 {
height:1px;
}
.xhb2, .xhb3, .xhb4 {
background: #C5D304; 
}
.xhb1 {
margin:0 5px; 
}
.xhb2 {
margin:0 3px;
border-width:0 2px;
}
.xhb3 {
margin:0 2px;
}
.xhb4 {
height:2px; 
margin:0 1px;
}

.xboxcontent {
height:auto;
}
* html .xboxcontent {
height:1px;
}

.color_a {
background:#c9ba65;
color:#fff;
}
.color_b {
background:#d4d8bd; 
color:#000;
}
.color_c {
background:#758279; 
color:#fff;
}
.color_d {
background:#b2ab9b; 
color:#000;
}
.woh1
{
border-top: 2px dotted white;
border-bottom: 2px dotted white;
 } 
 .woh2
{
padding: 2px 0px 2px 2px;
 }
 .woh3
{
border-top: 2px dotted white;
border-bottom: 2px dotted white;
//width: 99%;
 }
#seShipTo {
    padding: 0.2em;
    }
    
#leftBox1 {background-color: #aabbcc;}
#leftBox2 {background-color: #aaffcc;}
#leftBox3 {background-color: #ddbbcc;}

#rightBox1 {background-color: #aabbee;}
#rightBox2 {background-color: #aa66cc;}
#rightBox3 {background-color: #99bbcc;}
```and this is my code in tpl_box_default_left.php / right

?php
/**

• Common Template - tpl_box_default_left.php
• @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_box_default_left.php 2975 2006-02-05 19:33:51Z birdbrain $
  */

// choose box images based on box position
if ($title_link) {
$title = '<a href="' . zen_href_link($title_link) . '">' . $title . BOX_HEADING_LINKS . '</a>';
}
//
?>

<!--// bof: <?php echo $box_id; ?> //--> <div class="xhsnazzy" id="<?php echo str_replace('_', '-', $box_id ); ?>" style="width: <?php echo $column_width; ?>"> <b class="xhtop"><b class="xhb1"></b><b class="xhb2"></b><b class="xhb3"></b><b class="xhb4"></b></b> <h3 class="leftBoxHeading" id="<?php echo str_replace('_', '-', $box_id) . 'Heading'; ?>"><?php echo $title; ?></h3> <b class="xhbottom"><b class="xhb4"></b><b class="xhb3"></b><b class="xhb2"></b><b class="xhb1"></b></b> </div> <div class="xsnazzy" id="<?php echo str_replace('_', '-', $box_id ); ?>" style="width: <?php echo $column_width; ?>"> <b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b> <div class="xboxcontent"> <?php echo $content; ?> <b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b> </div> </div> <!--// eof: <?php echo $box_id; ?> //--> ```

my site is http://www.westonehosting.com/zen-cart/

Try adding !important to #leftBox1 {background-color: #aabbcc;}

#leftBox1 {background-color: #aabbcc !important;}

If this works, something else is overriding the #leftBox1 declaration.

You have```
.sideBoxContent {
background-color: #E2E9A3;
padding: 0.4em;
}

The xsnazzy code is working on the contents and likely covering the box background. Try styling #leftBox1Heading {} and #leftBox1Content {}.

no that did not work but when I use ffox d/tool and info and show id and class details it shows

#bannerboxall leftBox1

so can we remove the box id .. box name as that would leve just box id .. leftbox1

which is all css is looking for and all we need for it to work?

but whot else needs the box name id?

The box number id is working correctly; the box name id will not interfere with anything if no styling is applied to it.

OK, I see what you are saying. Maybe ids don't work the same way as classes when multiplied on one element? The box name id can be eliminated easily. Another possibility is to add a # before leftBox in the code. I don't know yet whether that would work correctly, but it's worth trying.

. ' #leftBox' . $box_cnt