Making the Left Hand Column Wider
What we now need to do is make our Left Hand Side Column a little wider. Left Column is approximately ¼ the width of the full page. Remember that we have set our page to 760 pixels wide, so ¼ of that is 190.
You should open up: /includes/application_top.php
Amend the following code (approx line 63):
define('BOX_WIDTH', 150); // how wide the boxes should be in pixels (default: 125)
to this:
define('BOX_WIDTH', 190); // how wide the boxes should be in pixels (default: 125)
Save the file and upload it to your osCommerce Store. Whilst we are looking at the Left Hand Side Column, let's also give it some style using our Stylesheet. We amended the Left Hand Side Column code to add in an extra stylesheet call: left-column Open up stylesheet.css in your favourite text editor, and add the following code:
.left-column {
background: #cccccc;
padding: 10px;
}
Note that whenever you create a style in your HTML code (eg class=”leftcolumn”) then you must use the exact same name in your stylesheet, but put a period (dot, full stop etc) in front of it, like this: .left-column
Save the file [ stylesheet.css ] and upload. Refresh your Store a few times for those stylesheet changes to kick in. Your new osCommerce store should now look like this:
As you can see the changes we made to the stylesheet have given our Left Hand Column a background colour! Easy, isn't it :)
However, because of the way that osCommerce is coded, the InfoBoxes (example categories.php, manufacturers.php etc) all over-ride the Left Hand Column background that we just made so they still look quite awful :( But it's not a major problem and is something we will amend very shortly.
We are doing pretty well so far! Let's have a Pit Stop. Time for a coffee and a recap of what we have done so far.
We've made a lot of code changes
• Removed the Right Hand Side Column
• Removed some unwanted Code
• Added in some extra Code to allow us to set style
• Made the Shop a fixed width and horizontally centered it
• Changed a setting in the stylesheet.css to give the Left Column some style.
We actually haven't done all that much to be honest – but you can already see that it is starting to look not so like Oscommerce! Good work so far!
