OK, not strictly osCommerce customisation, but I thought we'd start with something simple before getting into the complex business of templating and advanced CSS.

One area that is often overlooked is that of the humble product listing - the text you type into admin to describe your product. Sure, you can use something like MS Frontpage to come up with a whizzy looking design for this, but these often end up over-complicated and bloated with html tags. One extreme case I saw had so many uneccesary tags in it that it exceeded the space provided for the description field and was therefore truncated, which totally destroyed the presentation of the site when displayed to the customer (it had tables in it which as a result were not closed properly).

Here then is something simple you can do with a little basic html and css. Say you want to draw some important text to the customer's attention.... If you use something like this code you can put a nice box around it:

<div style="border:1px solid #555555;background:#cccccc;padding:20px;text-align:center;">Highlighted Text within your product listing</div>

This puts the text between the div tags into a box with a light grey background and a thin dark grey line around it like this:-

Of course, you can use any colours you like - they are defined by the hex codes for the red, green and blue components of the colour. For example, #ff0000 would be pure red and #00ff00 would be pure green. If you are unfamiliar with these, search google for online rgb colour pickers to help you with getting the codes for the colours you want to use. The padding figure simply puts some space between the text and the surrounding box and the text-align setting centre justifies the text within it.

Of course, if you want to put a box like this on lots of your product listings, you don't want to have to type all that style information every time. A neat solution is to use a class for the div and then define this in the stylesheet. In the above example, you would add the following to your stylesheet (catalog/stylesheet.css or then stylesheet in the relevant subfolder of the template directory if you are using Loaded, MS2MAX, or the BTS contribution on its own) :-

.highlight_box {
border:1px solid #555555;
background:#cccccc;
padding:20px;
text-align:center;
}

You can then put the box around your text by using the following in your product listing:

<div class="highlight_box">Highlighted Text within your product listing</div>