Notes on the Bluebird Template, Part 1

From time to time I get comments on the 'skin' of my technical blog:

I sегiouslу lοvе your website. Eхcellent colоrs & theme. Dіd уou creаte thіs website yοurself? Рlease reply back aѕ I'm trying to create my own personal site and would like to find out where you got this from or exactly what the theme is called. Thank you! Feel free to visit my weblog: nagelpilz

reptile7's JavaScript blog makes use of Blogger.com's "Bluebird" classic template, which was created by Evhead and Glish. I thought it would be worthwhile to take a look at the Bluebird template given that it is no longer available from Blogger.com - as you may know, resurrecting outdated code is a 'theme' of what I do.

Basic structure

The Bluebird template has a simple structure that is based on a set of ten div elements. These divs have id or class names that (for the most part) straightforwardly describe what they contain: a main div frames all non-background content, a Title div holds the blog title, each post sits in a Post div, etc.

The template look



The Bluebird template's head element holds a style block that styles the template's body element, the aforementioned div elements, and other body element descendants. The template's characteristic look - its blue-stripe frame - results from the body's background-color:#c3cfe5; and the main div's margin:20px;.

<style type="text/css">
body { margin: 0px 0px 0px 0px; font-family: arial, helvetica; background-color: #c3cfe5; }
#main { margin: 20px; border: 1px solid #000; background-color: #fff; padding: 0px 0px 15px 15px; }
...
</style>

As shades of blue go, #c3cfe5 is a bit dull, but if we pushed the body background to pure blue, then it wouldn't be quite so bluebird-y, would it?

Template tags

Like all of the Blogger.com classic templates, the Bluebird template is littered with what are called "Blogger tags" or "template tags", of which there are two main types:

(1) <tagName> ... </tagName>

Although the author of the aforelinked "Template Tags: defined" article can't be bothered to say so, these "tags" are in fact XML elements. Some of these elements serve as containers for repeating units of content.

(2) <$tagName$>

I don't know what exactly these things are, but I can tell you some things about them. These "tags" are some sort of database-related construct, and they function just like SGML entity references, more specifically, they are replaced by text or markup from a database when a template page is rendered by the browser. (And given their resemblance to SGML entity references, I think it was a bad call on Blogger's part to give them a markup-like appearance - a &tagName; formulation would have been much more appropriate.) Their Node.nodeName return is #text, meaning they are objects that implement the Core DOM's Text interface.

My primary goal in writing about the Bluebird template is to set out the template's HTML and CSS so that a 'Weekend Silicon Warrior' can apply the template to the creation of normal Web pages, and consequently I will keep discussion of the template tags to a minimum (we won't be able to avoid them completely). We'll take up the other highlights of the template in the following post.