Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / How do I change the background color in the left sidebox?

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

Locked

Views: 2,414

Results 1 to 14 of 14
This thread is locked. New replies are disabled.
2 Feb 2010, 5:42 AM
#1
orcasoul avatar

orcasoul

Zen Follower

Join Date:
Jan 2010
Posts:
133
Plugin Contributions:
0

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

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.

2 Feb 2010, 5:49 AM
#2
clydejones avatar

clydejones

Deceased

Join Date:
Nov 2005
Location:
Colorado Springs, CO USA
Posts:
7,017
Plugin Contributions:
12

Re: 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.

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

2 Feb 2010, 6:06 AM
#3
orcasoul avatar

orcasoul

Zen Follower

Join Date:
Jan 2010
Posts:
133
Plugin Contributions:
0

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

clydejones:

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?

2 Feb 2010, 7:22 AM
#4
clydejones avatar

clydejones

Deceased

Join Date:
Nov 2005
Location:
Colorado Springs, CO USA
Posts:
7,017
Plugin Contributions:
12

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

check the #mainWrapper declaration in your stylesheet.css

check to see if it has a background-color

2 Feb 2010, 7:36 AM
#5
orcasoul avatar

orcasoul

Zen Follower

Join Date:
Jan 2010
Posts:
133
Plugin Contributions:
0

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

clydejones:

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.

2 Feb 2010, 8:04 AM
#6
clydejones avatar

clydejones

Deceased

Join Date:
Nov 2005
Location:
Colorado Springs, CO USA
Posts:
7,017
Plugin Contributions:
12

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

OrcaSoul:

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.

2 Feb 2010, 8:11 AM
#7
orcasoul avatar

orcasoul

Zen Follower

Join Date:
Jan 2010
Posts:
133
Plugin Contributions:
0

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

clydejones:

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...:unsure:

I'll post when it's ready.

Thanks for the help.

2 Feb 2010, 1:46 PM
#8
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

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

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.

2 Feb 2010, 8:26 PM
#9
orcasoul avatar

orcasoul

Zen Follower

Join Date:
Jan 2010
Posts:
133
Plugin Contributions:
0

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

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.

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

:clap:Thanks! :clap:

2 Feb 2010, 8:54 PM
#10
orcasoul avatar

orcasoul

Zen Follower

Join Date:
Jan 2010
Posts:
133
Plugin Contributions:
0

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

gjh42:

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...
:jawdrop: W O W :jawdrop:

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

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

Thanks again.

2 Feb 2010, 9:13 PM
#11
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

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

Any time:)

3 Feb 2010, 8:02 AM
#12
orcasoul avatar

orcasoul

Zen Follower

Join Date:
Jan 2010
Posts:
133
Plugin Contributions:
0

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

gjh42:

Any time:)

Well, I took a look at this - after futzing around for a while I finally figured out how the basic parts are working...I do think this will help.

A couple of questions though...is there any way to print the great looking tree structure this shows? It would be great to have that to orient myself with.

Also, after I installed FireBug, I noticed that all of my passwords were missing...
:oops:
was that supposed to happen? Now, if I can figure out where they would have been backed up, I should be able to recover them...but it would have been better not to have to.

3 Feb 2010, 8:16 AM
#13
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

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

I don't know of a way to print Firebug window contents.
I'm sure that installing Firebug isn't supposed to affect passwords elsewhere, but I can tell you nothing about what may have happened or what was the real cause.

3 Feb 2010, 8:29 AM
#14
orcasoul avatar

orcasoul

Zen Follower

Join Date:
Jan 2010
Posts:
133
Plugin Contributions:
0

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

gjh42:

I don't know of a way to print Firebug window contents.
I'm sure that installing Firebug isn't supposed to affect passwords elsewhere, but I can tell you nothing about what may have happened or what was the real cause.

Well, I do have a hard copy of most of the logon/password entries, so it's mostly just an inconvenience. Probably a few in there I needed to get rid of anyway...:rolleyes:

I'm not sure if it was FireBug - but that's the only unusual thing I did at that time, and I noticed it pretty soon after. Does seem to have reset some of the settings as well...

I think it's time to run a full security scan overnight...