How do I change the background color in the left sidebox?

[OrcaSoul]

I've been trying to find the place in stylesheet.css where I can make both the left sidebox & main content transparent...I want to be able to see a background image I placed in body {}.

I've tried every sidebox, left sidebox, column related id & class I can fine in the css, but I still see that off orange background.

[clydejones]

I've been trying to find the place in stylesheet.css where I can make both the left sidebox & main content transparent...I want to be able to see a background image I placed in body {}.

I've tried every sidebox, left sidebox, column related id & class I can fine in the css, but I still see that off orange background.

open your stylesheet.css

find the following declarations add a background:transparent; as indicated by the highlight.

#navColumnOne, #navColumnTwo {
vertical-align: top;
padding: 0 0 5px 0;
font-size: 1em;
background:transparent;
}

#navColumnOneWrapper, #navColumnTwoWrapper {
margin: 0 0.5em;
background:transparent;
}

[OrcaSoul]

open your stylesheet.css

find the following declarations add a background:transparent; as indicated by the highlight.

#navColumnOne, #navColumnTwo {
vertical-align: top;
padding: 0 0 5px 0;
font-size: 1em;
background:transparent;
}

#navColumnOneWrapper, #navColumnTwoWrapper {
margin: 0 0.5em;
background:transparent;
}

OK, that wasn't in the copy of the default stylesheet.css - I finally located it in the classic version.

I copied your text, saved it, and reloaded the page.

It didn't change anything.

EDIT:

I just tried something that did work - I commented out the color in the secment

#navColumnOne {
	/*background-color: #FFCC99;*/
	}

I now get a white background, but at least it's changed!

Now, where is the best place to place an image in the entire background?

I have it in

body {
	margin: 0;
	/*font-family: verdana, arial, helvetica, sans-serif;
	font-size: 62.5%;*/
	font-size: 86%; 
	font-family: trebuchet ms, tahoma, verdana, arial, sans-serif; 
	color: #000000;
	/*background-color: #e5edf5;*/
	background: #fff url('..images/harbor_sceneSketch.gif');
	}

but it's not showing up - is it overwritten somewhere else?

[clydejones]

check the #mainWrapper declaration in your stylesheet.css

check to see if it has a background-color

[OrcaSoul]

check the #mainWrapper declaration in your stylesheet.css

check to see if it has a background-color

It did, background-color: #fffffff;

I changed that to
background: #fff url('..images/harbor_sceneSketch.gif');

No visible change.

This is what works in my original page...I also tried it without the '#fff ', no difference.

Now, I'm assuming that - since both the css & image folders are under the same /includes/templates/orcatools/ folder, that the '..images/harbor_sceneSketch.gif' will locate it correctly. I also have another image (the background for the header) that is in the same folder, so I'm pretty sure that's correct.

[clydejones]

It did, background-color: #fffffff;

I changed that to
background: #fff url('..images/harbor_sceneSketch.gif');

No visible change.

This is what works in my original page...I also tried it without the '#fff ', no difference.

Now, I'm assuming that - since both the css & image folders are under the same /includes/templates/orcatools/ folder, that the '..images/harbor_sceneSketch.gif' will locate it correctly. I also have another image (the background for the header) that is in the same folder, so I'm pretty sure that's correct.

taking a look at your site would be a great help.

[OrcaSoul]

taking a look at your site would be a great help.

Unfortunately it's still on the local server. I could try to upload it tomorrow (it's just past midnight here in Seattle and I need to get some rest). I'll give it a try, hopefully not a major problem on GoDaddy...

I'll post when it's ready.

Thanks for the help.

[gjh42]

You could avoid a lot of guessing and trial-and-error if you install Firefox and its Web Developer and Firebug extensions.

In particular, Firebug will tell you all the style rules that apply to an element you inspect - useful if you don't know what is causing an effect.

Rather than searching the stylesheet for a selector that looks like it might be relevant, use the tools to find the exact selector that applies to an element and find or add a rule for it in the stylesheet. There are hundreds of unstyled selectors in the code, just waiting for somebody to need them.

[OrcaSoul]

You could avoid a lot of guessing and trial-and-error if you install Firefox and its Web Developer and Firebug extensions.

In particular, Firebug will tell you all the style rules that apply to an element you inspect - useful if you don't know what is causing an effect.

Rather than searching the stylesheet for a selector that looks like it might be relevant, use the tools to find the exact selector that applies to an element and find or add a rule for it in the stylesheet. There are hundreds of unstyled selectors in the code, just waiting for somebody to need them.

I wasn't aware of Firebug - a quick glance show it may be a good thing to look at...I'll get it installed and see if it answers the problem...

Thanks!

[OrcaSoul]

You could avoid a lot of guessing and trial-and-error if you install Firefox and its Web Developer and Firebug extensions.

OK, well...I had one continual reaction while watching the intro...
W O W

This really should be part of the mandatory requirements for working with Zen Cart...

Looks like I'm going to be doing some reading today...

Thanks again.