Digitally Talented?
josh's picture

Get going with Drupal themes

Josh Lind

Drupal is great for adding features via modules. Inside of a few days you can have a pretty sweet site prototyped. But without a good looking wrapper your candy will look stale. There are lots of great themes out there ready to drop in with just a few minutes work. Without a little sweat on your part the site will lack flavor, and give off the appearance of just another Drupal site.

I've been working on a new project that is anything but, and in the process I've been teaching Drupal to a friend... we just came to themes. As a good member of the Drupal community, I started the project in v6. There are some changes to themes, but when I hit the upgrade page to further browse the differences between 5 and 6, I realized most people probably really need a starter list. I wish I'd had one. Much of my knowledge is still in Drupal 5, but I've tried to include some of the changes in this tutorial.

Here is a list of a few things you should be aware of to get a solid start in themes.

(Of course Drupal has a great Theme Guide, for multiple versions.)

  • Folders
  • Template Files
  • Template Base File
  • Regions
  • Hooks

Folders...

First things first, themes rock because everything that causes the site to LOOK the way it does lives in the theme folder (you probably already knew this.) That folder is sites/all/themes/your-theme-name. (This theme folder allows for multisites.) The cool part is that folder can have a bunch of theme, which you can switch between. Set one for admin, another for random users or even let your users switch if that fits your desires.

In the theme folder is the /images folder that holds all the theme specific images you need for that look of your site. NOTE: Files that will exist regardless of the theme are stored separately. In version 5: /files and in version 6: sites/default/files.

Template Files...

There are a few files that power most of a theme's layout. All of the files in the theme folder that end in .tpl.php are template files that determine Drupal rendered output. These files contain the HTML that finalizes each page. The master layout template is page.tpl.php. This file determines how all pages will be displayed. This contains your page structure tags, often much of the header layout, and most importantly the output places for Regions. If you have a layout in mind and a sketch in hand, then open up the page.tpl.php file and the style.css and create the basic layout.

The secondary template files are things like node.tpl.php, comment.tpl.php and block.tpl.php which determine how each of those are respectively output on a given page. Keep in mind that nodes can output as a list, table, teaser or full... and templates can then get more complicated as you perfect various outputs. In fact, you can even define a different template for each node type by creating files like node-product.tpl.php or node-blog-entry.tpl.php.

Template Base File...

The template base file is like the brains of a theme. It defines various functions that will take place before rendering Drupal output. It helps create breadcrumbs, can customize how usernames or avatars are displayed, can inject style classes and ids into elements based on what page you're on, and in v5 it was/is the way to call out different Regions, among other things. The base file is template.php. One of the most common reasons for editing this file is that a module asks you to in readme.txt. (You are reading all the module readme files aren't you!) Needing to edit the template file means that a piece of the module needs help in rendering the output function of the theme you're using.

Regions...

I think this is one of the most under-used elements of Drupal. Regions allow you drop a section of content (a block) into a region on the page. In your page template you can define as many regions as you want, wherever you want and via style sheet customize the look however you want. This allows you to have total control of layout with just a few files AND those few files are all isolated in the theme folder! As of v6 regions are defined in the .info file. I believe this is an indicator that regions are now being seen as a more essential and useful elements of themes, and Drupal in general. The only bummer with custom regions is that when switching between themes much of your content can disappear because the new theme doesn't have the region for your content blocks to land. (The database entries for assigning blocks to regions in admin/build/blocks are theme specific.) If you are providing multiple themes for admins or users, make sure they both have the same regions.

Hooks...

As a beginning themer, you won't need to write hooks. But this is a great time to add them to your vocabulary. One of the core structures of Drupal is hooks. They allows modules, themes and more to latch on to a thread of code being executed. If the Drupal core is processing something, like getting a user avatar, then Drupal is calling a function that provides a hook. A module can then, for example, edit the size of the image. This can then still be hooked onto by a theme function that places a link around the image. Anything that happens in Drupal, all the way down to core functions like write a comment, show a profile, write the date, etc. can be hooked onto and altered by a theme function. These are called theme overrides and are done in the template.php file. This, again, given the theme LOTS of power to alter the output, remain in a separate folder and easily switchable.

Hope this gives you a better jump into Drupal themes.

Trackback URL for this post:

http://www.readydone.com/trackback/442