I’ve been meaning to do a bit of housework on this site to clean up the CSS and to add a bit of interactivity. After all, I write a lot about JavaScript, so I might as well start adding some to my blog.

photo © 2007 Dan Brady | more info (via: Wylio)First things first: if things look a little wacky for you, your browser is probably using the old CSS file. Refresh. That should force the new CSS file to be downloaded and used.

Second: the changes to the CSS are two-fold. The main impetus was to allow for the second rightmost sidebar to be hidden/shown. Originally both sidebars were absolutely positioned and so, to enable this new behavior, I had to float all three columns (content, sidebar 1, sidebar 2). That way, when the third column is hidden, the other two can grow/move correctly (and when it is shown, they can shrink/move back). The other main point of the CSS tweaking was to make the display of comments nicer. Previously the size of a single comment block was the maximum of the height of the metadata/avatar part to the left of the content or the height of the content itself. The first possibility made the gaps between comment blocks uneven and look bad, so I fixed this.

Third: I added some JavaScript and jQuery to allow that second sidebar to be hidden and shown. I’ve added an extra link on the “navigation bar” above that performs this task.

These changes should help those readers who are using a smaller screen (say, 1024 pixels wide) see the main content more easily. I have had a couple of emails complaining about the old layout, so these changes should alleviate the problem.

Ned Batchelder is a tech blogger I like to read, although he tends to deal with languages and situations I don't. Nevertheless he comes up with some great insights that have applicability to what I do and some great topics that extend what I know.

In a recent post, he brought to his readers' attention that good websites should have a proper printer CSS stylesheet, so that their content not only gets rendered well on the screen, but also on paper. Paper being paper, there's no point in rendering lists of links like sidebars and navigation areas. People, when they print, just want the content.

Now, my old website had a print CSS file, but I'd neglected to provide one for this new blog. Not any more though, I've added one — so it's too late for you to see what it was like printing a page from this site.

It wasn't too difficult. Unlike Ned who started with a blank slate and put stuff in, I essentially started off with the screen CSS and started chopping stuff out. As Ned recommends, mark the content you don't want to print with a display:none style. That got rid of the sidebars and the navigation bar, and I deleted all of the rules for the elements in them. It's a little rude to have backgrounds when printing, so I just got rid of all the cd:background styles. I had to change the font colors, obviously (some of the screen ones are very close to white, since they're output on a dark background). I then got rid of the floats, pretty much, and formatted the margins and padding to give a nice printed look. I made all links the same color as the text that surrounds them — since they're not clickable, it doesn't make sense to draw attention to them.

I then added the print CSS link tag to Graffiti's main layout.view file:

$macros.Style("print.css","print")  

This command retrieves the CSS file for the current theme folder.

Take a quick peek by going to my main page and selecting Print Preview in your browser. Now go to your blog and do the same. Remember, a good print experience is just as important as the screen experience: it tells your readers you take pride in what you do and say.

Part of the job of altering the theme for this site, or indeed writing the "theme" for an ordinary page (here's my résumé, for example), is writing or modifying the CSS file (Cascading Style Sheet) to make it look good. I've used three main resources to help me do this as efficiently as I can.

Cascading Style Sheets: The Definitive Guide by Eric A. Meyer. Yep, my copy of this is so old, it still has the old name (it's now called CSS: The Definitive Guide), No matter what it's called, Meyer does a bang-up job in explaining the nitty-gritty of the Box Model — don't leave home before you understand this in all its glory — and all of the various CSS properties and attributes. You may start reading this and get disillusioned with all the gotchas in the CSS support amongst the various browsers, but I've had great success in following Meyer's explanations and recommendations.

TopStyle 3.5. Written by Nick Bradbury, currently owned by Newsgator, but just sold to Stefan van As to ensure its further development. I've been using this product since Nick brought it out, and it really does make creating stylesheets very easy. Although it's great for static HTML pages, it's not so good for dynamic ones, and so the changes to the CSS file for the Chronicles theme were a bit hit and miss. I did get to the point where I saved off the current view of a webpage from Graffiti, just so I could fine-tune the CSS in TopStyle.

Firebug. If you are developing HTML and CSS and and indeed javascript, stop what you are doing right now and install this add-in into Firefox. (I won't even slow down to say, whaddya mean you're not using Firefox?) Firebug is great at showing you the "cascading" bit of CSS, live on a web page. You can point to an element and Firebug shows you the CSS that is being used to style that element, displaying the inheritance from the outer scope to the most inner scope. The nice thing is the padding and margins are shown in different colors, meaning to hone in on box issues straightaway. Brilliant. The javascript debugger is pretty good too, although I haven't used it that much.

And finally, to ensure my website has the latest files (and vice versa, for backup purposes)...

FireFTP. Neat-o visual FTP client implemented as a Firefox add-in. I love the visual syncing of local and remote folders (drill down through the folders in one pane and the other pane follows suit), and the drag-and-drop between panes. Nicely done.