Introduction to Theming Basics for Drupal

Watching 1 of 17 in series.
See something wrong with this video? Let us know.

Introduction to Theming Basics for Drupal


Learn to translate a design into a Drupal theme with .info and tpl.php template files, how to add CSS and JavaScript, override templates, create regions, and use the Theme Developer tool.

The Lullabot Learning Series continues with a hands-on look at Drupal's theming system. In this 2 hour and 44 minute long in-depth video guide, Nate Haug, Jeff Robbins, and James Walker explain the steps for translating a web design into a Drupal theme. The video explains Drupal's design vernacular, concepts, and special needs. The team shows how to associate the proper CSS & Javascript files, add all of the necessary regions, and control the HTML output through page and node-specific templates. You'll learn about the best tools and strategies for controlling the look and feel of your Drupal website. This video covers the basics of Drupal theming. Drupal's more complex theming topics are covered in the Advanced Theming video which pairs with this video and finishes the complete implementation of the 960 Robots theme used in both videos.

Examples in this video are based on Drupal 6 and its variants.

The example 960 Robots Drupal theme as well as a complete download of the finished Drupal site used in this video are available for reference. Also available are the original HTML, CSS and JavaScript template files from the designer.

Can't get the search displaying on your site? Make sure you enable the search box in the theme configuration area, and make sure that the permissions are correct. (By default search is disabled for anonymous users.)

We often get asked "which base theme should I start with?" I always tell people that it really depends on 1) your expertise, and 2) what you're starting with. If you've got a lot of CSS talent and you're starting from scratch with designs in Photoshop or Fireworks, then I'd say that Zen, or another base theme, is a great way to go. However, if you want more control over your HTML or if you're starting from a design which has been created as (Dreamweaver) HTML/CSS, then it's probably easier to just start from scratch, out outlined in this video.

The idea behind the Zen is to give you as many ids and classes as you might need to be able to almost create a theme simply by customizing CSS. It should be noted that with Drupal 6 and now Drupal 7, more and more of Zen has gotten into core.

I should also note that many people don't start with any design at all. They'll just start tweaking something until they've got something they're happy with. In this case it might be best to start with an existing theme that has some elements you like and tweak away. However, I've found some themes to be less tweak-friendly than others. Zen is *very* tweakable, but doesn't give you much to start with. Personally, I've had better luck starting in Dreamweaver or Photoshop, but I've also created a few sites by just tweaking away. I'll usually start with Zen for these.