This is the P2PU Archive. If you want the current site, go to www.p2pu.org!

Introduction to Drupal

Course Material

Week 5 - Tasks: Theming in Drupal

Heather James's picture
Tue, 2010-10-26 18:36

Introduction to theming in Drupal

In this activity you will learn the basics of theming in Drupal. You can also start on some intermediate steps and explore custom theming in Drupal.

Part 1 is an introduction to what theming is in Drupal. You can continue with any of the 3 tutorials or do them all if you have time.

  • Part 1: Learn about Drupal theming
  • Part 2: Locating and enabling themes from Drupal.org
  • Part 3: Create a sub-theme using a base theme system: Zen
  • Part 4: Add a Views theme template
  • Advanced Videos

Part 1: Learn about Drupal theming

What is Theming?

Theming is a way of creating a template and control design for your site. Drupal & the modules you enable take care of accessing the database, inputing and retreiving data. But after all that, you have to render something in your browser. Where do the "submit" buttons appear? Where does the site title appear?

A theme contains several template files with the extension .tpl.php that are recognized by Drupal. They contain a mix of PHP and HTML. This code is interpreted by a set of code called a theme engine. That theme engine communicates with Drupal's modules to output the HTML that your server delivers when someone requests a page.

If you're new to coding with PHP, it's a scripting language to perform some logic and testing in order to decide what gets output.

line what does it do?
<?php if ($terms): ?> Checks: Do terms exist?
<div class="terms"> If so, then it will print this line
<?php print $terms; ?> This will check for the value of the variables $term and print that. This will be the taxononmy terms in this case.
</div> Print this line
<?php endif; ?> Stop checking

By following the rules of Drupal's theming system we can create unique looks for our site. Drupal uses a system of overrides to guess and check if a template exists. We'll learn a bit more about this through some hands-on activities.

How can I select themes?

You can search and download themes from Drupal.org at http://drupal.org/project/themes. However, there are thousands of projects to sift through. What will suit your needs and skills at this stage? How can you make a custom, unique theme for your site?

Check out this video to get an idea of how simple it is to change the look of a Drupal theme to fit your needs: Drupal Theme Makeover on Got Drupal http://gotdrupal.com/videos/drupal-theme-makeover.

Ensure the theme you select goes with your version of Drupal. Drupal 6 themes are different from Drupal 7 themes. Does it have 2 columns, 3 columns? Go to Block configuration to see the available regions.

What is the best way to find a theme for your project? We can break down most themes into 5 categories.

  1. Out of the box & go Finished themes
  2. Highly configurable themes. Need something a little more customized but don't want to mess with code?
    • Fusion themes such as Skinr , Acquia Marina or Slate. This is also considered a starting theme/framework.
  3. Starting themes and frameworks. Know some code?
  4. Custom themes - Need a unique look for your site?
    • Can be done off of any 'base' theme or framework.
    • Can be done completely from scratch.
    • You do it yourself or hire someone else.
  5. Commercial themes - Need something great looking but don't have the skills or budget for custom themeing?

Tools you will need:

Part 2: Locating and enabling themes from Drupal.org

There are some good articles on locating Drupal themes.

Activity: Try out a theme

From the range of out of the box and configurable themes (listed as 1 and 2 above) you can get a good idea of how to theme in Drupal.

Some themes will look great out of the box, but if you want to significantly change how they look you will need to know how to do image editing and edit CSS. Compare Absynthe which has extensive images http://drupal.org/project/absynthe with Simply Modern http://drupal.org/project/simply_modern

Acquia Marina, which comes installed in Acquia Drupal, has many theme options when you "configure" the theme. But you may want to change the look entirely. TopNotch Themes provides the .PSD document for download. You can change the images and save them. Make sure you save your altered themes into your sites/all/themes/ folder.

Part 3: Create a sub-theme using a base theme system: Zen

This is an optional tutorial to follow if you already know how to install a theme (part 2)

By learning theming from starting with sub-theming you can learn some best practices in theming for Drupal. There are a variety of good base themes to start with in Drupal. Using a base theme is a good way to start. The teams working on them have taken many details into consideration over time. Here are some articles reviewing the popular base themes available:

Try out Zen

For the purposes of this tutorial, we're going to start with Zen. The nice thing about this system is that it's easy to alter the look if you're familiar with CSS. Try to resist the temptation to change any markup.

First learn a bit about Zen. See Theme Garden A showcase of sites built with the Zen theme. You can also listen to John Albin being interviewed about the Zen theme on Lullabot voices.

1. Zen & Zenophile We're going to speed up the process of creating the Zen sub-theme by using the project Try out Zenophile. Zenophile allows themers to very easily create Zen subthemes without all the tedious file copying and find-and-replacing required when creating subthemes by hand. Read an article about how to use Zenophile. Once you follow these instructions for Zenophile you will have a sub theme set up for you to use. You can then begin to edit the theme yourself.

Download:

2. Optional introduction: New to coding in Drupal? Watch this overview of the theme system, also shows how to edit a theme. This video tutorial shows how to download and install the Framework theme, but the same concepts apply to editing the Zen theme. You see how to make an alteration on a template file.

3. Tutorial on using the Zen theme. Experienced with coding? skip to here. Watch an intro to using the Zen Theme for Drupal, by Dudenhofer. Good best practice advice.

4. Documentation

Part 4: Add a Views theme template

This is an optional tutorial to follow if you already know how to install a theme (part 2) or create a custom theme (part 3).

Drupal loads theme template files based on a naming system. There are "template suggestions" available for you to control how Drupal outputs markup. You can also override core template files within your own theme folder. In this example, we'll be adding a special template to change the look of a View.

Read a turtorial on Views theming. These have clear step by step procedures to follow.

Keep in mind:

  • Add new files to your sites/all/themes/yourtheme folder.
  • You can create a “views” directory to organize your views files

Advanced videos:

Attachment: 
image/png icon
themeanatomy0.png
License Information - Privacy Guidelines - Terms of Use