Dress Up Your Blog - Web Services

One interesting aspect of maintaining a blog is the opportunity to change its appearance on a regular basis. In fact, most on-line blogging service providers as well as blogging tools use  easily customizable templates to render a blog, and bBlog is no exception.

Earlier, we mentioned that bBlog uses the Smarty templating engine internally. However, it is also true that everyone does not have the time or patience to master such tools for a simple task such as modifying the appearance of a blog. So in this section, we will attempt to give you a crash course on how to customize the appearance of our bBlog-run blog with just a few simple tweaks.

Interested? Read on.

For starters, we associate a template with our blog on the "Options" screen in the bBlog admin module. Take a look at the following screen shot:

The fourth option on this screen is titled "Template" and allows us to select a template that will be used to render our blog. Fortunately, bBlog comes pre-installed with a nifty little template titled "lines" - we have already seen a screen shot of this template earlier.

But where are these templates stored? If we investigate the folder structure of the bBlog application, we will notice that there is a folder titled "templates" under the "bblog" folder (the exact location for our installation  would be "/www/htdocs/myblog/bblog/templates"). Yes - as you might have guessed - this is the location where bBlog stores its templates.

First, let's take a quick look at the default "lines" template. Not surprisingly, there is folder titled "lines" and this folder contains all the template files, as well as images and style sheet files required to render the blog.

Here is a list of some of the important files located in this folder:

$ ls -l
total 44
-rwxr-xr-x    1 1000     1000  575 Feb 19  2004 archives.html
-rw-r--r--    1 1000     1000 1039 Jan 23  2004 calendar.html
-rwxr-xr-x    1 1000     1000 423 May 15  2004 footer.html
-rwxr-xr-x    1 1000     1000 679 Jan 17  2004 header.html
-rwxr-xr-x    1 1000     1000 718 Mar 21  2004 index.html
-rwxr-xr-x    1 1000     1000 6199 Jan 25  2004 lines.css
-rwxr-xr-x    1 1000     1000 3921 Jan 17  2004 post.html

As you might have guessed - the "index.html" file represents the index page of the blog, "header.html" file represents the header,  and "footer.html" represents the footer and so on.

Coming back to our original requirement: customizing the blog template.

Here is screen shot of the new design that we would like our blog to look like.

For starters, we need to create a new folder under the "templates" folder, say "theblog," and this represents the name of our new blog template.

Next, we must prepare custom versions of all the "html" files that will allow us to customize the appearance according to the screen shot displayed above.

We start with the "index.html" - click [link file="index.html"]here[/link] to save the updated version for your local reference.

A quick glance in this file and you will notice that it further includes two files - "header.html" and "footer.html". Each of these files can be downloaded here - click [link file="header.html"]here[/link] to save the "header" file and [link file="footer.html"]here[/link] to save the "footer" file.

While these two included files mostly contain HTML code along with some Smarty-related identifiers for displaying the title (of the blog) and description in the design, the "index.html" file is the one that contains the code for rendering the blog entries, one after another.

Take a look at the following code snippet:

<%

  // snip

      {getrecentposts num=10 assign=posts home=true}
      {foreach from=$posts item=post}
      {if $post.newday}<DIV class="date">{$post.posttime|date_format:s2}</DIV>{/if}
        <BR clear="all" />
        <DIV CLASS="postitem">
          <H3>{$post.title}</H3>
          {$post.body}<BR /><BR />
          <DIV align="right" class="posted">{sectionlinks sep=" &middot; " sections=$post.sections} &#8226; <A href="{$post.permalink}">{$post.commentcount} Comments/Trackbacks</A></DIV>
      </DIV>
      <BR clear="all" />
      {/foreach}

   // snip
%>

Once again, we will avoid getting into the nitty gritty on how this template works. The important thing to note here is how Smarty and bBlog identifiers are used to list the blog posts, one after another. And for each blog post, the "$post.posttime" identifier represents the time it was created, "$post.title" represents the title, "$post.body" represents the body and so on.

While this is not a drastic re-haul of the default "lines" template, it does give you an idea of how easy it is to customize the appearance of the blog.

If you are looking for more complex customization, you should have a look at the bBlog v.7 Template Documentation available at the following URL: http://www.bblog.com/wiki/index.php/Templates

Do not despair - we are not going to leave you high and dry with respect to our custom template. Here you can download the other files required to complete the entire set: [link file="archives.html"]archives.html[/link] and [link file="post.html"] and post.html[/link]. Finally, the CSS file - [link file="myblog.css"]myblog.css[/link].

And yes - once you have saved all these files in the required folder on your Web server, do not forget to associate the blog with this new template on the "Options" screen.

One final note: we have not included the images referenced in the template. However, we are pretty sure that you can replace them with your own custom versions.