Geek Austin Lauren Roth on Designing (theming) for Drupal

After seeing her work for a while, I finally got to meet Lauren Roth at the Drinks and Drupal party I hosted in May. I took the opportunity to ask her how one becomes a Drupal design ninja. Lauren was gracious enough to share the knowledge.

Lynn Bender: You first started with Drupal after seeing a presentation as SXSW, yes?

Lauren Roth: SXSW Interactive is a fantastic way to come upon new technologies and 2006’s was no exception. As someone with a writing background, I could understand having enthusiasm for a content management system, but the more I found out about Drupal the more I wanted to use it myself. It is now my primary development platform.

Lynn Bender: In the last year, I've noticed that many folks who've been designing sites in WordPress are starting to look at Drupal. I'm guessing that you've noticed this too.

Lauren Roth: WordPress is the grilled cheese sandwich to Drupal’s double-stacked club sandwich. Both have bread and cheese, but Drupal comes with lots of extra delicious parts. Both are written in PHP, use template files and CSS, and separate presentation from site logic.

Lynn Bender: Nevertheless, a common complaint I heard is that Drupal is extremely difficult to design for. What are the things that people tend to have problems with when beginning to design themes for Drupal?

Lauren Roth: The complaint that designing for Drupal is difficult comes, partly, from the fact that designing for a large site is more involved than designing for a simple blog. WordPress, as a blogging platform with some CMS-like plugins, has a wide variety of lovely themes available for download. Drupal is also well-themed, but most of its greatest achievements in theming are on large, proprietary sites whose themes are not contributed back to the community.

Lynn Bender: I've heard this complaint as well. While modules can be contributed back to the community, the design and branding on Drupal sites like Sony Ericsson, MTV Europe, and other media sites are going to fall under copyright restrictions. So, what's a budding Drupal theme designer to do?

Lauren: An aspiring themer, who wants to theme a blog, will discover that the process is actually rather similar on both platforms. Since Drupal adds a great deal more functionality, in its bounty of modules, the output thus generated also needs to be themed. This takes a bit of know-how.

In general, the learning curve with Drupal's file structure is the first hurdle for a new Drupal themer. Understanding how all the template files & and callbacks contribute to building a page full of dynamic data takes a little time. Less if you are already an experienced developer, or have experience with Wordpress.

If someone already knows how to theme for WordPress, they will not have much trouble converting to Drupal. Mastering the Document Object Model will make you a theming ninja, but this is not necessary to get going. If your site is already in WordPress and you want to reuse your theme, it can be converted to work with Drupal, but it is not plug-and-play.

I will lay the groundwork of this process during my presentation at the ACTLAB this Wednesday night.

Lynn: Yes, I'll be sure to put a link to the presentation.

Lauren: A common frustration, with Drupal in general, is installing a local development stack environment. Fortunately, the new Acquia Drupal Stack Installer will help you set up new Drupal localhost site(s) on your computer in less than 60 seconds, so you can get right to installing a new theme and build your own subtheme!

Lynn: I'll have to check that out. I've basically installing Drupal on Ubuntu Linux boxes and giving them to friends. I'll be at breakfast with a friend and he'll say, "I'm going to try to install this week", and I reply "Just give me your box". That would be a good topic for one of the upcoming Drupal meetups, but back to design.

So, What are the steps to building a drupal theme?

Lauren: The first two design steps are the same for any web designer --- Create a mockup then create the HTML/CSS files. The core learning involves turning these into a Drupal theme. There are more regions to design for and consequently more PHP, callbacks and dynamic data to understand. It is possible, though, to only tweak CSS. If you find a theme to sub-theme for and you just want to add images and change the colors and typography, you may only have to edit one CSS file. Those who want to do that should just look for "style.css," use Firebug & Gridfox plugins for Firefox and go to town, thematically speaking.

Lynn: You've mentioned subthemes a few times. Can you briefly explain what a subtheme is?

Lauren: It is possible to create a clone of an existing theme, like Zen, remove what you do not need, and customize what is left by overriding the things you want to change. This is possible because the subtheme inherits from the “base theme,” someone else’s contributed theme, so that you have all the templates, css files, theme functions and the like already set to go. All you need to do is figure out how to customize it according to your mockup without having to write a theme from scratch. This is a huge advantage to a new Drupal themer.

Lynn: I’ve heard that the natural tendency for someone starting to work with Drupal themes is to open up the themes directory, and start changing things on the default Garland theme. What’s a better way to break into theming?

Lauren: Garland is one of a handful of contributed themes that come installed with your core Drupal 6.x. Whatever you do as a new themer, do not start hacking Garland or any of the other built-in Drupal code. Extend, override, and inherit. Get used to these three words in Drupal. Right after you install a brand new Drupal site, you will probably want to change things. In Garland, you can change the color scheme from the interface itself, which is pretty cool, but for more customization you need to get your hands dirty. You can, however, get a long way by just editing CSS. The kibosh on hacking core, or base themes for that matter, is not just for Garland, but for any theme you want to create. Unless you start from scratch, which is a great learning experience, you will need to create a subtheme.

All this entails is copying the Garland theme folder, opening up the .info File, setting Garland, or a more suitable theme like Zen, as a base theme and then changing all the other places the base theme’s name pops up in its theme folder with your own ThemeName. There are a lot of tutorials out there for doing this and there are also better themes to subtheme than Garland, which puts out body classes (bad practice). You want to pick a theme that matches the structure of the site you are trying to build and only override what is necessary to make it look the way you want. The only file a theme really has to have is an .info file, everything else is extra. Aim for the cleanest code you can & use the tools available that make the parts of your theme visible and understandable. Again, I will be covering all of this in my Drupal Theming Introduction on the 24th of June.

Use these tools: Firebug Plugin, GridFox Plugin, Devel Module Suite for Drupal, & Web Developer Plugin. These will expose regions, div ids, classes, and give you ways to “inspect” how your theme works.

Lynn: Tell me more about the Zen theme.

Lauren: Among Drupal’s free themes, some are just better designed for subtheming, like Zen. You will probably learn most quickly if you work on a subtheme of built for the purpose of customizing the look and feel of your site. A general practice for other themes is to strip them down to something similar to what Zen gives you anyway – remove the colors, the backgrounds, and strip away what you do not need for your theme to keep things as clean and straightforward and valid as possible.

Otherwise, working on a theme from scratch will give you good perspective on what Drupal looks like by default, and this is pretty instructive. A theme really only needs a .info file in order to be
visible to Drupal by listing its regions, base theme, scripts, and other settings. Every file you put in your theme is additional to this, so it is not a bad idea to try building a theme from the ground up.

That said, an easier, and recommended, method would be to pick a theme like Zen, create a sub-theme and then work on the template files, discover what they do, and edit the CSS until it looks like what you have designed in your mockup. Zen offers a fluid and fixed layout, three column collapsible regions and many useful body classes like “not-front” “not-logged-in” “no-sidebars” “page-taxonomy-term-#,” etc.. Zen is a theming framework rather than a theme designed for one particular style, layout and set of images. Going through the documentation, of which there is quite a bit, is a great way to become a proficient themer. There is also a large, and helpful, Zen theming community.

There are many other useful base themes out there and Zen gets a lot of attention, but I will get into that in my introduction as well. Again, with Zen theming, as with anything else in Drupal development, utilize code inspection tools and work on a localhost installation until you get comfortable with how everything works.

Lynn: The Zen theme uses a lot of CSS classes -- so much that it seems that it would be possible to design Drupal themes with only a knowledge of CSS. Is this possible? or does the budding Drupal designer need to know Javascript, jQuery, and PHP as well? If so, can they learn as they go?

Lauren: Understanding what all the files in your themes folder do is really the first step. To this end, when it comes to all of Zen’s themable components, you really can get a long way by reading the documentation.

Lynn: You're talking about Joon Park's Drupal 6 theme guide, yes?

Lauren: Yes, I am indeed. It will not step you through everything in the way a tutorial will, but it has a lot of great information. Reading this is a great way to gain a familiarity with all the Drupal theme terminology.

Aside from Drupal terminology, the main bit of PHP you need to be able to understand before getting started would be things like variables, displaying dynamic data, basic foreach() and other functions.

Here’s a handy bit of PHP to print the variables array:

print '

';

                 print_r(get_defined_vars());

                 print '

';

?>

Mostly, you can see which classes and ids to theme by looking at the XHTML tags within each Template file. The Devel Module is a suite of tools designed to help Themers analyze their themes to determine which template files are handling the display of various parts of a website. All of these are really obvious just by spending a little time hovering over parts of your page with the Firebug Plugin’s CSS Inspector. I cannot overemphasize what a boon the Firefox development plugins are towards learning how to theme for Drupal, in particular, and other websites in general. You can do more interesting things with some JavaScript, and jQuery, but the basics of PHP and CSS will at least allow you to control regions, blocks, forms, comments and the like where content is rendered dynamically. Start with editing the CSS until you figure out where everything goes and see how far that takes you.

Lynn: What about scripting? Many Drupal themes are more than simple CSS.

Lauren: When you get into adding scripts to your themes, define them in your .info file and use them to add dynamic presentation effects to different elements, like highlighting a form on hover or adding helper text. jQuery contains all the common DOM, event, effects, and Ajax functions Drupal needs and is built in. None of this is absolutely necessary for the novice themer, who mostly needs to figure out which element displays what and then tinker accordingly.

A new themer can learn gradually as they go, especially if they learn in roughly this sequence:

Install Drupal on a local machine using Acquia Drupal Stack Installer or XAMPP/MAMPP/WAMPP, install themes from drupal.org/projects/themes, explore different configurations and
inspect each theme for strengths and weaknesses, install Administration Menu module to make your life easier, make a sub-theme and get theming! Analyze file structure, inspect CSS, pour over *.tpl.php files, use web tools to see where everything goes, and make lots of little changes to create a new, beautiful design from your mockup.

Once you are a Theming Ninja, help make Drupal a more beautiful place by contributing the fruits of your effort back to the community!

Lynn : Yes! See you Wednesday!

Here are the details on Lauren's presentation:

Drupal Theming - An Introduction
Elegant Functionality Requires More Than Hacking Bluemarine
Hosted by: Lauren N. Roth
Type: Meetings - Club/Group Meeting
Where: UT ACT Lab (CMB Studio 4B)
When: Wednesday, June 24 from 7:00 pm to 9:00 pm
RSVP on Facebook