Seeing Drupal Template Variables

Remember the exploded frog diagrams from high school biology? Where all the innards were showing and you could see every single part of every single bit of a frog from the inside out? It was pretty gross. But it was useful if you needed to know all the parts of a frog. This tutorial shows you how to do that with Drupal themes. (I should probably come up with a better name for this, but the visual of it is just stuck in my head.) Let's take a look.

Example one: a stark page design

The first comes from a design agency in Bristol, UK. In this example there is very little additional "embellishment" that needs to be pulled from the design file.

Split the design into regions and page elements. This could include navigation, search box, logo/site name, content, ads and copyright notice.

Convert the designed regions to a plain HTML wireframe:

Identify each type of page element in the wireframe. Add appropriate <div id="Whatever"> and corresponding CSS to your template. You may want to use a base theme with a CSS grid framework such as NineSixty or Blueprint for this step.

Inside each of your <div>s, print Drupal's page variables:

You now have a minimum viable theme that you are ready to start testing with real Drupal content.

Example two: an embellished design

The second example comes from the conference site for ConvergeSE. It has more embellishments. Go take a look at the original site and identify what are (1) images and (2) on-the-fly font face enhancements.

The original site design (front page):

You can probably see a grid before I add any clues to the original site design, but here it is just in case you're struggling to see the shapes in the design.

With Drupal's page variables added:

This site has lots of extra slick styles. But if you break it down it's still a theme that you can build. Specifically:

1. There are three blocks across the top. I would put these in a single region and style the blocks in that region to have special 960.gs width classes. The outside two could be custom menus as they lead to internal pages. You will need to add the background images and style the fonts. View HTML source on the live site. They're using very simple lists for navigation (like Drupal spits out) but with a LOT of style.
2. The Twitter and Facebook links I would do as a custom block with images and links.
3. The main body of the page is a very simple left/right layout. The right side is further sub-divided into two columns. One way to approach this would be to have one region (e.g. $left) that has blocks taking up the full width of the region and the second region (e.g. $right) has blocks that are styled to 50% of the region.
4. The logo (in yellow) is a picture with a squid-shark appearing as a background image. z-indexes make up the funky layering effect with the menu above.

These are both pretty simple sites in terms of the amount of content that's displayed, but it should give you a good sense of how to explode a Web site to find its corresponding Drupal page template variables.