Background Colour/Image Main Page

Hi Zenners,

I have been trying to change the colour on my background on my website only on the far left and right sides, i have followed a few tutorials which advise to change the background colour in the stylesheet under body but that changes the whole page. can anyone please assist?

Link: https://www.truwater.com.au

Thanks

Here's some bits from the stylesheet used on the Fan Odyssey site in my sig which uses a background image.

/*wrappers - page or section containers*/
#mainWrapper {
	background-color: #000000;
  background-image: url('../images/space011.jpg');
	text-align: left;
	width: 100%;
	vertical-align: top;
	}

#logoWrapper{
  background-image: url('../images/space011.jpg');
	background-repeat: repeat-x;
	background-color: #000000;
	height:110px;
	width: 100%;
	}

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
	margin: 0em;
	background-color: #000000;
	background-image: url('../images/space011.jpg');
	padding: 0.5em 0.2em;
	font-weight: bold;
	color: #ffffff;
	height: 1%;
	width: 100%;
	}

#navCatTabsWrapper {
	background-color: #000000;
	background-image: url('../images/space011.jpg');
	color: #ffffff;
}

.centerBoxWrapper {
  background-color: #000000;
  background-image: url('../images/space011.jpg');
	border: 1px solid #9a9a9a;
	height: 1%;
	margin: 1.1em 0;
	}


.leftBoxContainer, .rightBoxContainer {
  background-color: #000000;
  background-image: url('../images/space011.jpg');
	margin: 0em;
	border: 1px solid #c0c0c0;
	border-bottom: 5px solid #COCOCO;
	margin-top: 0.5em;
	}

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

HTH!

afo:

Here's some bits from the stylesheet used on the Fan Odyssey site in my sig which uses a background image.

/wrappers - page or section containers/
#mainWrapper {
background-color: #000000;
background-image: url('../images/space011.jpg');
text-align: left;
width: 100%;
vertical-align: top;
}

#logoWrapper{
background-image: url('../images/space011.jpg');
background-repeat: repeat-x;
background-color: #000000;
height:110px;
width: 100%;
}

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
background-color: #000000;
background-image: url('../images/space011.jpg');
padding: 0.5em 0.2em;
font-weight: bold;
color: #ffffff;
height: 1%;
width: 100%;
}

#navCatTabsWrapper {
background-color: #000000;
background-image: url('../images/space011.jpg');
color: #ffffff;
}

.centerBoxWrapper {
background-color: #000000;
background-image: url('../images/space011.jpg');
border: 1px solid #9a9a9a;
height: 1%;
margin: 1.1em 0;
}

.leftBoxContainer, .rightBoxContainer {
background-color: #000000;
background-image: url('../images/space011.jpg');
margin: 0em;
border: 1px solid #c0c0c0;
border-bottom: 5px solid #COCOCO;
margin-top: 0.5em;
}

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

> 
> HTH!

Thanks for the reply now i noticed that on the odyssey site you have an image covering the entire background..... Im just looking at put a color or image on the sides only......

Experiment with the locations I used in the stylesheet for the FO site.

If you don't have the Firefox browser, get it along with the web developer add on which allows you to tinker with the stylesheet and see the changes on the fly. You'll have to save the changes locally and FTP them to your site to make them permanent.

afo:

Experiment with the locations I used in the stylesheet for the FO site.

If you don't have the Firefox browser, get it along with the web developer add on which allows you to tinker with the stylesheet and see the changes on the fly. You'll have to save the changes locally and FTP them to your site to make them permanent.

Ok i experimented with the locations you mentioned for your FO site and they all seem to just apply a background color to my entire site. I have been using firefox add on which is excellent...

Are you trying them one at a time to see what they do? Different sections of the stylesheet control different sections of the page.

Yeah i tried them one at a time....

One way some people place images on either side of the mainWrapper is to create a large image with the two images desired on the right and left, and a transparent area in between, the width of the mainWrapper, and place that as the body background image. You could do the same with just colors on the right and left.

stevesh:

One way some people place images on either side of the mainWrapper is to create a large image with the two images desired on the right and left, and a transparent area in between, the width of the mainWrapper, and place that as the body background image. You could do the same with just colors on the right and left.

That seems like a good idea have you got any idea or some kind of tutorial/example of how i could acheive this?

Come to think of it, it wouldn't work in your case, anyway, since the side images would be of a fixed size, and wouldn't fill the screen in some resolutions.

Want my honest opinion?

The current look of your site wouldn't be all that difficult to create by modifying the 'classic' template, or one of the others at (sorry, site offline)

Dump that TM headache and the 10 (!) stylesheets and start over on a test site. You'll save time, I think, in the long run.

stevesh:

Come to think of it, it wouldn't work in your case, anyway, since the side images would be of a fixed size, and wouldn't fill the screen in some resolutions.

Want my honest opinion?

The current look of your site wouldn't be all that difficult to create by modifying the 'classic' template, or one of the others at (sorry, site offline)

Dump that TM headache and the 10 (!) stylesheets and start over on a test site. You'll save time, I think, in the long run.

No problem... Well initially we got some web developers to build the website, but they didnt do what we wanted and all they did was get a template which i found out was a template monster and wacked on a few graphics and said were is my money. In the end i told them to get stuffed and endevoured to do it myself.

After doing some research on zen cart forums template monster was a big no no and found that after posting everyone advised that i shouldnt use a template monster template.

So basically for the last 3 months i have been working with this template and at the same time trying to learn css, php and html with no knowledge at all...... Basically i have come to far to just stop with this one and start a whole new one that was my initial thoughts and i have actually set up a new zen cart installation under truwater.com.au/test with a template from (sorry, site offline) and i plan to keep the current one going (which im making quite a few sales) and developing the template on the test site.

Thanks for all your help

I didn't look at your site and didn't realize you were working with a TM template (as opposed to starting from scratch). stevesh's suggestion is a good one. Take a peek at the free templates and see if there's one that is similar to what you want to do and then try playing around with customizing it. Since you've already been tinkering with Zen Cart and templates, it should be a bit easier this time around.