I have new members, was playing around with css. I know on the main site I have to do a major redesign, get rid of redundant css styles, tighten up the templates.

What’s great about designing a brand new site is, I can play around and experiment. Switchers can be javascript or php. No brainer, really, to go for the php version.

MT based switchers have to thank a list apart (who else?). There’s even a more in depth tutorial by Rob Ballou. Of course, in MT3 and WP, there are already plug-ins, sigh, one of these days.

How I did it.

Step 1
Build the css, which I won’t cover here. I use the basic “invisiblecompany blue” and added another one called “rust”. Both I placed in the root directory, with filenames styles-invisibleblue.css / styles-rust.css.

Step 2
I created a new file in the root directory called “switcher.php”, copied the code. Note that under the array, I put the 2 different options, using the file names but not including the .css extension.

Step 3
Within the header of each index tempate page (main index, archive index, category index, individual archives) I called the switcher:

The default is set at invisibleblue, linking the alternate stylesheets enable Firefox users to pick different styles from their menus.

Step 4
Blah IE. To enable non-Firefox users, or anyone who wants to pick using a drop down menu, I made a drop down menu:

I could just paste this in the template where I want the form to sit, instead I made a simple php include so I can call it from any number of pages.

For the example, go to Cam’s page.

In the process I also learnt how to customise forms, and a little php too. Nice.

Most of this site is made up of "weblogs" that do not have date based archives, out of the 8 sections, only 2 are true date based weblogs. No, I didn't include pizzaorme cos, well, I didn't.

So, for writing sections the index page has the categories and individual entries, easy to do cos most entries have titles like Part 1, Part 2 etc. For picture sections the index is kind of a mix.

For d&f my biggest regret was losing the 3x3 format. So I thought about it, and tried to put the categories and entries in a div that's defined as 150x150 boxes.

So, in the index template replace:

<MTCategories> <h2 class="date"><a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a></h2> <$MTCategoryDescription$><br /><br /> <MTEntries sort_by="title" sort_order="ascend"> <a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a> <br /> </MTEntries> <br /> </MTCategories>

with:

<MTCategories> <div class="box150"><span class="smalltitle"><a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a></span> <$MTCategoryDescription$><br /><br /> <MTEntries sort_by="title" sort_order="ascend"> <a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a> <br /> </MTEntries> </div> </MTCategories>

The box 150 div class is defined as:

.box150 { /* creates boxes 150x150px */
float:left;
font-family: verdana, arial, geneva, helvetica, sans-serif;
font-size: 9px;
color: #999999;
margin: 1px;
padding: 4px;
width: 150px;
height: 150px;
border-width: thin;
border-style: solid;
border-color: #cccccc #999999 #999999 #cccccc;
}

Useful resources for a fledgling web designer learning css.

w3c - lays down the law

w3c validator - and checks you've done it right

reference sheet - easy one page guide

panic guide - additional resources

glish - examples of tableless page layouts

bluerobot - more layouts

a list apart - regularly published articles on web design

css zen garden - fixed html, variable css, watch the masters at work

If there are standards it's worth following them. Consistency and compatibility are the buzzwords here.

I deleted the stylesheets for the individual sections, created during the Create New Weblog process. All pages link to the site stylesheet now.

Which has been validated. I got a big grin on my face when the validator came back with "Congratulations! This document validates as CSS!"

There's even an icon to go with it, it's like receiving a certificate after going through an obstacle course.

From everything I read about web design, tables as layout has become a dirty word. It was the thing to do a few years ago, to use tables for formatting because, yes, they gave some degree of control. And it's easy to visualize on the page.

I knew enough to put formatting in css, like font properties, color, background. But I didn't know how to use css to define positioning. Until now.

And hence begin the conversion exercise.

A simple display page

My gallery pictures used to sit in a grid with 3 columns and 3 rows, with all the tr and td tags well defined by width and height attributes. The top row contained the title of the page, the middle row with picture itself plus the description, and the bottom row for navigation. Logical when I first did it.

