Tutorial - take control of your site with css

I just wanted to give a little example of how easy it is to take full control of your site design and look with css.

One of the first things that I wanted to accomplish while working on a couple of my clients sites, was to dump as much of the <table> layout as possible and replace it with a very controllable <div> layout. This is very easy to accomplish if you have a good working knowledge of css.

The following examples will be focused on the User Admin.

If you open up any template file in your theme, you will notice that the structure is based primarily using tables. This works good for the most part, the downside is that controlling the design can be a little difficult.

Swapping out the tables for divs is very easy and can land you a much more controllable way to fine-tune the look of your site.

Below is a typical example of how {data} is displayed in a template file using a <table> structure:

Code:

<table width="100%">
    <tr>
        <td>{data}</td>
        <td>{data}</td>
    </tr>
    <tr>
        <td>{data}</td>
        <td>{data}</td>
    </tr>
    <tr>
        <td>{data}</td>
        <td>{data}</td>
    </tr>
    <tr>
        <td>{data}</td>
        <td>{data}</td>
    </tr>
    <tr>
        <td>{data}</td>
        <td>{data}</td>
    </tr>
</table>

To take control with divs and css, swap out your <table>, <tr>, <td> structure and replace with something like below:

Code:

<div id="wrapper">
    <div class="datawrapper">
        <div class="data1">{data}</div>
        <div class="data2">{data}</div>
    </div>
    <div class="datawrapper">
        <div class="data1">{data}</div>
        <div class="data2">{data}</div>
    </div>
    <div class="datawrapper">
        <div class="data1">{data}</div>
        <div class="data2">{data}</div>
    </div>
    <div class="datawrapper">
        <div class="data1">{data}</div>
        <div class="data2">{data}</div>
    </div>
    <div class="datawrapper">
        <div class="data1">{data}</div>
        <div class="data2">{data}</div>
    </div>
</div>

Once you have the structure like above, you can easily control the design with css as below:

Code:

#wrapper {
    width: 800px;
}
.datawrapper {
    margin-bottom: 10px;
    overflow: hidden;
}
.data1 {
    width: 400px;
    float: left;
}
.data2 {
    width: 400px;
    float: left;
}

This is just a very basic example of how to display your data using divs instead of tables.

Below is an example of some User Admin panels I've created using 68C and a <div> design. Hopefully this will encourage you to dig deep into your creative mind and come up with some great designs for you and your customers.

Thanks Mike, yes...for sure...I wasn't thinking that far ahead as I put this together