How to change background colour BEHIND left/right sideboxes?

**maza** · 10 Apr 2007, 04:58 AM

Hello! I'm a new Zenner and this is my first post. I've been searching ways in the stylesheet.css for the above purpose. I failed to find any!

Please refer to the pic, and help me! How to change these colours?

Thanks in advance.

**afo** · 10 Apr 2007, 05:06 AM

Look for .sideBoxContent in your stylesheet and add the background image there (example in red below). Don't forget to change the background color to something that matches the main color in the image. It'll make the transition from color to image less noticeable.

Code:

.sideBoxContent {
  background-color: #000000;
  background-image: url('../images/space011.jpg');
	padding: 0.4em;
	}

**maza** · 10 Apr 2007, 05:13 AM

Thanks for the suggestion.

I don't need to add any background image, just to CHANGE the colour.

Please re-comment

**clydejones** · 10 Apr 2007, 05:32 AM

change the background color in the declaration shown by AFO

background-color: #000000;

change this to the color you need.

**maza** · 10 Apr 2007, 06:02 AM

Done that, but still it shows the same result.

**afo** · 10 Apr 2007, 02:12 PM

It would help if we could see the site instead of an image of it. Can you post the url?

**maza** · 10 Apr 2007, 03:32 PM

Originally Posted by afo

It would help if we could see the site instead of an image of it. Can you post the url?

Yes of course, it's www.radiomeal.com/index.php

Please take a look. I can't even change the Zen Cart , The Art of E-Commerce thingy. I did the change as instructed by the tutorial but still can get it done. Weird.

**afo** · 10 Apr 2007, 03:39 PM

Step 1: get rid of stylesheet_old.css. Either rename it to something other than .css or delete it. The last stylesheet loaded will overrule any previous stylesheet formatting.

Step 2: change these colors:

Code:

#navColumnOne {
	background-color: #FFCC99;
	}

#navColumnTwo {
	background-color: #00BFBF;
	}

**maza** · 10 Apr 2007, 04:09 PM

Hey I got it working!

It must have been the stylesheet_old.css conflicting with my actual stylesheet.css. I should read more about .css.

While we are on it, can you advise me how to change:
1. The background colour of the centre area (above the Hello Friend!....)
2. The location of both sideboxes so it fit snugly while it touches my logo (notice the gap from the logo and the Category sidebox)

Thanks, you are really helpful.

**afo** · 10 Apr 2007, 04:54 PM

The area above the "Hello Friend" is the navigation breadcrumb. You can change the color here

Code:

#navBreadCrumb {
	background-color: #cc9900;
	}

To move the sideboxes up, adjust the line I've highlighted in red:

Code:

.leftBoxContainer, .rightBoxContainer {
	margin: 0em
	background-color: #ffffff;
	border: 5px solid #black;
	border-bottom: 5px solid #488AC7;
	margin-top: 1.5em;
	}

Download a copy of the Firefox browser and get the webdeveloper addon. It'll let you change the stylesheet on the fly and see the results without really changing anything. Once you get the look you want, you can save the changes locally and then FTP the modified stylesheet to your website.