Step 1: I removed the table elements completely. The main content area is defined by #content and .body tags in css that specify the container's position on the page. The left margin of the image container is set so it sits near the middle of the browser window.

Step 2: I added a .floatcenter property in css and applied it to the image.

Step 3: The text also gets floated.

A 5x5 grid

So now I've discovered how useful the float tag is, I'm can tackle the 5x5 grid on the personal page. Originally it was a nested table, 5 rows by 5 columns, with dimension for each cell at 100px. It was done using loads (and I mean loads) of tr and td tags, each fixed by width, height, alignment and class definitions. A nightamare to maintain and as I found out, not as fixed as I thought.

I debated keeping it as a table but I want to see if I can use css. And I can!

Step 1: I set a new class that defines a box 100x100 with 2-color borders which floats to the left.

.box100 { float:left; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 9px; color: #999999; margin:1px; padding: 4px; width:100px; height:100px; border-width: thin; border-style: solid; border-color: #CCCCCC #999999 #999999 #CCCCCC; }

I know according to strict css rules I shouldn't be using height but for because it works I'll leave it for the time being.

Step 2: I like to have the title in bold, but on the same line as the text. So I used the smalltitle class.

.smalltitle { font-family:verdana, arial, geneva, helvetica, sans-serif; font-size: 9px; font-weight: bold; color: #666666; }

Step 3: In the html each cell is defined by a <div> class:

<div class="box100"> <span class="smalltitle">to do list</span> pay bills, put pictures up on walls, plants </div>

Step 4: Finally to separate the rows I used a <br clear="all" /> tag.

Probably not the most elegant, and I dread any proper web designer reading through this. But it seems to work. So I'm kinda happy.

I've been reading obsessively on web design and realized one thing: the site has been designed wrong. Not all wrong, but a lot of wrongs. Things I seemed to have done right, mostly by accident:

• used css, albeit on a limited basis
• planned the site structure before starting
• only one frame in over 140+ pages and that's because it's necessary
• white background, simple color scheme
• emphasis on content, even if it means a page full of words

Things I haven't done right:

• there are tables everywhere
• css not extensive enough, and why have 3 different stylesheets?
• too many design elements still in the html
• fixed widths, heights, font sizes
• not tested enough on all platform and browsers
• tables.tables.tables

The message I've been getting is, get rid of the tables and separate design from presentation. Which boils down to go learn css and do it NOW. I spent the past 2 months cleaning up the code and fixing the tables, and now I've got to start all over again.

I knew enough to use css for formatting, like defining different types of text attributes (font, size, color, bold/italic etc), background and even a little table layout. Well, it's not that I knew, these were the default css styles that came with Dreamweaver. By looking through other people's codes (my how useful that View Page Source command is) I figured out how to format links. But that's about it. So how?

Luckily, I had help. The MT application came with its css, and although it wasn't what I wanted, it gave me a good place to start from, I mean it's way easier to change what other people had done rather than start from scratch. I ended up adapting Elise's stylesheet at Learning Movable Type.

I also borrowed Eric Meyer's book from the library and surfed around for resources. I'll list out the resources at a later post.

I took the stylesheet I came up with for quiet thoughts and used it on the homepage. Et voila! Instantly better looking. No longer looking like something hacked together by typing monkeys. Everything in their place. I know exactly where the content area is, where the sidebar goes, how far away from the top margin the banner is. Such control.

Instead of using tables for layout, I use <div> and <span> tags. Every time there is a change in element, put in a new <div> class.

So now the html can concentrate on page structure. The html looks prettier too, I'm listing out block element by block element, remembring that container comes before sidebar in the markup, but that's the only thing.

So much so that I tend to use the code view more now, leaving design view for checking how the page looks.

Like that new McDonald's ad says, I'm lovin' it.