Change the colours in SideBox Outside only please

[Zook25]

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!

[charmedbytina2]

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

Tina

[Zook25]

This may help! Do you know?

[gjh42]

Add to your stylesheet something like

.leftBoxContainer {
    border: 1px solid #aabbcc;
    border-left: #ddeeff;
    border-right: #112233;
    }

Repeat for .rightBoxContainer, and adjust properties as desired.

If you want something else changed, you will have to give a better description or an image.

[Zook25]

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

[Zook25]

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

[Zook25]

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

[gjh42]

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

Adjust the background color as required.

You can do this with #navColumnOne and #navColumnTwo if you want the whole sidebar backgrounds yellow.

[Zook25]

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.

[gjh42]

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.