Coding

PNG Opacity

One of IE's more annoying bugs is that it doesn't support PNG opacity unless you use a big chunk of ugly code. To create the dropshadow effect in IE, the following filter is applied in ie.css:

/* takes care of IE and its support for transparent .png */

      #content {

      background: none;

      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/bg/content.png',sizingMethod='scale');

      }

Since no other browers understand this, it's applied using a conditional comment. It's invalid CSS and if you don't want to use it, you'll just loose the content area dropshadow.

Column Widths

There are 6 different widths defined in the style sheet that allow you to customize how many columns the template has:

width25 25 percent width
width33 33 percent width
width50 50 percent width
width66 66 percent width
width75 75 percent width
width100 100 percent width

To use them, create a <div> tag and apply the class. To position the columns, use the floatLeft and floatRight classes. This is possible because you can stack CSS classes on an element. Follow this link to see examples.

If you want columns to be side by side, make sure the widths added up don't go over 100 percent. If they do, the rightmost column will be pushed down.

Below is an example of the skeleton code used to generate a 2 column layout:

<div class="width33 floatLeft">

      Left Column content

</div>

      

<div class="width66 floatRight">

      Right Column content

</div>

Images

Images are fully supported using the floatLeft and floatRight classes. Just apply one of them to the image you want to position. Images that have link tags around them will also have a nifty rollover effect, as long as you're using a standards complients browser.

Simple Life

Because sometimes you don't need a sidebar

Coding

PNG Opacity

Column Widths

Images