Sideboxes with different colours?

[jarsa]

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-

[TinaS]

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 !

[jarsa]

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

-Jarsa-

[DivaVocals]

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

[gjh42]

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

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

[DivaVocals]

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

.leftBoxContainer, #contentboxsidebox{};