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

http://www.apachefriends.org/en/xampp.html
http://acquia.com/downloads

● Drupal 6 installed on a local machine

http://drupal.org
 Some Tools of the Trade
● Web browser

http://getfirefox.com

● Web developer plugins for browser

http://getfirebug.com
http://getwebdeveloper.com
 Some Tools of the Trade
● Drupal's Devel module

http://drupal.org/project/devel

● Your favourite text editor or IDE

I use Netbeans with PHP plugin

http://netbeans.org
 Drupal Concepts
● Theme
● Module
● Content types
● Node
● Region
● Block
● 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 'sites/all/themes' directory
 Drupal Concepts
Drupal Module
● “files that contain PHP code and reside in your
sites/all/modules subdirectory of your Drupal
Installation” - (VanDyk and Westgate, 2007)
● “A module is software (code) that extends
Drupal features and/or functionality.”
http://drupal.org/node/19828
 Drupal Concepts
Content Types
● “A single web site could contain many types of
content, such as informational pages, news
items, polls, blog posts”
http://drupal.org/node/21947
● A content type in Drupal (example: 'page')
defines default settings for a specific type of
web content
 Drupal Concepts
Nodes
● “A node in Drupal is the generic term for a piece
of content on your web site”
http://drupal.org/node/19828
● “each item of content is called a node, and each
node belongs to a single content type”
http://drupal.org/node/21947
● Comments and blocks are not nodes
 Drupal Concepts
Regions
“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”
http://drupal.org/node/19828
 Drupal Concepts
Blocks
● “Blocks are discrete chunks of information
that are displayed in the regions of
your site's pages”
http://drupal.org/node/19828
● 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
administrators” http://drupal.org/node/19828
and are displayed in regions by a theme
Navigation
● “Navigation is the catch-all menu that contains
your administration menus, as well as links
supplied by modules on your site.”
http://drupal.org/node/19828
 Concepts
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”
http://drupal.org/node/937#t
● PHPTemplate is Drupal's default theme engine
Other theme engines are PHPTal and Smarty
http://drupal.org/project/Theme%20engines
 Further info on Drupal Concepts
● Drupal Terminology

http://drupal.org/node/937

● Acronyms and expressions used by drupal.org

http://drupal.org/node/302232
 Theme Options
● Use one of the existing themes that come with
your Drupal installation
● Install a contributed theme http://drupal.org
● Adapt an instance of an existing theme
● Build your own theme using a starter theme
like Zen or Fusion
http://drupal.org/project/zen
http://drupal.org/project/fusion
● Create your own custom theme
 Where to Save Your Themes
● Save custom and contributed themes in the
following Drupal directory:
sites/all/themes/

● If we created a custom theme named

'Drupalcambs', we would need to add the
theme elements to the following directory
sites/all/themes/drupalcambs/
 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
Required
● themename.info
● page.tpl.php

● Optional
● style.css
● block.tpl.php, node.tpl.php
● template.php
 Theme Elements
Optional
● template.php
● logo.png
● screenshot.png
● Images folder

See 'Anatomy of a Theme'

http://drupal.org/node/171194
 Theme .info file
● Describes your theme to Drupal
● Filename must be lowercase and be the name
of your theme, example: drupacambs.info
● 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
http://drupal.org/node/171205
 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; ?>
</div>
<?php edif; ?>
 Theme Elements (continued)
● style.css contains your theme's CSS
● template.php may contain function overrides
● logo.png is your site's logo
● screenshot.png 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
http://acquia.com/community/resources/acquia-
tv/tips-and-tricks-drupal-theming-90-minute-
tutorial

● 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
http://meetup.com/drupalcambs
● We have groups on LinkedIn and Facebook,
search for “drupalcambs”
● We have an official group “East Anglia UK” on
http://groups.drupal.org
● We also have a home on http://drupal.org.uk
 References
● Drupal 6 Themes
www.packtpub.com

● Pro Drupal Development

www.apress.com

● http://drupal.org
● http://acquia.com/community/resources
● www.lullabot.com/podcast