Blogging Roller

Fauxcoly is the new Roller theme that I designed over the winter break and the one that you see here on this blog. I wanted a new theme that's simple, easy to maintain, exposes my non-blog activities like Twitter, explains itself and takes full advantage of Roller theme system. Initially, I was planning on incorporating Google Friend Connect but I decided to focus on the theme first then decide how to use the Google widgets for comments, activity display, etc. This post provides some details about the theme's design, its features and how to set it up.

Layout based on YUI Grids CSS

The theme uses YUI Grids CSS for layout and a faux-columns background image that I created in PixelMator. Using YUI Grids CSS is easy. There are just a couple of steps.

You organize your pages into the divs that YUI expects: hd, bd and ft. You wrap those in the "document" div, give it an id that specifies one of four standard pages sizes and a class that specifies one of six standard layouts. For Fauxcoly, I used id="doc2" to specify a 950px wide and centered layout and class="yui-t6" to specify a 300px right-sidebar layout. So, all of the pages in the theme are setup like so:

<div id="doc2" class="yui-t6">
   <div id="hd"> header content </div>
   <div id="bd">
      <div id="yui-main"> 
         <div class="yui-b"> main content </div>
      </div>
      <div class="yui-b"> sidebar content </div>  
   </div>
   <div id="ft"> footer content </div>
</div>

And second, you include the appropriate YUI Grid CSS includes in your HTML. I put the whole of YUI in the directory /roller-ui/yui, so my includes look like this:

<link rel="stylesheet" type="text/css" href=
   "$url.site/roller-ui/yui/build/reset-fonts-grids/reset-fonts-grids.css" />
<link rel="stylesheet" type="text/css" href=
   "$url.site/roller-ui/yui/build/base/base-min.css" />

Roller action pages

In Roller 4.0 we introduced the Template Action concept, wherein each theme can define pages for a standard set of actions shown below. Fauxcoly takes full advantage of this and defines a specialized template for each supported action types. Here are the actions Roller supports:

Fauxcoly pages and features

Here's a rundown of the pages defined in Fauxcoly and the features of each.

• Weblog page. This displays the main page of the weblog, a page-able view of the most recent weblog entries in the blog. Also:
  • Search box that does full text search on weblog entries
  • Welcome message and subscribe button
  • XHTML Friends Network (XFN) of follow me links to owner's other sites
  • Sidebar display of frequently used tags, linked to Tags Index page
  • Sidebar display of latest tweets, photo uploads and bookmarks
• Permalink page. Displays one individual weblog entry.
  • Welcome message with post to Delicious, Digg and Slashdot buttons
  • Shows list of recent related entries, i.e. those in same category
  • Links to navigate to next and previous entries
• About page. Shows an about this weblog message that you can edit as a weblog entry.
  • Welcome message and subscribe button
  • XHTML Friends Network (XFN) of follow me links to owner's other sites
• Tags Index page. Shows most recent entries tagged with one or more tags, allows paging to previous and next pages of entries. The page title and heading make it clear you are looking at filtered results and the sidebar provides a link back to the main page of the weblog.
  
  
• Search page. Shows search results and allows paging to previous and next pages of entries. The page title and heading make it clear you are looking at search results and the sidebar provides a link back to the main page of the weblog.
  
  
• Archives page. Allows you to browse archives using the "big calendar" and provides links to most recent 30 entries.

Setting up Fauxcoly

Because of all the features, this theme is a little more difficult to setup than your average Roller theme. It is possible to setup the theme without actually customizing it via HTML/CSS edits, but you will need to be an admin user on your blog server to do a full setup. To help you along, when you first install the theme it will display the pointers below.

Welcome message. Fauxcoly uses your weblog's About message as the welcome message. You can set your About message via your weblogs settings page.

<img style="margin-left:2em" src="http://rollerweblogger.org/roller/resource/note-welcome.png" alt="note about welcome" />

Follow me links. Fauxcoly expects your weblog to have a bookmark folder caller "me" with links to your social network profile pages and other sites. It will display those bookmarks as XFN "me" links compatible with Google's Social Graph API. For best results, specify a 14x4 pixel image for each link.

<img style="margin-left:2em" src="http://rollerweblogger.org/roller/resource/note-melinks.png" alt="note about me links" />

All feeds. Fauxcoly uses Roller's built in Planet aggregator to display your latest tweets, photos and bookmarks. To set this you, you'll need admin privileges on Roller. Create an aggregation group called "allfeeds" and include in it your blog feed, Twitter feed, Delicious.com feed and Flickr feed.

<img style="margin-left:2em" src="http://rollerweblogger.org/roller/resource/note-allfeeds.png" alt="note about allfeeds" />

About this blog. To setup the about this blog page, you must create a weblog entry titled "About this blog." Once you do that, it will appears on your About page.

<img style="margin-left:2em" src="http://rollerweblogger.org/roller/resource/note-about.png" alt="note about about page" />

Download it a try it out

Fauxcoly has been tested with Apache Roller 4.0. To install it you simply download it, expand the tarfile into your Roller themes directory and restart Roller. You'll then be able to pick the theme via the Roller theme chooser. Here's the download link:

fauxcoly-20090108.tgz (496KB gzipped tarfile)