Increase bodyWrapper background color margins 2.3.1

[vantrelgo]

In version 2.3.1, I used #bodyWrapper for my site giftofnames.com, but the store background margins appears too narrow. Is there anyway to adjust this?

[multimixer]

Can you explain what you mean with "background margins" and what you used #bodyWrapper for ?

[vantrelgo]

Hi George,

 

I used your tutorial on how to set the background in an osCommerce store, however I'd like the margins of my store's content area (#bodyWrapper) to be a little wider - my store's content area appears narrower the store in tutorial. This is my code:

 

body {

background: #8A8473;

color: #000;

margin: 0px;

font-size: 11px;

font-family: Lucida Grande, Lucida Sans, Verdana, Arial, sans-serif;

}

 

#bodyWrapper { background:#D9D7BF;

}

 

#bodyContent { background:#e8e8e1;

}

[multimixer]

Ok, I see

 

The issue is connected with the general layout structure, set by the 960 grid system, that looks basically like this

 

[ 5px | left | 5px ] [ 5px | content | 5px ] [ 5px | right | 5px ]

 

You have 5px on the left of the left column and 5 px on the right of the right column and 10px between each the column and the content. That 5px are the "gutter" width, set in the 960 stylesheet. You can change this by creating a new stylesheet using this tool You can keep the same overal width, and just change the "gutter", or you can change the width too. I have a post here, about how to import the new stylesheet into your store.

 

This would change all "gutters", so instead of having 5px like now, you would have eg 10px, but also 20px between the columns and the content.

 

[ 10px | left | 10px ] [ 10px | content | 10px ] [ 10px | right | 10px ]

 

An other option (that can be used alternatively to the new stylesheet or in combination) would be to "move" a part of the gutter from the one side to the other

 

Example

 

[ 10px | left | 0px ] [ 5px | content | 5px ] [ 0px | right | 10px ]

 

or

 

[ 7px | left | 3px ] [ 5px | content | 5px ] [ 3px | right | 7px ]

 

How to do this? Add following to the bottom of your file catalog/stylesheet.css

 

#columnLeft .grid_4{margin-left:7px; margin-right:3px;}

#columnRight .grid_4{margin-left:3px; margin-right:7px;}

Important is of course that the "gutters" total remain same: 5+5 = 7+3

 

EDIT: You need to do something with your images, they are 2600 x 3600 and about 2.5 MB, thats too much, make them smaller and lighter, the page needs ages to load.

 

Very nice colors you have

[vantrelgo]

Thank you! Your tutorial on changing the osCommerce store width keeping the 960 grid system worked perfectly!! I will change the images. Thank you again!