Column backgrounds in css

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;

[php]#bodyWrapper {
}[/php]

Change it to this;

[php]#bodyWrapper {
background: url(images/bg.gif) repeat-y;
}[/php]

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.

5 Replies to “Column backgrounds in css”

  1. When I did mine I included the background as well and put in in the body rather than the wrapper.

    As a bit of a digress regarding 960 grid, I’ve found that almost half of the grid css is never used in osC, but still being read by the browser of course, thus slowing up the loading time of a osC page – by milliseconds but milliseconds soon add up… 😉

  2. I must say that I don’t like the idea of using background images just to get a plain background color for a column that much. It’s also a bit too inflexible, I mean in case you want to change your page or column width one day: you have then to go again to photoshop, and create an other image that will fit the new sizes.

    Looking around for an other solution to do this, I found this article http://www.positioniseverything.net/articles/onetruelayout/equalheight

    Implementing this for osCommerce, I would use the #bodyWrapper as the wrapper element and the #columnLeft #columnRight as the “block” elements used in the article

    Trying this out (in a little different way), I found that it works nicely, I couldn’t get any of the problems mentioned., maybe because I didn’t had any of the mentioned “problem” browsers/versions by hand

    So, I’m using this in my template now. Did anyone experience any problems with this, or anything to say against this solution?

  3. George – seems OK, but this page describes some problematic areas. I won’t test it, as I think the faux column method is more solid and less intrusive.

    Note also that css3 brings us the opportunity to use multiple background images, but problems arise from browser to browser.

    Could also be done via js by calculating the height of the tallest column, then setting the other columns the same height.

  4. Yes, I know that page, I jut couldn’t get any of the problems.

    The point for me is, that the image solution will not work with variable page and column widths, so I can not use it. For a concrete store, that will not change those settings 3 times per day, it’s probably the safest and easiest method

  5. I can’t imagine any shop that would change the look 3 times per day? But I do agree, that for your purposes with the MTS, the faux column solution is not ideal.

Leave a Reply

Your email address will not be published. Required fields are marked *