Customizing and Styling

Blosxom’s default style is more than a little drab, and purposefully so in the hope it will influence you to add your own look and feel. This section shows you how to do that.

First, let’s do away with that rather flat header and silly footer. In your text or HTML editor, create a new file containing any HTML you wish to add to the top of the document, before the actual weblog entries themselves. This might be a masthead, your site’s standard toolbar, or simply a nicer looking title. Save the file to the $datadir directory as head.html. Example 9-1 shows a sample custom header.

Example 9-1. A custom header 

<html>
<head>
<title>My First Blosxom</title>
<link rel=stylesheet type="text/css" href="/blogbook.css">
</head>
<body bgcolor="#ffffff" text="#333333" link="#000000" 
alink="#000000" vlink="#000000">
<table border="0" width="100%" cellpadding="0" cellspacing="0">
 <tr>
  <td colspan="3">
   <span class="title">My First Blosxom</span>
  </td>
 </tr>
 <tr>
  <td colspan="9" bgcolor="#000000" height="1" ></td>
 </tr>
 
 <tr valign="top">
  <td bgcolor="#dddddd" width="15"></td>
  <td bgcolor="#dddddd" width="100%">
   <br />

Do the same for the HTML to be displayed after the weblog entries. Save the file as foot.html. Example 9-2 shows HTML for a custom footer.

Example 9-2. A custom footer 

<br /> </td> <td bgcolor="#dddddd" width="15"></td> </tr> <tr> <td colspan="9" bgcolor="#000000" height="1"></td> </tr> <tr> <td colspan="3" align="right"> Powered by <a href="http://www.raelity.org/lang/perl/blosxom/">Blosxom</a> ...

Get Essential Blogging now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial