More about Fauxcoly

Dave Johnson — Thu, 8 Jan 2009 22:34:07 +0000

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:

Action
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

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.

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.

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)

Fauxcoly and XHTML

Dave Johnson — Tue, 6 Jan 2009 08:59:36 +0000

Believe it or not, I've never created an XHTML theme for Roller and I didn't even notice the XHTML declaration when I put my new theme (which I'm calling Fauxcoly) together. I did notice when I got over 400 validation errors from the HTML validator. So, I worked for a couple of hours last night to fix the errors both in my new theme and in my most recent weblog entries. I also had to fix a couple of Roller bugs, which need to be reported.

Now the main pages of my blog validate and I'm brave enough to put this in the theme's footer.

Having a theme that supports XHTML isn't enough, of course. You also have to ensure that each blog entry is well formed and comments too. Unfortunately, we don't have great infrastructure for that in Roller (yet).

I still plan to release the theme in packaged-theme form, but only after I XHTML-ize it too.

New Year and new theme

Dave Johnson — Mon, 5 Jan 2009 11:42:26 +0000

Happy New Year 2009 to one and all! I took a nice long break from work, complete with a Florida vacation, hot tubbing, theme parks and a mini-vacation to rest-up from the main vacation and now I'm back. I think I'm rested and ready to restart some things including work, of course, and this blog.

Restarting a blog is not easy, or so I've heard. Here's what I did. I drew a big diagram on the white board with multiple colors, circles and arrows. I did some calculations and eventually figured out that what I need is a new theme. A little bit of eye candy for the couple of folks who end up here after a search gone wrong or accidentally clicking through as they skim over my blog in Google Reader; that's just what will re-ignite my blogging activities. My problems all have technological solutions. Funny how that works.

So, if you've clicked through to my blog then you're looking at my new theme and newly restarted blog. Thrilling, huh? It's a simple faux-column deal like my old theme, but this time I'm taking advantage of Roller's new 'action' pages, I'm using YUI Grids CSS to define the layout and I'm including content from my other sites (Twitter, Flickr, Delicious, etc.) via aggregation. I'll provide some more details about the theme and it's features (and a download) in a subsequent post, after I've gotten some real work done.

Blogging Roller