Introduction to Drupal Theming

stovenumerousInternet και Εφαρμογές Web

4 Δεκ 2013 (πριν από 4 χρόνια και 4 μήνες)

64 εμφανίσεις

Introduction to Drupal Theming
Presented by: Anthony Albertyn

Tutorial Outline

Part 1: Introduction to Drupal 6
theming for beginners (30 minutes)

Part 2: Homework – View an online video
presentation on theming (90 minutes)

Learning Outcomes

Part 1: Awareness of tools that can be used for
theming, understand some Drupal concepts
and the elements of a theme

Part 2: Acquire knowledge to be able to build
your own custom Drupal 6 theme

Some Tools of the Trade

Local environment to run Drupal
Example: XAMPP or DAMP

Drupal 6 installed on a local machine

Some Tools of the Trade

Web browser

Web developer plugins for browser

Some Tools of the Trade

Drupal's Devel module

Your favourite text editor or IDE
I use Netbeans with PHP plugin

Drupal Concepts



Content types




Primary Links, Secondary Links, Navigation

Theme Engine

Drupal Concepts
Drupal Theme

a collection of interrelated files that are
responsible for the look and feel of
the website” - (Shreves, 2008)

Custom and contributed themes should
reside in the '
' directory

Drupal Concepts
Drupal Module

files that contain PHP code and reside in your
subdirectory of your Drupal
Installation” - (VanDyk and Westgate, 2007)

A module is software (code) that extends
Drupal features and/or functionality.”

Drupal Concepts
Content Types

A single web site could contain many types of
content, such as informational pages, news
items, polls, blog posts”

A content type in Drupal (example: 'page')
defines default settings for a specific type of
web content

Drupal Concepts

A node in Drupal is the generic term for a piece
of content on your web site”

each item of content is called a node, and each
node belongs to a single content type”

Comments and blocks are

Drupal Concepts

Pages on your Drupal site are laid out in
regions, which can include the header, footer,
sidebars, and main content section; your theme
may define additional regions”

Drupal Concepts

Blocks are discrete chunks of information
that are displayed in the regions of
your site's pages”

Blocks can contain menus, output from
modules or other information

Blocks are administered in the 'admin area'
administer → site building → blocks

Types of Drupal menus
Primary and Secondary Links

Primary and Secondary links are built by site
and are displayed in regions by a theme

Navigation is the catch-all menu that contains
your administration menus, as well as links
supplied by modules on your site.”

Theme Engine

A theme engine is a set of scripts that
interprets code and makes theming a site
easier. This takes the dynamically generated
content and outputs it to HTML”

PHPTemplate is Drupal's default theme engine
Other theme engines are PHPTal and Smarty

Further info on Drupal Concepts

Drupal Terminology

Acronyms and expressions used by

Theme Options

Use one of the existing themes that come with
your Drupal installation

Install a contributed theme

Adapt an instance of an existing theme

Build your own theme using a starter theme
like Zen or Fusion

Create your own custom theme

Where to Save Your Themes

Save custom and contributed themes in the
following Drupal directory:

If we created a custom theme named
'Drupalcambs', we would need to add the
theme elements to the following directory

Where to Enable Your Theme

Change the admin theme, for example from
'system' to 'Garland', so that it is different to the
front-end theme:
site → configuration → admin theme

Enable your theme and set it as the
default theme
administer → site building → themes

Theme Elements




block.tpl.php, node.tpl.php


Theme Elements




Images folder
See 'Anatomy of a Theme'

Theme .info file

Describes your theme to Drupal

Filename must be lowercase and be the name
of your theme, example:

Should contain at least the following 4 x lines:
name = Your Human Readable Theme Name
description = Description of your theme
core = 6.x
engine = phptemplate

Theme .info File

Can point Drupal to your style sheet if it is not
named style.css or if it is in a subdirectory
stylesheets[all][] = yourstylesheetname.css

Can define your own custom regions, example
region [banner] = Page Banner
region [adsense] = Google Adsense
If you define any regions in the .info file then all
5 x default theme regions will be removed

What are the Default Regions

If you don't specify any regions in the .info file
then you will have access to the following
default regions for your theme:
Header, Left Sidebar, Content, Right Sidebar
and Footer

These variables will then be available to your
template files:
$header, $left, $content,
$right, $footer

page.tpl.php file
Defines the structure of your main web
pages and contains

Your web page html code

Dynamic links to CSS files and JavaScript files

Dynamic Drupal variables

Can include PHPTemplate syntax

Example PHPTemplate syntax
<?php if ($left): ?>
<div id=”sidebar-left” class=”sidebar”>
<?php print $left; ?>
<?php edif; ?>

Theme Elements (continued)

contains your theme's CSS

may contain function overrides

is your site's logo

will display a thumbnail of your
theme in the admin area (150px by 90px)

Some Tips

Rebuild the Cache to see changes to your
theme after editing the .info file and .tpl.php files
admin → site configuration → performance
then click “clear cashed data”

Change your admin theme to a different theme
admin → site configuration → admin theme

Turn on CSS compression when you have
finished creating your theme
admin → site configuration → performance

Tutorial Part 2: Homework

Please view this excellent introduction video
(90 minutes) that demonstrates how to build a
custom Drupal 6 Theme

PS. There will be no test or exam, but I will ask
you questions the next time I see you! ;-)

About “Drupalcambs”

We are a Regional Drupal Group and have
monthly meetings in Cambridge, UK

RSVP for meetups at

We have groups on LinkedIn and Facebook,
search for “

We have an official group “East Anglia UK” on

We also have a home on


Drupal 6 Themes

Pro Drupal Development