More about my theme for SeanBuscay.com.

I built a Drupal theme I call “chi”. It is based on the Yahoo! YUI Grids CSS foundation. Like the excellent “Zen” theme already written for Drupal, a Drupal theme based on Yahoo! grids CSS can offer an excellent starter theme for Drupal developers and themers.

I recently posted a summary on the benefits of YUI Grids CSS for Drupal theme developers on my blog. You can view it as a screencast, PowerPoint presentation, read a text summary, or download a PDF from this URL:

/drupal-web-development/yahoo-ui-library-grids-css-drupal-themers

I have included a zip file of the theme code at the end of this post for you to review.

I’ll highlight a few sections of the code and features in the screen shots below.

First, this is a Drupal 6 theme, which utilizes an .info files for themes. A number of theme elements can now be defined within a simple text based .info file rather than within the code of a template.php file. Here’s a screenshot of the included chi.info file.

Note that regions and theme style sheets may be defined in the theme.info file. One important catch is to define the CSS files in the order in which you would like them to load. They are like defining an array in PHP or Java. So, when including a file sheet which resets all fonts and html elements to a base starting point, and then including a style sheet which builds upon that base reset, the load order needs to be considered.

Let’s look at the file titled, “page.tpl.php” to see how created the Drupal theme from an existing pre-defined grids template. Besides a review of knowing how to place Drupal template variables in the appropriate places to create a theme, there are few things I’d like to point out within this file.

First, at the top, you’ll see this code snippet:

I have made use of the theme settings api to pull a few options into this theme, so that in the section below, the actual doc id which defines the page width, and the main div class which defines the present template (affecting what side the sidebar appears), may all be defined dynamically.

Then in the file titled, “theme-settings.php”, I define the theme settings UI elements for the end user to change their theme settings. Note the theme API options are set by using part of the form API. Below is a small sample of the code.

The total code in the file results in the following settings UI for the end user:

If you look over some of the other tpl files, you’ll notice where I have tweaked the default html or template here and there to move some of the Drupal elements around.

For example, in the node.tpl.php file, I changed the default Drupal node display as follows:

1. Moved the meta info, such as “Submitted by:” to the bottom of the content instead of the top.
2. I moved the vocab terms and links to the bottom of the page/node
3. I added my feed burner JavaScript, along with some PHP, to have my feed flare display at the bottom of each post. See the second image below.

So there you have a little info about my little theme “chi”. As it is based on the YUI grids CSS it performs well in all A-grade browsers. Click here to download and review all the code for the theme. Happy theming!

Share or Comment via Twitter

Tweet