bioneural.net

Are you prepared to throw away the default iBlog templates and stylesheets to build from scratch? Here's how you might do it using version 1.4.1.

This article refers to iBlog (version 1.x), a Mac blogging client that was formerly used to publish this site. It may refer to design elements and other features that have since been replaced.

Premeditation

So you want to kill the default iBlog layout and look? Pause to consider your reasons, because designing your own template set and stylesheet might not be the solution for you.

• You want a great-looking pre-fabricated look with minimal effort? Move to Blogger.
• All you asked for was valid XHTML. Move to Blogger.
• You want lots of interactive bangs and whistles via server-side scripts, and like being known as a geek. Move to WordPress or Movable Type.
• You have many hours to spare, admit that you're a control-freak, can't stop tinkering, want to "brand" your blog in an manner consistent with the rest of your web site, like or need to write offline, and can live with the various issues such as invalid XHTML generated by iBlog? Read on.

Preparation

You'll need some software tools. See the "Built with..." section of the sidebar here. Your choice of tools differ vary from mine ;-)

You'll need to know some CSS. I learned by viewing many people's designs and from Dan Cederholm's excellent SimpleBits website and book, Web Standards Solutions: The Markup and Style Handbook. I strongly recommend this book; at least read the sample chapter as it describes options for achieving the basic layout that we are aiming for below: Get it! (Amazon.co.uk)

Create a new template set

In iBlog, choose Manage Templates from the Layout menu; create a New Template Set.

In iBlog, select your blog and choose Edit Selection from the Edit menu; select your new template set from Display Settings.

In the Finder, navigate to your new template set:

~User/Library/Application Support/iBlog/TemplateSets/

Let's start with the file called EntryPage.txt. Open this file with a text editor such as BBEdit (not the OS X-supplied TextEdit). Select and delete everything between the body tags. Do the same for each file in the template set.

Sketch a basic layout

Most blogs follow the de-facto tradition of a header and footer, with the main content and navigation elements sandwiched in between:

You might choose to do the same, or create something different (a sidebar on each side of the main content say). For simplicity the above sketch will dictate the basic divisions of our template, with corresponding style information in an associated stylesheet that we'll get to in a bit.

Back to EntryPage.txt. We want to specify each of the above elements as a unique division by assigning an "ID" (there is only one of each element, cf. a "class" which is used when an element may be repeated). Between the body tags in EntryPage.txt we now write:

<div id="header">
Header elements go here
</div>

<div id="main">
iBlog entries go here
</div>

<div id="side">
iBlog Navigation Editor stuff goes here
</div>

<div id="footer">
Footer elements go here
</div>

Now you have a bare-bones XHTML-compliant template! It's a shame that iBlog will later ruin your effort to stick to standards, but hopefully Lifli can sort this out soon.

Make use of the iBlog codes

You'll need to know what codes (placeholder tags) iBlog uses so you can insert them into your template within an appropriate div. Luckily there is a list of codes here. We can now begin to embellish our rather skeletal template. For example:

<div id="header">
<img src="http://www.mysite.com/img/banner.jpg" alt="banner" />
</div>

<div id="main">
<h1>[$EntryTitle$]</h1>
<p>[$CategoryImage$][$EntryAbstract$]</p>
<p>[$EntryBody$]</p>
<p>[$EntryTimestamp$] [$EntryPostDate$]</p>
</div>

<div id="side">
[$NavigationItems$]
</div>

<div id="footer">
&copy; 2005 Joe Blogs
</div>

Obviously, we have to do this for each xxx.txt file within our template set, taking particular note of the correct codes to use inside div id="main" since some are only valid on certain pages. We can embellish this framework as much as we like with lots of nested divisions. Remember, div ID identifies a unique element; div class groups elements together (the difference is important when it comes to styling our pages). The following diagram is a topographic representation of the above XHTML, with some extra divisions, and the iBlog codes highlighted in blue:

If we were to preview the results of our coding thus far, well, it's butt ugly:

Before we can start styling our design...

We need some content

This is your problem! Create your entries as normal, and feel free to use iBlog's basic RTF styling (e.g. italic, bold, etc.) as although we are disabling the standard stylesheet, such font style elements will persist. If you want to do anything a bit more complicated, like make a list or blockquote, use the HTMLCode tag to enclose your XHTML, making sure you have an empty line above and below the opening an closing tags respectively. See the iBlog FAQ if you need an example.

Tip: I found iSnip a useful little app for pasting in frequently-used snippets of iBlog code (shame it only deals with text clippings; icons would be nice too). It resides in the menu bar.

Navigation items

In order to populate our sidebar with content, we can continue to use iBlog's Navigation Editor (in the Layout menu). However, we can ditch the default div tags as defined in the built-in stylesheet:

<div class="sidetitle">Entry Heading</div>
<div class="side">Entry Content</div>

Replace these with standard XHTML (+/- iBlog codes); for example:

<h3>Categories</h3>
<p>[$Categories$]</p>

or:

<h3>Sites I like</h3>
<ul>
<li>Alpha</li>
<li>Beta</li>
</ul>

Get this into your head

There are some things you must get into your head—quite literarily! The following tags go between the head tags:

