Now it’s of course not an obligation for all osCommerce store owners to have a store of that width. There is no higher power pushing anyone to do so, it all comes from the 960gs, and the 960 grid system is a stylesheet, not more, not less.

The question now is, how to do if you want an other store width, is that possible with the 960 grid system? The answer is surprisingly easy: Yes it’s possible to have any store width, without having to alter any file, without any css knowledge, without having to remove the 960 grid system.

So, lets start creating a css file for a store width of 1032 pixels.

Step 1: create a custom css file online

First thing to do is to go to the 960 grid system website and click on “custom css generator” on the left.

You will be transfered to a custom css generator, that you can access directly too of course. You’ll have in front of you following screen:

Here you will need to change the  ”number of columns” to be 24 and the “gutter width” to be 10. This will make the resulting css file to be conform with the rest of your store’s setup. What you can alter to any number is the “column width”. Setting this to number “30″ will result to the default 960 pixels width:

You don’t need this of course, since it is already included in osCommerce. The settings for a 1032 pixels wide website for example are like this: 33 column width, 24 columns, 10 gutter

If this is the page width you need, then press on “download css file”. You will get a copy of the new created custom css to your screen. Save this file to your computer and name it by the width that you selected, in our example the filename would be 1032_24_col.css

Step 2: upload the new file to your server

Use your favorite FTP program to upload the file “1032_24_col.css” to following location

[catalog]/ext/960gs/

Step 3:  Activate the new page width

Last step is to “tell” to our store to use the new stylesheet that will set the new width. To do this we need to go to file [catalog]/includes/template_top.php and change the path to the css file. This path is set in following line

<link rel="stylesheet" type="text/css" href="ext/960gs/<?php echo ((stripos(HTML_PARAMS, 'dir="rtl"') !== false) ? 'rtl_' : ''); ?>960_24_col.css" />

This we change to

<link rel="stylesheet" type="text/css" href="ext/960gs/<?php echo ((stripos(HTML_PARAMS, 'dir="rtl"') !== false) ? 'rtl_' : ''); ?>1032_24_col.css" />

You can do this of course for any width you like, I would say, the only limitation is the “common sense”: You have to consider your visitors most common screen sizes and your needs of display, for example for very large images.
Here are some screenshots of different store widths


In case you use mini template system, things are more easy, since you don’t need to modify any file. You can either use one of the predefined widths or simply create your own. Mini template system users, please read here about Create a custom page width for your store

Enjoy