Web Design For Idiots

Well, when you first look at the site, your instinct would be to just stretch the entire category box to reach the footer and there you have a consistent color. This would not be wise. The reason is, once this box takes up the ENTIRE left column, you will not be able to add another box to that column in the future.

There is a MUCH better option, and that option is to give the ENTIRE column a background color to match the background color of the green categories box. The solution in the long run is better, but it might be a tad time consuming.

What you want to do is start by creating an id for the left column. You will insert this code into your catalog/stylesheet.css at the bottom after the last ‘}’ We will call the id “left” and give it a background color of PINK. You can change the color to anything you want.

Here is your style code:

#left { background-color:#E41B4B; }
You will change the color # to suit your own needs.

Now you need to tell the left column to use that id. This is where it might get a little tedious, but not in the LEAST difficult.

Go to your catalog/index.php file and search for this:

<td width="<?php echo BOX_WIDTH; ?>" valign="top"><table
border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0"
cellpadding="2">
<!-- left_navigation //-->
<?php require(DIR_WS_INCLUDES . 'column_left.php'); ?>
<!-- left_navigation_eof //-->
    </table></td>

You will then change the code to include the id that we created in the that holds the entire left column as seen here:

<td id="left" width="<?php echo BOX_WIDTH; ?>"
valign="top"><table border="0" width="<?php echo BOX_WIDTH;
?>" cellspacing="0" cellpadding="2">
<!-- left_navigation //-->
<?php require(DIR_WS_INCLUDES . 'column_left.php'); ?>
<!-- left_navigation_eof //-->
    </table></td>

And that is IT!! You are DONE………. with the index.php page. OOPS!! Did i forget to mention that this was tedious?? Well, once you have finished this, you will be completely comfortable with it.

Now you have to go to EVERY file in your catalog folder (not those in the sub folders though) and find the EXACT same code and add the style id to those as well.

The code will look exactly the same in every folder so you don’t have to get worried about searching around for it. It will always be directly above the following:

<!-- left_navigation //-->

So this is what you would see before in a stock install of oscommerce:

and this is after we make the left column PINK!!

BONUS

If you want to add a background IMAGE to this, you would simply change the code that you add into the stylesheet.css to this:

#left { background:url('yoururlthere.com/picture.jpg'); }

HAVE FUN!!! Any questions, please post your question in a comment, or CONTACT ME!!

---

Want to know who is offering this awesome content? Here it is! Someone who is relatively new to web design. I am new enough to still remember how absolutely frustrating it was to try and get anything done in this field, but have also been around long enough to be able to help those that are where I was a year ago. Aside from web design, I run the office of my dad's engineering business, and do book keeping by trade. I love my pets.. All 6 cats, 1 peg legged dogs, and 1 hedgehog. LOVE THEM!! Oh yea, and my husband. He lets me chase my dreams and I let him do the same. We are happy people because of it. Read more from this author

---

This entry was posted on Tuesday, February 17th, 2009 at 7:10 pm and is filed under Design and Looks, OsCommerce. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.