How to change the width of your osCommerce store keeping the 960 grid systemmultimixer | learn | Monday January 17 2011
We all know that osCommerce, in it’s latest version 2.3.1, has a fixed width of 960 pixels. How it comes? Because osCommerce use the 960 grid system that has a width, as it’s name say, of 960 pixels.
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
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