Single column store - narrower than 960

[satkin2]

Hi,

 

Before I begin my question, here's an image of what I'm trying to achieve, I thought a picture would help me explain it.

 

 

I've begun playing around with the stylesheet.css file and I have made a few changes successfully...

 

1) body background now the brown paper effect

 

2) bodyWrapper background now the red check in an image 960px wide with transparency in between, giving the brown before the white.

 

3) bodyContent background as #FFF for the white middle.

 

My problem is, at the moment my body content is grid_24 (950px wide) thus overlaps the bodyWrapper image.

 

I've tried using FireBug to alter the div name to see what happens and changing grid_24 to a different grid #, ie: grid_18 does make it narrower, however it just makes it smaller from the right, remaining overlapping on the left, what I'm wanting to do is place it in the middle.

 

I'm sure this can be done, it just that I've never used the 960 system before and am getting a little confused about how to acheive this. I've seen advice that I should not go into the 960 css files, so I've tried to avoid them.

 

Any guidance would be really appreciated.

 

Thanks

 

Steve

[satkin2]

Ok, I'm starting to get somewhere :-)

 

I've set my header, ui-widget and bodyContent to grid_20 and to have left & right margins of 85px and this achieves it. The only problem now is that my bodyContent text is up to the very edge of the body content. I'm playing around with margins and padding yet balancing them out doesn't seem to work, if I set the left/right margins to 85px the bodyContent fits perfectly. However, if I then add a padding of 10px left/right then I get an extension in the width to the right of the bodyContent, if I reduce the margin to compensate this I lose position to the left.

 

Setting the left/right margin to auto doesn't work. Any advice?

[multimixer]

You can not change grid_24 to grid_20 just like this. You have to use grid_24 and leave all other grid values in place. (you could change of course, but that is too much trouble than what it is worth)

 

If it is about to make your store more narrow in general, ie 860 pixels wide, then you need to make an other gs stylesheet, you can do this online here

 

Remember that you have to use 24 columns.

 

The default osCommerce settings are:

column width: 30

number of columns: 24

gutter width: 10

 

What you need to do is

1) create a new stylesheet by changing thr "column width" and "gutter width" values

2) call it by it's width, so you can dwntify t easily, eg 860_24_col.css

3) upload it to [catalog]/ext/960gs/

4) go to file includes/template_top.php and change the link to the gs stylesheet accordingly.

 

If things look like messed up, you can always just change the link back to original

 

You can also read here how I did this

 

An other option, if all it is about is that bodywrapper image is covered by bodycontent (that's what I understand) is, to add the red checks to the body background directly.

 

If you thing you need to change the grid_xy values, then you need make sure always that the total of grids in one "line" is 24, so if you change a grid_24 to grid_20 you need to do something with the remaining grids. You can read more about the 960 system and here about implementation in osCommerce

 

I'm sorry but even your image of what you want to achieve is clear, your online store is something else and not osCommerce, so a link to your osCommerce store as it is now would help

[strub]

Hi,

 

I would really remove the grid system it is just not flexible and you always need to design your shop more on the grid system than on your design.

 

In my shop I removed it totally.

[satkin2]

You can not change grid_24 to grid_20 just like this. You have to use grid_24 and leave all other grid values in place. (you could change of course, but that is too much trouble than what it is worth)

 

If it is about to make your store more narrow in general, ie 860 pixels wide, then you need to make an other gs stylesheet, you can do this online here

 

Remember that you have to use 24 columns.

 

The default osCommerce settings are:

column width: 30

number of columns: 24

gutter width: 10

 

What you need to do is

1) create a new stylesheet by changing thr "column width" and "gutter width" values

2) call it by it's width, so you can dwntify t easily, eg 860_24_col.css

3) upload it to [catalog]/ext/960gs/

4) go to file includes/template_top.php and change the link to the gs stylesheet accordingly.

 

If things look like messed up, you can always just change the link back to original

 

You can also read here how I did this

 

An other option, if all it is about is that bodywrapper image is covered by bodycontent (that's what I understand) is, to add the red checks to the body background directly.

 

If you thing you need to change the grid_xy values, then you need make sure always that the total of grids in one "line" is 24, so if you change a grid_24 to grid_20 you need to do something with the remaining grids. You can read more about the 960 system and here about implementation in osCommerce

 

I'm sorry but even your image of what you want to achieve is clear, your online store is something else and not osCommerce, so a link to your osCommerce store as it is now would help

 

Hi,

 

My store doesn't necessarily have to be narrower than 960px, I would happily have it as 960px, however I do want to have the brown background image and the red check. I couldn't see a way to have the check on the background image without it tiling if I put it on the same image I'm using as the brown. As such that's why I've gone down the route of changing the grid numbers.

 

Is it possible to get the image on the background without it repeating in the wrong places then? If so that would be great as it would mean that I can avoid having to mess around with the 960 template or make a different one, I could just build my site to the container.

[multimixer]

I don't understand exactly what you mean with "repeating at the wrong places", but maybe you could try with 2 background images, the one over the other? Example here

[satkin2]

I don't understand exactly what you mean with "repeating at the wrong places", but maybe you could try with 2 background images, the one over the other? Example here

 

Wow! I had no idea that you could do 2 background images. That's why I was having problems.

What I meant by "repeating at the wrong places" was that, I thought the background image had to be a single image, therefore, I could put the red on the brown, but then as a single image it isn't possible image centralised whilst having the brown go all the way to the edge of the screen regardless of screen width. However thanks to your suggestion, my brown can now tile as much as is needed, whilst I can repeat-y on my red to keep it just in the centre.

 

Thank you so much for your advice, it's been really helpful. I guess this means that I can maintain the 960 layout which with the sounds of things should make my further developments much easier.

 

Thanks very much.

 

Steve