mertner.com/allan

Styling the site

Tags: — Allan @ 11:00 pm

A nice feature of [WordPress](http://www.wordpress.org) is that it doesn’t use a lot of tables to align page items but instead uses Cascading Style Sheets (CSS). With CSS, you can do everything you ever wanted to with tables, and more – if you know how.

I didn’t know how, I just knew I wanted a different look from the default one shipped with [WordPress](http://www.wordpress.org), and [google](http://www.google.com) is my friend so finding new stylesheets is trivial.

Finding good stylesheets is also relatively easy – for example by looking at the stylesheet competition entries [at alexking’s fine site](http://www.alexking.org/index.php?content=software/wordpress/styles.php). Most of these have really nice design elements, but none of them were “just right” for our site. Well, with all of the good ideas already implemented somewhere, hopefully it’s quite simple to assemble the ones I want in a new stylesheet?

For those of you with a faint heart and limited knowledge of stylesheets, don’t try it. Download a nice stylesheet and live with it instead. CSS is not hard, but it’s very finicky and obscure – particularly if you want your blog to show up nicely in both IE and real browsers.

Making a menu
Anyway, since I’m not fainthearted (and I have the week off) I did manage to get something working. The overall theme and starting point for the style is the excellent 2nd place winner, [Rubric](http://www.alexking.org/software/wordpress/styles/sample.php?wpstyle=rubric) by [Hadley Wickham](http://ineffable.co.nz/) – thanks for your effort!

First, I wanted to add a menu to the top to allow switching between the virtual sites run by the engine. In CSS, this is simple: you output the items as an unordered list in HTML and then you visit a site that generates CSS for a nice menu from a list. I used the one available from [Accessify](http://www.accessify.com/tools-and-wizards/list-o-matic/list-o-matic.asp) to do the job, and just modified the resulting CSS very slightly before adding it to the site’s stylesheet. The image on the right is taken from their site – I used “Style 8”.

Secondly, I wanted the post text to be indented slightly and show the date of the post to the left of the text to break up the page a bit. To do it, I added a divider of class postdate around the code in index.php that emits the date, and then added the following to the stylesheet:

.post {
    padding-left: 5em;
}

.postdate {
    font-variant: small-caps;
    font-size: large;
    float: left;
    border-right: 1px solid #ccc;
    padding-right: 3px;
    width: 3em;
}

A few other changes were done: I changed the font to “Georgia” and reduced the line spacing a bit for the body text, moved a few things by a pixel here and there – and the result is what you see on this site. If you would like to use this for your own site, you can download the stylesheet [right here](http://www.mertner.com/style.css).