Zen Cart Logo
Forums / Basic Configuration / Change the colours in SideBox Outside only please

Change the colours in SideBox Outside only please

Locked

Views: 1,936

Results 1 to 11 of 11
This thread is locked. New replies are disabled.
18 Aug 2009, 3:51 AM
#1
zook25 avatar

zook25

New Zenner

Join Date:
Aug 2009
Posts:
37
Plugin Contributions:
0

Change the colours in SideBox Outside only please

Hello.

Please can someone tell me the location in the Zen Cart where I go to change the colours to the left/right side of the Sideboxes.

And the colour for just the Center part of the Main_page!

I wish to have the sides one colour and the center a different colour!:dontgetit

18 Aug 2009, 6:16 AM
#2
charmedbytina2 avatar

charmedbytina2

Totally Zenned

Join Date:
Mar 2007
Location:
AZ
Posts:
1,890
Plugin Contributions:
0

Re: Change the colours in SideBox Outside only please

FireFox with the developers tool add on will point you in the right direction.

Tina

18 Aug 2009, 7:27 PM
#3
zook25 avatar

zook25

New Zenner

Join Date:
Aug 2009
Posts:
37
Plugin Contributions:
0

Re: Change the colours in SideBox Outside only please

This may help! Do you know?

18 Aug 2009, 7:33 PM
#4
gjh42 avatar

gjh42

Black Belt

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

Re: Change the colours in SideBox Outside only please

Add to your stylesheet something like```
.leftBoxContainer {
border: 1px solid #aabbcc;
border-left: #ddeeff;
border-right: #112233;
}


If you want something else changed, you will have to give a better description or an image.
18 Aug 2009, 7:42 PM
#5
zook25 avatar

zook25

New Zenner

Join Date:
Aug 2009
Posts:
37
Plugin Contributions:
0

Re: Change the colours in SideBox Outside only please

Thanks for the help. Does this also change the right side box too I wonder???

I am using the classic stylesheet.css, I went and changed my MainWrapper to #666666 ok this is a yellow colour and I am wondering if the sides can be different colours rather than the whole inside page yellow??

#mainWrapper {
background-color: #ffff33;
text-align: left;
width: 1050px;
vertical-align: top;
border: 2px solid #666666; }

18 Aug 2009, 7:43 PM
#6
zook25 avatar

zook25

New Zenner

Join Date:
Aug 2009
Posts:
37
Plugin Contributions:
0

Re: Change the colours in SideBox Outside only please

Skip last Glenn, I see what your code has in it, I will check this out, thanks again.:clap:

18 Aug 2009, 7:58 PM
#7
zook25 avatar

zook25

New Zenner

Join Date:
Aug 2009
Posts:
37
Plugin Contributions:
0

Re: Change the colours in SideBox Outside only please

Arrrggghhh!

I meant not the borders (outside) the whole sides to be a different colour than the Center part of the page!

So say I have my borders, bottom borders, and the inside colour of the sideboxes done up, but I would like to have the sides the colour red, while the center of my page remains yellow.

I will draw a little pic here.

| red | yellow | red |
| | | |
| | | |
| | | |

left sidebox center right sidebox

See the code that I changed to yellow made all the page yellow, so I was wondering if there are ways to make the sideboxes red instead of yellow.??

I've been trying changing code from line 20 to 600 sort to speak to see what changes what.

I am just not sure if I put the code that you mention overtop of the lines:

.leftBoxContainer, .rightBoxContainer {
margin: 0em;
border: 1px solid #ff0000;
border-bottom: 5px solid #ff0000;
margin-top: 1.5em;
}
line 551-6

19 Aug 2009, 2:12 PM
#8
gjh42 avatar

gjh42

Black Belt

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

Re: Change the colours in SideBox Outside only please

If you want the sideboxes themselves (not the sidebar they sit on) to be yellow background, that is easy. Change.leftBoxContainer, .rightBoxContainer { margin: 0em; border: 1px solid #ff0000; border-bottom: 5px solid #ff0000; margin-top: 1.5em; }to```
.leftBoxContainer, .rightBoxContainer {
margin: 0em;
background: #ffff33;
border: 1px solid #ff0000;
border-bottom: 5px solid #ff0000;
margin-top: 1.5em;
}


You can do this with #navColumnOne and #navColumnTwo if you want the whole sidebar backgrounds yellow.
20 Aug 2009, 6:08 PM
#9
zook25 avatar

zook25

New Zenner

Join Date:
Aug 2009
Posts:
37
Plugin Contributions:
0

Re: Change the colours in SideBox Outside only please

Thank you so very much. This Zen Cart is actually a neat template to play with, lots of changes can be done, and I've learned a lot from Dr. Byte, Tina, and yourself!

What I've done was got that Firefox web developer program and it tells you where to go (no hell of course) so that's helps!

I am wondering, since the sideboxes have code that changes both sides at the same time you know for colour etc... I am wondering that code you gave me where it does the left #nav and the right #nav....would you have to change the code for all the places where you made changes in?

Think of just the SideBoxes, if you manipulate code for them in one place, will this conflict with the rest of the template? Because I noticed there are at least two areas where the sideboxes can be changed.:P

20 Aug 2009, 7:08 PM
#10
gjh42 avatar

gjh42

Black Belt

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

Re: Change the colours in SideBox Outside only please

You can make stylesheet rules for any element that has a class or id tag. You only need to set a style property for a given element once. If there are different rules that mention an element, they should be setting different kinds of properties for it, or else the second one will override the first. In general, it is best to collect all properties for an element under one rule where possible.

24 Aug 2009, 3:04 PM
#11
zook25 avatar

zook25

New Zenner

Join Date:
Aug 2009
Posts:
37
Plugin Contributions:
0

Re: Change the colours in SideBox Outside only please

Hi again Glenn. I managed to figure out where to go to change those colours and such! I am going to post some new questions about something different in a different category on here, some weird square brackets showing up on the .....