Last week I finally uploaded to Drupal.org the Vineyard theme - ie the theme I created and use for openlife.cc. Releasing the theme as open source is something I always planned of doing, but never really got round to it. I'm especially proud of the fact the theme looks different than most Drupal themes I've seen, so I hope others can use this as a basis for creating nice sites.

In fact, this is the second iteration of Vineyard already. The first version of OpenLife.cc was done with Drupal 4.7, and I had used the legacy Drupal theme system there. When I upgraded to Drupal 6 last year, that theme became so broken, that it was easier to just recreate the same look from scratch using the PHPTemplate system.

I feel I'm pretty good at using CSS, except for one thing. I still ended up using table-based layout. I never really figured out how those sites do it with a pure-CSS 3 column layout and get it flexible enough for all screen sizes. I know it can't be done, I would just need so much more time for tweaking and testing.

Do you recognize the following features, all of them are of course used on openlife.cc:

Some special tricks used in the theme:

Normal links (but not menu's and other Drupal generated links) are preceded by a small grape icon added from CSS. The grape can of course be substituted with some other icon.

Similarly there is a background image which is positioned relative to the browser window, ie it does not scroll with the page. The default image is a group of grapes and a leaf. Of course this image can also be easily changed.

Blocks placed in the "header" and "footer" areas are modified so that instead of being inside <div> elements they are inside a <td> cell of a table, and laid out next to each other, rather than on top of each other. This is useful if you want to place small links, icons or other items in these areas. The 2 lines of code enabling this are in page.tpl.php.

The class attribute of the <div> element containing a node also contains the node type as a class. Example: <div class="node story">. This makes it straightforward to apply CSS styles for a specific node type. (Like different
font for book pages.)