Drupal Themes

Theme System Components

Template Languages and Theme Engines

  • Template languages like Smarty and PHPTemplate can be used to fill template files with dynamic data within Drupal.
  • To use these languages, a wrapped is needed, a theme engine.
  • Theme engines are installed under sites/sitename/themes/engines.
  • Drupal community created its own template engine, called PHPTemplate and is located under themes/engines/phptemplate.

Themes

  • Themes are collection of files that make up the look and feel of the website.
  • Template File Extensions:
~Extension Theme Engine
.theme PHP
.tpl.php PHPTemplate
.tal PHPTAL
.tpl Smarty

Installing a Theme

  • New themes should be placed under sites/all/themes.
  • To enable themes navigate to Administer > Site building > Themes

Bulidng a PHPTemplate Theme

Steps

  1. Create/modify HTML file.
  2. Create/modify CSS file.
  3. Create a .info file to describe the new theme.
  4. Standardize the filenames according to what Drupal expects.
  5. Insert available variables into your template.
  6. Create additional files for individual node types, blocks and so on.

Using Existing HTML and CSS Files

  • First step is to create a new folder at sites/all/themes/custom/
  • Copy the html file and the css file and rename page.html to page.tpl.php.

Creating a .info File

  • Each theme needs to include a file that describes the capabilities of the theme to Drupal.

PHPTemplate template file

  • Every PHPTemplate template file is passed a different set of dynamic content variables to use within the files.
  • By convention Drupal automatically looks for a style.css file for every theme.

Understaning Template Files

  • File page.tpl.php provides the overall page layout for the site.
  • The insertion of block.tpl.php and node.tpl.php happens automatically by the theme system during page building.

The theme() Function

  • When Drupal wants to generate some HTML output for a themable item it looks for a theme function or template file that will generate HTML for that item.
  • This is a list of themable items
  • What happens when a simple node page is displayed:
  1. Drupal's menu system receives the request and hands off control to the node module.
  2. After building the node data structure, theme('node',$node, $teaser, $page) is called. This finds the correct theme function or template file, defines lots of variables and applies the template, resulting in finished HTML for the node.
  3. If the comment module is enabled, any comments are changed into HTML and appended to the node's HTML.
  4. This HTML is returned and passed to the theme() function again as theme('page',$return).
  5. Each block is turned into HTML by called theme('blocks',$region), which defines variables an applies a block template.
  6. Finally, Drupal defines lots of variables for the page tempalte to use and applies the page template.
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-Share Alike 2.5 License.