So, now that 2.3.1 uses the 960 grid system, we no longer have “trusty” tables to give full depth column styles. Instead we need to create the illusion of columns by using a technique known as “faux columns”. It’s very easy.
We know that a typical 2.3.1 osCommerce site is 960 pixels wide, so the first thing to do is create a blank image of that width, and approximately 100 pixels deep. I did this in photoshop, but you can use whichever graphics application you are comfortable with.
We now need to ascertain the width of the left and right column. To do this, we simply need to open up /includes/classes/osc_template.php and find the line of code that begins;
[php]var $_grid_column_width =[/php]
The number is how many columns (aka grids) the column is in width. In my example that I am using, the line of code reads;
[php]var $_grid_column_width = 6;[/php]
We further can work out that 1 grid is worth 40 pixels. How; 960 divided by 24 is 40. So, 6 grids is 240 pixels.
Go back to that blank canvas that you created, and make the right hand portion of it a solid colour that is 240 pixels wide. Do similar for the left hand portion 240 pixels wide – remember that if your “grid_column_width” is 4, then you would make these portions 4 by 40 wide (160 pixels)…
I further “prettied” mine by adding a thin vertical black strip…
Save the image you created as bg.gif into the /images/ directory of your website.
Now open up stylesheet.css and find this;
Change it to this;
background: url(images/bg.gif) repeat-y;
If you don’t understand that, please read a primer on css.
Save the stylesheet and view your site. It should look somewhat like this;
Which you can plainly see has the column showing the purple background. If you scroll down the page, you will further see that the purple extends all the way to the bottom of the page, even though the column actually ends halfway up the page – hence why this technique is known as “faux column”. Faux means false, in french.
If your faux columns don’t show, then there is one more thing that you need to do. And that is to “clear” the divs. So open up /includes/template_bottom.php and change it like this;
That’s it! An introduction to how to create columns in a div based css layout. It’s not the only way, but it is certainly a very easy way.
You may have noticed that the columns also show in the header area, which is probably not desirable. In the future I’ll write a complementary blog post to show how to change that to something a little better looking.
Easy as 123, or clear as mud ? You decide.