• Metadata: Optional, but helpful, meta tags are used for defining things like language and character set, site description, keywords, and whether or not robots should index the content of your pages.
• Links: Links are URLs that load our external stylesheet (see below), favicon (optional), and RSS feed. In iBlog parlance the later is added with <link rel="alternate" type="application/rss+xml" title="RSS" href="[$BlogBaseURL$]rss.xml" />. We don't need to change the default.
• JavaScripts: Here you link to external files containing scripts that are essential to iBlog, (optionally) to scripts that do other things on your site (such as display a rotating image), or to scripts that manage your commenting service (e.g. HaloScan). To load the iBlog scripts, we'll keep the default line <script type="text/javascript" src="[$BlogBaseURL$]CommonLib.js"></script>

Link to your own stylesheet

iBlog's Stylesheet Builder has limited functionality—but it does avoid having to know any CSS (Er,... why are you reading this?). It doesn't matter what you choose here (Layout > Manage Stylesheets) because we are going to completely ignore the styles-site.css file that iBlog will generate and place inside your sites folder automatically. iBlog refers to this default stylesheet using the following line:

<link rel="stylesheet" type="text/css" href="[$BlogBaseURL$]styles-site.css" />

We'll replace this with:

<link rel="stylesheet" type="text/css" href="example.css" />

If you want a choice of user-switchable stylesheets, see styleswitcher.js.

Putting it all together

I chose not to use tables, but rather to do all the layout using the CSS method known as "faux columns".

As an example to get you started, I've complied a bare-bones XHTML template set together with essential CSS and images for download. If you do use them (they're free) please post a comment on this page with your URL so I can see some fresh iBlog sites/ ideas. Download (.sit archive) here (25 KB).

Preview: Main blog page

Preview: Entry page

Unstuff the folder into ~User/Library/Application Support/iBlog/TemplateSets/ then, in iBlog, select your blog and choose Edit Selection from the Edit menu; select your new template set from Display Settings.

Note: In the Finder if you drag a template file within "example" (such as BlogPage.txt) onto your web browser in the Dock, it will display using the supplied stylesheet (/css/example.css) and images (/img/...). If you want to use these (or derivatives thereof) on your site, upload the CSS and images to your web server, then edit the template .txt files within the "example" folder to point to the online CSS and images. The XHTML and CSS is commented so you should hopefully be able to work out what does what. Well, get started!

Specific questions about the bioneural.blog design

John asks: How'd you get that image in the banner?

A: I used some clip art from a PowerPoint template, resized and destaturated it, and in Photoshop added layers of text with a drop shadow layer style. In Photoshop's colour picker I typed in #666666 and selected the airbrush tool and ran over the left and right edges of my banner image.

The banner image was placed into each iBlog template using this (shortened) XHTML:

<div id="banner">
<img src="bbanner.jpg" alt="" hspace="0" vspace="0" align="middle" />
</div>

I used CSS to set the background colour of the div containing the image to match the colour of the airbrushed margins:

#banner { text-align: center; background-color: #666666; }

The end result is that the banner is "mobile" within the < div>if the browser window is resized; it is always centred, and its edges melt into the solid < div> colour. Sounds simple, but it took me a while to work out how to achieve this!

John asks: And the row of button links below it?

A: The button idea came from SimpleBits; some of the buttons call on an external JavaScript used to switch stylesheets. I also decided to add buttons for the RSS feed and print information. They are a paragraph in the iBlog template using this XHTML (shortened URLs, hyperlinks removed):

<p id="buttons">
<img src="../xml_button.png" alt="icon" width="27" height="15" />
<img src="../print_button.png" alt="icon" width="27" height="15" />
<img src="../single_button.png" alt="icon" width="27" height="15" />
<img src="../fixed_button.png" alt="icon" width="27" height="15" />
<img src="../wide_button.png" alt="icon" width="27" height="15" />
</p>

CSS is used to position these absolutely on top of the sub-navigation menu (by trial-and-error):

#buttons { position: absolute; top: 118px; right: 142px; margin: 0; padding: 0; } 

#buttons a img { margin: 5px 5px 0 0; background: #b3b3b3; }

John asks: How'd you get the blue bars down both sides of the page?

A: The header + content + sidebar + footer are all contained within a fixed-width wrapper; everything outside the wrapper can be given a body background colour:

body {
margin: 0;
padding: 0;
font-family: Verdana, sans-serif;
text-align: center;
line-height: 1.5em;
color: #2F4A76;
background: #2F4A76;
font-size: x-small;  /* IE5 Win */
voice-family: ""}"";
voice-family: inherit;
font-size: small;
} 

html>body { /* be nice to Opera */
font-size: small; }

You could, alternatively, use a tiled image/ repeating pattern instead of a solid colour.

Channing asks: You have custom icons for every type of post you place... How did you create that in iBlog?

A: Category icons are an iBlog feature. I used 64 x 64px JPEGs which I asked iBlog to resize to 32 x 32 px:

Eric asks: What does the code look like for links to the Technorati Cosmos for each entry?

A: I modified this from an example given by Greg:

<a href="http://technorati.com/tag/[$EntryCategory$]" rel="tag"><img src="http://static.technorati.com/images/bubble_h17.gif" alt="" /></a>

Giulia asks: Can you please tell me how to get the icon in the browser address?

A: It's a 16 x 16 px favicon. You'll need an image editor that can save in the .ico file format if you want to make your own (e.g. GraphicConverter), otherwise use Google to find a freeware ready-made one or online converter (e.g. here). When you have your icon it should be uploaded to the root directory of your site. For example, if you have a .Mac account and your account name is jbloggs, you would upload it to http://homepage.mac.com/jbloggs/. Edit the header in your iBlog templates to include the following lines (remove the space before the links; substitute your root directory):

<link rel="icon" href="favicon.ico" type="image/ico" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />