Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Increase bodyWrapper background color margins 2.3.1


vantrelgo

Recommended Posts

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;

}

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...