osCommerce v2.3.3 Tutorials | osCommerce eBook Store | osCommerce Tutorials | osCommerce Home

osCommerce v2.3.3 Changing the Width of Columns and Main Contents

We learned before that the web layout of osCommerce v2.3.3 is using the 960 Grid System with 24-column variant. We also learned that the 24-column variant simply divide the 960 pixels grid into columns that are each 30 pixels wide. Each column has 5 pixels of margin on the left and right, and 20 pixel wide gutters between the columns.

Let's take a look at the default web layout of osCommerce v2.3.3 again.

oscommerce v2.3.3 llayout with 960 Grid System

To change the width of columns (left column and right column) and the main Contents, we need to follow the rules:

  1. They can only be modified according to the "standard" dimension of 24 column grid, i.e. 30 pixels, 70 pixels, 110 pixels, 190 pixels, 230 pixels, 270 pixels, 310 pixels, 350 pixels, 390 pixels, 430 pixels, 470 pixels, 510 pixels, 550 pixels, 590 pixels, 630 pixels, 670 pixels, 710 pixels, 750 pixels, 790 pixels, 830 pixels, 870 pixels, 910 pixels, 950 pixels.
  2. The total width of all web layouts (include all margins) is equal to 960 pixels.

Which file Control or Setting the Width of Columns and Main Contents?

The file that setting the width of columns and main contents is:

catalog/includes/classes/osc_template.php

Open the file with a text editor and navigate to line 13. You will find the "class oscTemplate":

osC v2.3.3 modify width of columns

Focus on the following three lines:

var $_grid_container_width = 24;

We learned that the 24-column variant divide the 960 pixels grid into 24 columns that are each 30 pixels wide.

var $_grid_content_width = 16;

It means that the Main Contents is using or occupying 16 columns of the 960 pixels grid.

var $_grid_column_width = 4;

The Columns (Left Column and Right Column) are using or occupying 4 columns of the 960 pixels grid.

Study the default web layout of osCommerce v2.3.3 above carefully, you can find:

Left Column: Column 1 to Column 4 (total 4 columns)

Main Content: Column 5 to Column 20 (total 16 columns)

Right Column: Column 21 to Column 24 (total 4 columns)

Total columns = 4 + 16 + 4 = 24

osC v2.3.3 modify width of columns

To modify the columns and main contents, you have always to keep the total columns equal to 24.

How to Modify the Width of Left Colum and Right Column?

Let's take an example to show how to modify the width of Left Column and Right Column.

Example: Increase the width of Left Column and Right Column from 4 columns to 5 columns (i.e. 190 pixels)

1. Modify the value of $_grid_column_width to 5:

var $_grid_column_width = 5;

2. Now the Left Column and Right Column are occupying a total of 10 columns.

3. Calculate the column for Main Content:

Total columns left for Main Content = 24 - 10 = 14 columns (i.e. 550 pixels)

4. Modify the value of $_grid_content_width to 14:

var $_grid_content_width = 14;

The osCommerce template will look like:

osC v2.3.3 modify width of columns

Changing the width of Left Column, Right Column and Main Content is easy with osCommerce v2.3.3.