Dave Johnson on open web technologies, social software and Java
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.
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" />
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:
|Weblog||Template used to display main page of weblog|
|Permalink||To display a single weblog entry|
|Search||To display search results|
|TagsIndex||To display entries that match one or more tags|
|Custom||Themes can define any number of custom templates|
Here's a rundown of the pages defined in Fauxcoly and the features of each.
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.
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.
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.
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.
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)
This is just one entry in the weblog Blogging Roller. You may want to visit the main page of the weblog
Below are the most recent entries in the category Roller, some may be related to this entry.