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

[barco57]

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

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

[DivaVocals]

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

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

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

[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.

[jettrue]

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.

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