Drupal Theming
An Introduction
Thursday, June 25, 2009

Before We Get Going:
• Who This Is For: The Aspiring (Curious)
Drupal Themer
• Assumptions: You know HTML/CSS, Box
Model, Have Drupal 6.x Installed
• Questions at the End, (please)
• Let’s Discuss Further Over Drinks!
Thursday, June 25, 2009

Does Theming Make You Feel
Like This?
Thursday, June 25, 2009

Then You Can Probably
Do This:
Thursday, June 25, 2009

What Custom Theming
Can Look Like:
Thursday, June 25, 2009

If Not,
Thursday, June 25, 2009

Some Familiar Themes:
•
Thursday, June 25, 2009

Where Do I Get More
Themes? Drupal.org
Thursday, June 25, 2009

Theme Design Principles
• Grid - 960px or 1024px width
• 5 Major Regions = Header, Footer,
Left, Center & Right
• Align Text and Images
• Grab color schemes from nature
• Design for content not vice versa
Thursday, June 25, 2009

Skills You Will Need:
• Curiosity: A willingness to inspect existing
themes for structure, layout and style.
• Knowledge of CSS: Enough to edit
properties, change backgrounds, add
images, etc.
• XHTML & PHP - it helps to understand what
content is printed where.
• JavaScript (jQuery) for something extra
Thursday, June 25, 2009

Drupal Theming Is Not Inherently
Harder Than Designing for
WordPress, but:
• Drupal sites can be much BIGGER:
• More Users
• More Functionality
• More Data
• More Regions to Theme
Thursday, June 25, 2009

Theming Caveats
• Don’t hack core
• Don’t hack module
• Don’t hack Zen Theme
• Intercept, subtheme & override
instead
Thursday, June 25, 2009

Two Main Approaches
Write Scripts Extend Scripts
Create *.CSS Files Override CSS
Create Your Own Templates Override Existing Templates
Write .info File From Scratch Copy .info File, Add “Base Theme”
Static HTML/CSS Static HTML/CSS
Mockup Mockup
Build From Scratch Build From Subtheme
Thursday, June 25, 2009

Introduction In 4 Parts
• 1. Theme Anatomy
• 2. Basic Build from Static HTML/CSS
• 3. Create a Zen SubTheme
• 4. Tools & Tricks
Thursday, June 25, 2009

Part 1: Drupal
Theme Anatomy
sites/all/themes/foo • .info File
• Theming Engines
• Template Language
• PHPTemplates
• CSS, Images
• Scripting
Thursday, June 25, 2009

Building A Page
For Display
1. Browser retrieves dynamic information from the database.
2. Browser checks retrieved data against relevant output filters.
3. Server Inserts information into each core template.
4. Theme Engine Merges template files into template.php
5. Browser displays formatted page in the Web Browser.
Thursday, June 25, 2009

Drupal Theme Stack
PHP Theme PHPTemplate Theme
Don’t Hack These
Thursday, June 25, 2009

Drupal 6.x
Separating Design & Logic
• .info files define your theme
• More templates = more control, better
separation
• Better phptemplate_variables()
• Theme inheritance makes subtheming and
overriding possible
• Pure CSS themes are also possible
Thursday, June 25, 2009

Theme Engines
(PHPTemplate comes with Core)
• PHPTemplate Uses the language PHP when
outputting variables mixed in with the xHTML
markup
• Work With Other Template Languages: Smarty, PHPTAL, LOLTheme
• Register an extension -- .smarty
• Register a renderer – smarty_template_render()
• Discover templates on behalf of the theme
• Load a template.php file on behalf of the theme
Thursday, June 25, 2009

PHPTemplate
• Written for Drupal by Adrian Rossouw
• Uses foo.tpl.php files to theme Drupal's theme_foo() functions
• See handout for themable functions
• You can write an entire theme in PHP, but why?
• Most common
Thursday, June 25, 2009

Directory Structure of
Theme Engines
Thursday, June 25, 2009

PHPTemplate Engine
Wrapper that interfaces
Drupal Template Language
• Understands HTML & PHP Statements for Dynamic Data
• Comes installed, so you need not touch it.
• File Extension - *.tpl.php
• Handles - page.tpl.php, front-page.tpl.php, node.tpl.php,
comment.tpl.php, forum.tpl.php
Thursday, June 25, 2009

PHP: Generates
Dynamic Content
HTML <?PHP
Page ?>
Client <?PHP
Web
HTML
Page
PHPTemplate ?>
Drupal Core
Browser
HTML
<?PHP
Page
?>
Drupal MySQL
Database
(Views Is Basically a Query Builder)
Thursday, June 25, 2009

template.php
• Conditional logic & data processing of
output
• Preprocessors for generating variables
before merging .tpl.php files - each
individual template file gets assigned to
regions
• Use to override theme functions here & do
other raw output customization
Thursday, June 25, 2009

What Is A Preprocessor
Function For?
• Setup variables to be placed within
the template (.tpl.php) files. Plain
theme functions do not interact with
preprocessors.
• When overriding CSS and editing
Template files just is not enough.
Thursday, June 25, 2009

Preprocessor Functions
• [engineName]_preprocess: Will apply to all
hooks.
Base Theme
• [engineName]_preprocess_ [hookname]:
specific to a single hook.
• [themeName]_preprocess: Will apply to all
hooks.
Subtheme
• [themeName]_preprocess_ [hookname]:
specific to a single hook
Thursday, June 25, 2009

Order of Preprocessor
Functions
$theme_preprocess_$hook
Theme $theme_preprocess()
Theme phptemplate_preprocess_$hook()
Engine phptemplate_preprocess()
$modulename_preprocess_$hook()
Modules $modulename_preprocess()
$template_preprocess_$hook
Core $template_preprocess()
Thursday, June 25, 2009

So, what should I use to control
dynamic content display?
Template Files Theme Functions
Build a single output variable and
Output is printed
return it.
<?php print $variable; ?>
$output = “output”;
Easier to use if mixing in a lot of plain Easier to use if using control structures
html. and loops.
Thursday, June 25, 2009

3 Common
block.tpl.php Template Files
Navigation
Blog Post 1
Who’s Online node.tpl.php
Syndicate Blog Post 2
page.tpl.php
Thursday, June 25, 2009

Each Template Handles
A Region of Your Site
• page.tpl.php - Entire Page
• front-page.tpl.php - Just Front Page
• block.tpl.php - Blocks
• comment.tpl.php - Comments
• forum.tpl.php - Forums
Thursday, June 25, 2009

Template Hierarchy -
Specific before General
Home Page Nodes
page-front.tpl.php node-type.tpl.php
page.tpl.php node.tpl.php
Comments
Pages comment.tpl.php
page-node-edit.tpl.php
page-node-1.tpl.php
page-node.tpl.php Blocks
page.tpl.php block-module-delta.tpl.php
block-module.tpl.php
Boxes block-region.tpl.php
block.tpl.php
box.tpl.php
Thursday, June 25, 2009

zen.info
metadata
name = internal theme
name zen.info
description = one
sentence
engine = phptemplate Text
Drupal version, 6.x
CSS stylesheets
Regions
Features
Thursday, June 25, 2009

Lastly, the Screenshot
• Gives your users/
admins a preview of
your theme
• See drupal.org
screenshot guidelines
if you want to
contribute your
theme.
• (*please contribute!)
Thursday, June 25, 2009

*WHEW*
• Do I really need all these files to create a
theme?
• No - all you need is .info, the rest overrides
Drupal default ($left, $right, $footer)
• Should I hack a contributed theme? No -
find a suitable theme to inherit from.
Thursday, June 25, 2009

Part Two: Build A Simple
Theme From Static
HTML/CSS
• Look At Mockup
• Write *.tpl files
• Incorporate CSS
Thursday, June 25, 2009

Static HTML Page
DrupalAustin
Header
Home | About | Contact | Projects | Events
Left Center Right
Navigation DrupalAustin’s Been Busy Search
Drupal Austin has been busy lately, making awesome sites.
Menu 1
Drupal Austin has been busy lately, making awesome sites.
Menu 2
Drupal Austin has been busy lately, making awesome sites.
Menu 3
Menu 4
Menu 5 DrupalAustin’s Party
Menu 6 Drupal Austin has been busy lately, making awesome sites.
Menu 7 Drupal Austin has been busy lately, making awesome sites.
Menu 8 Drupal Austin has been busy lately, making awesome sites.
Menu 9
Menu 10
Drupal 7’s UI Overhaul Update
Drupal Austin has been busy lately, making awesome sites.
Drupal Austin has been busy lately, making awesome sites.
Drupal Austin has been busy lately, making awesome sites.
Footer
Thursday, June 25, 2009

Regions: $header, $center, $left,
$right, $footer
DrupalAustin
Header
Home | About | Contact | Projects | Events
Left Center Right
Navigation DrupalAustin’s Been Busy Search
Drupal Austin has been busy lately, making awesome sites.
Menu 1
Drupal Austin has been busy lately, making awesome sites.
Menu 2
Drupal Austin has been busy lately, making awesome sites.
Menu 3
Menu 4
Menu 5 DrupalAustin’s Party
Menu 6 Drupal Austin has been busy lately, making awesome sites.
Menu 7 Drupal Austin has been busy lately, making awesome sites.
Menu 8 Drupal Austin has been busy lately, making awesome sites.
Menu 9
Menu 10
Drupal 7’s UI Overhaul Update
Drupal Austin has been busy lately, making awesome sites.
Drupal Austin has been busy lately, making awesome sites.
Drupal Austin has been busy lately, making awesome sites.
Footer
Thursday, June 25, 2009

Region: $header
DrupalAustin
Header
Home | About | Contact | Projects | Events
Left Center Right
Navigation DrupalAustin’s Been Busy Search
Drupal Austin has been busy lately, making awesome sites.
Menu 1
Drupal Austin has been busy lately, making awesome sites.
Menu 2
Drupal Austin has been busy lately, making awesome sites.
Menu 3
Menu 4
Menu 5 DrupalAustin’s Party
Menu 6 Drupal Austin has been busy lately, making awesome sites.
Menu 7 Drupal Austin has been busy lately, making awesome sites.
Menu 8 Drupal Austin has been busy lately, making awesome sites.
Menu 9
Menu 10
Drupal 7’s UI Overhaul Update
Drupal Austin has been busy lately, making awesome sites.
Drupal Austin has been busy lately, making awesome sites.
Drupal Austin has been busy lately, making awesome sites.
Footer
Thursday, June 25, 2009

Head of
page.tpl.php
HTML page.tpl.php
<html xmlns-http://www.w3.org/1999/xhtml dir=
“ltr”>
<head> <html xmlns-http://www.w3.org/1999/xhtml dir=
<style type= “text/css” title= “currentStyle”> “ltr”>
@import “style.css”; <head>
</style> <title>
<meta http-equiv= “Content-Type” content= <?php print $head_title ?></title>
“text/html ; charset=iso-8859-1” /> <?php print $head ?>
<title>yourdomain.com</title> <?php $styles ?>
<meta name= “description” content= <?php $scripts ?>
“description” /> </head>
<meta name= “Keywords” content= “keywords” / <title><?php print $head_title ?></title>
> <?php print $head ?>
<meta name= “robots” content- “index,follow” /> <?php print $styles ?>
</head> <?php print $scripts ?>
Thursday, June 25, 2009

Head $variables
• $head_title: A modified version of the page
title, for use in the TITLE tag
• $head: Markup for the HEAD section
(including meta tags, keyword tags, and so
on)
• $scripts: Script tags necessary to load the
JavaScript files and settings for the page.
Thursday, June 25, 2009

Region: $header
DrupalAustin
Header
Home | About | Contact | Projects | Events
Left Center Right
Navigation DrupalAustin’s Been Busy Search
Drupal Austin has been busy lately, making awesome sites.
Menu 1
Drupal Austin has been busy lately, making awesome sites.
Menu 2
Drupal Austin has been busy lately, making awesome sites.
Menu 3
Menu 4
Menu 5 DrupalAustin’s Party
Menu 6 Drupal Austin has been busy lately, making awesome sites.
Menu 7 Drupal Austin has been busy lately, making awesome sites.
Menu 8 Drupal Austin has been busy lately, making awesome sites.
Menu 9
Menu 10
Drupal 7’s UI Overhaul Update
Drupal Austin has been busy lately, making awesome sites.
Drupal Austin has been busy lately, making awesome sites.
Drupal Austin has been busy lately, making awesome sites.
Footer
Thursday, June 25, 2009

More Region: $header
<div class= “header” id= “h”>
<div class= “header” id= “h”> <?php if ($logo || $site_name) {if (!$logo) {
<h1>Your Site</h1> print ‘<a href= “. check_url($front_page) . “
<a href= “#”><img src= “images/logo.gif” alt= title= “. $site_title . “ >’;
“site” /></a> print ‘<img src= “. check_url($logo) . “ alt= “.
<ul> $site_title . “ id= “logo” /></a>’;
<li><a href= “#”>Home</a></li> }
<li><a href= “#”>About Us</a></li> print ‘<h1>’. $site_name .’</h1>’;
<li><a href= “#”>Contact</a></li> }
<li><a href= “#”>Projects</a></li> </div>
<li><a href= “#”>Events</a></li>
</ul> <?php if (isset($primary_links)) : ?>
</div> <?php print theme(‘links’ , $primary_links,
array(‘class’ => ‘links primary-links’)) ?>
<?php endif; ?>
$logo: The path to the logo image, as defined in theme configuration.
$site_name: The name of the site, empty when display has been disabled in theme settings.
$front_page: The URL of the front page. Use this instead of $base_path, when linking to the
front page. This includes the language domain or prefix
$primary_links (array): An array containing primary navigation links for the site, if they have
been configured.
$secondary_links (array): An array containing secondary navigation links for the site, if they
have been configured.
Thursday, June 25, 2009

Region: $left
DrupalAustin
Header
Home | About | Contact | Projects | Events
Left Center Right
Navigation DrupalAustin’s Been Busy Search
Drupal Austin has been busy lately, making awesome sites.
Menu 1
Drupal Austin has been busy lately, making awesome sites.
Menu 2
Drupal Austin has been busy lately, making awesome sites.
Menu 3
Menu 4
Menu 5 DrupalAustin’s Party
Menu 6 Drupal Austin has been busy lately, making awesome sites.
Menu 7 Drupal Austin has been busy lately, making awesome sites.
Menu 8 Drupal Austin has been busy lately, making awesome sites.
Menu 9
Menu 10
Drupal 7’s UI Overhaul Update
Drupal Austin has been busy lately, making awesome sites.
Drupal Austin has been busy lately, making awesome sites.
Drupal Austin has been busy lately, making awesome sites.
Footer
Thursday, June 25, 2009

Region: $left
HTML page.tpl.php
<div id=”left”>
<div class= “menu”>
<h3>Menu</h3>
<ul class= “ul1”>
<li><a href= “#”>Menu 1</a></li>
<li><a href= “#”>Menu 2</a></li> <div id= “left”>
<li><a href= “#”>Menu 3</a></li> <?php if ($left) : ?>
<li><a href= “#”>Menu 4</a></li> <?php print $left ?>
<li><a href= “#”>Menu 5</a></li>
<li><a href= “#”>Menu 6</a></li> <?php endif; ?>
<li><a href= “#”>Menu 7</a></li> </div>
<li><a href= “#”>Menu 8</a></li>
<li><a href= “#”>Menu 9</a></li>
<li><a href= “#”>Menu 10</a></li>
</ul>
</div>
</div>
$left: The HTML for the left sidebar
Thursday, June 25, 2009

Region: $right
DrupalAustin
Header
Home | About | Contact | Projects | Events
Left Center Right
Navigation DrupalAustin’s Been Busy Search
Drupal Austin has been busy lately, making awesome sites.
Menu 1
Drupal Austin has been busy lately, making awesome sites.
Menu 2
Drupal Austin has been busy lately, making awesome sites.
Menu 3
Menu 4
Menu 5 DrupalAustin’s Party
Menu 6 Drupal Austin has been busy lately, making awesome sites.
Menu 7 Drupal Austin has been busy lately, making awesome sites.
Menu 8 Drupal Austin has been busy lately, making awesome sites.
Menu 9
Menu 10
Drupal 7’s UI Overhaul Update
Drupal Austin has been busy lately, making awesome sites.
Drupal Austin has been busy lately, making awesome sites.
Drupal Austin has been busy lately, making awesome sites.
Footer
Thursday, June 25, 2009

Right Side Bar
HTML page.tpl.php
<div id= “r”>
<div id= “r”>
<div class= “menu”>
<?php if ($search_box): ?>
<h3>Search</h3>
<div class=”block_menu”>
<form action= “”>
<h3>Search</h3><?php print $search_box ?>
<input name=”search” type=”text” class=”text”
</div>
maxlength=”50”/>
<?php endif; ?>
<input type=”submit” value=”OK” class
<?php if ($right): ?>
“submit” />
<?php print $right ?>
</form>
<?php endif; ?>
</div>
</div>
</div>
$search_box: HTML to display the search box, empty if search has been disabled.
$right: HTML for the right sidebar
Thursday, June 25, 2009

Region: $footer
DrupalAustin
Header
Home | About | Contact | Projects | Events
Left Center Right
Navigation DrupalAustin’s Been Busy Search
Drupal Austin has been busy lately, making awesome sites.
Menu 1
Drupal Austin has been busy lately, making awesome sites.
Menu 2
Drupal Austin has been busy lately, making awesome sites.
Menu 3
Menu 4
Menu 5 DrupalAustin’s Party
Menu 6 Drupal Austin has been busy lately, making awesome sites.
Menu 7 Drupal Austin has been busy lately, making awesome sites.
Menu 8 Drupal Austin has been busy lately, making awesome sites.
Menu 9
Menu 10
Drupal 7’s UI Overhaul Update
Drupal Austin has been busy lately, making awesome sites.
Drupal Austin has been busy lately, making awesome sites.
Drupal Austin has been busy lately, making awesome sites.
Footer
Thursday, June 25, 2009

Footer
HTML page.tpl.php
<div class= “footer” id=”f”>
<div class= “footer” id = “f”> <?php print $footer ?>
</div> </div>
</body> <?php print $closure ?>
</body>
$footer : The footer region.
$closure: Final closing markup from any modules that have altered the page.
This variable should always be output last, after all other dynamic content.
Thursday, June 25, 2009

Regions: $header, $center, $left,
$right, $footer
DrupalAustin
Header
Home | About | Contact | Projects | Events
Left Center Right
Navigation DrupalAustin’s Been Busy Search
Drupal Austin has been busy lately, making awesome sites.
Menu 1
Drupal Austin has been busy lately, making awesome sites.
Menu 2
Drupal Austin has been busy lately, making awesome sites.
Menu 3
Menu 4
Menu 5 DrupalAustin’s Party
Menu 6 Drupal Austin has been busy lately, making awesome sites.
Menu 7 Drupal Austin has been busy lately, making awesome sites.
Menu 8 Drupal Austin has been busy lately, making awesome sites.
Menu 9
Menu 10
Drupal 7’s UI Overhaul Update
Drupal Austin has been busy lately, making awesome sites.
Drupal Austin has been busy lately, making awesome sites.
Drupal Austin has been busy lately, making awesome sites.
Footer
Thursday, June 25, 2009

Add CSS Styling
• Put Header Div at the Top at 960px width
• Create a Container Div to Hold Left, Center & Right - Use Floats
and Left-Margins to clear the Center & Right from the Left
• Put Footer Div at the Bottom at 960px width
• For this simply layout, there are many CSS templates available
• (The details are a bit out of this presentation’s scope)
Thursday, June 25, 2009

From-Scratch, Recap
• We created the page.tpl.php file
• We converted 5 HTML Divs to Template Regions: Header,
Center, Left, Right & Footer
• Next: Create style.css to style the page.tpl.php’s HTML output
• To add more dynamic content we can either
• Add its <?php ?> directly to page.tpl.php
• Write more *.tpl.php files: node.tpl.php, block.tpl.php,
box.tpl.php
Thursday, June 25, 2009

Is There An Easier Way?
• There sure is: Subtheming
• Subthemes allow you to build on existing
template files, CSS and Scripts
• Remove what you do not need
• Work from a mockup, just the same and
“shop” for components
• You can even convert a WordPress theme!
Thursday, June 25, 2009

Part Three:
Create A Subtheme
Base Theme
Parent
Subtheme
Child
Thursday, June 25, 2009

6.x - CSS Only Themes
• Core page.tpl.php theme based on zen
• Uses well-named classes to identify areas
• A theme with just an .info file will create an
ugly site but with clean XHTML that can be
manipulated
Thursday, June 25, 2009

Subtheme in 7 Steps
• 1. Wireframe/Mockup in Photoshop, Illustrator, Fireworks
• 2. Create Static HTML/CSS Files in Text Editor
• 3. Clone Base Theme from Download
• 4. Create Subtheme in Localhost
• 5. Override Templates in *.tpl.php files
• 6. Add JavaScript and jQuery, if necessary
• 7. Override themable functions in template.php
Thursday, June 25, 2009

Theme Override Layers
d SubTheme Override Base Theme
c Theme Override
Theme Engine Override
b
Modules
a Core
a: Default Theming Implementation
Thursday, June 25, 2009

Theme Inheritance
• Unless you already have expert knowledge of Drupal Theming,
start with an existing theme and customize it.
• Sub theme sets “base theme” in .info file
• Gains all style sheets, templates, all functions in template.php
• Sub theme should never use phptemplate_* functions
• Safest way to ‘tweak’ a theme and still be able to upgrade the
theme
Thursday, June 25, 2009

Theme vs. Sub-Theme
Thursday, June 25, 2009

Subtheme Basics
• Inherits resources from the parent theme
• Name the base theme in .info file
• Does not have to be in subdirectory of
parent theme (unlike Drupal 5)
• Put in sites/all/themes with your custom
theme named folder
Thursday, June 25, 2009

How to Install A
Base Theme
• Go to Drupal.org/projects/themes
• Log in and filter by Drupal version
• Save to desktop, unzip
• Create folder location sites/all/themes in your Drupal directory
• Go to admin/build/themes and enable/configure new theme
Thursday, June 25, 2009

Working From
Base Theme
Base Theme
Subtheme1 Subtheme2 Subtheme3
Music Site Newspaper Blog
Music Site A Music Site B Newspaper A Newspaper B Blog A Blog A
Thursday, June 25, 2009

Starting With Zen
• Flexible standards-compliant and semantically correct XHTML theme
• Easily modified through CSS/enhanced version of Drupal’s template system.
• Out of the box, Zen is clean and simple with either a one, two, or three column
layout of fixed or liquid width. In addition, the HTML source order has content
placed before sidebars or the navbar for increased accessibility and SEO.
Thursday, June 25, 2009

Zen Features
• Well documented php and css files.
• Lots of easy-to-access classes and ids for CSS developers.
• Classes on body include items like "logged-in", "not-logged-in",
"front", "not-front", as well as the node type ("node-type-story",
"node-type-blog", etc) for single node pages. * Automatic
(table-less) column resizing for 1, 2, and 3-column layouts.
• Separate layout.css file to allow for changing the type of column
layout (holy grail, jello mold, etc).
• A print.css file optimizes print display automatically when sent to a
printer — removes, sidebars and nav elements, optimizes font size,
adds text to links showing href, etc.
Thursday, June 25, 2009

Subtheme of Zen
• The base Zen theme is designed to be easily extended by its sub-
themes.
• You shouldn't modify any of the CSS or PHP files in the zen/ folder;
but instead you should create a sub-theme of zen which is
located in a folder outside of the root zen/ folder.
• The examples below assume zen and your sub-theme will be
installed in sites/all/themes/, but any valid theme directory is
acceptable (see “Getting started” for more info.)
Thursday, June 25, 2009

Our DrupalAustin Mockup Again
DrupalAustin
Header
Home | About | Contact | Projects | Events
Left Center Right
Navigation DrupalAustin’s Been Busy Search
Drupal Austin has been busy lately, making awesome sites.
Menu 1
Drupal Austin has been busy lately, making awesome sites.
Menu 2
Drupal Austin has been busy lately, making awesome sites.
Menu 3
Menu 4
Menu 5 DrupalAustin’s Party
Menu 6 Drupal Austin has been busy lately, making awesome sites.
Menu 7 Drupal Austin has been busy lately, making awesome sites.
Menu 8 Drupal Austin has been busy lately, making awesome sites.
Menu 9
Menu 10
Drupal 7’s UI Overhaul Update
Drupal Austin has been busy lately, making awesome sites.
Drupal Austin has been busy lately, making awesome sites.
Drupal Austin has been busy lately, making awesome sites.
Footer
Thursday, June 25, 2009

3 Column
Fixed Right/Left
Fluid Center
Thursday, June 25, 2009

Zen Layout
Thursday, June 25, 2009

Zen Options
Thursday, June 25, 2009

Step One:
Copy Zen Starter Kit
• Copy the STARTERKIT folder out of the zen/ folder and rename it to
be your new sub-theme.
• IMPORTANT: Only lowercase letters and underscores should be
used for the name of your sub-theme.
• For example, copy the sites/all/themes/zen/STARTERKIT folder and
rename it as sites/all/themes/foo.
• Why? Each theme should reside in its own folder. Unlike in Drupal 5,
sub-themes can (and should) reside in a folder separate from their
base theme.
Thursday, June 25, 2009

Save in sites/all/themes
Thursday, June 25, 2009

Define Base Theme
foo.info file
• base theme = Zen
• style sheets are defined in parent theme
• JavaScript defined in parent theme
• All template *tpl.php files
• Anything defined from the “template.php” file including theme
function overrides, preprocessors or anything else
Thursday, June 25, 2009

Choose Fixed
3 Column Layout
• Copy the layout-fixed.css from the zen/zen folder and place it in
your sub-theme's folder. Rename the layout stylesheet to
"layout.css".
• For example, copy zen/zen/layout-fixed.css and rename it as foo/
layout.css. Note that the .info file already has an entry for your
layout.css file.
• Why? In Drupal 6 theming, if you want to modify a stylesheet
included by the base theme or by a module, you should copy the
stylesheet from the base theme or module's directory to your sub-
theme's directory and then add the stylesheet to your .info file.
See the Drupal 6 Theme Guide for more info.
Thursday, June 25, 2009

Copy Zen Stylesheet
• Copy the zen stylesheet & save in sub-
theme's folder. Rename it.
• zen/zen/zen.css foo/foo.css.
• Your .info file overrides the base theme's
zen.css file.
Thursday, June 25, 2009

Copy HTML-elements
Stylesheet
• Place it in your sub-theme's folder.
• For example, copy zen/zen/html-
elements.css to foo/html-elements.css. Note
that the .info file already has an entry for
your html-elements.css file.
Thursday, June 25, 2009

Edit template.php &
themesettings.php
• Replace ALL occurrences of "STARTERKIT"
with the name of your sub-theme.
• For example, edit foo/template.php and
foo/theme-settings.php and replace
"STARTERKIT" with "foo".
Thursday, June 25, 2009

Enable Your Subtheme!
• # Log in as an administrator on your
Drupal site and go to Administer > Site
building > Themes (admin/build/
themes) and enable your new sub-
theme.
Thursday, June 25, 2009

Customization
• CSS: Most changes can be made just with CSS. You can create
forms.css, for example, just to theme forms. Remember: add this to
your theme’s .info file & clear your cache!
• PHP: Remove the regions you do not need. Zen is pretty good
about not giving you a lot of styling to remove before getting
going.
• jQuery Example: Use to add a class to a tag when hovering on it:
$(this) .hover (
function() {
$ (this) .addClass(‘hover’);
},
function () {
$(this) .removeClass(‘hover’);
Thursday, June 25, 2009

Part 4: Ninja
Tips & Tricks • Tools!
• Preprocessor
Functions
• template.php
• Customizing data
output
• More template files
for more control
Thursday, June 25, 2009

Great Tools For Analyzing
Design
• Firebug Plugin for Firefox
• Gridfox Plugin for Firefox
• Devel Module - Drupal Suite
• Web Developer Plugin, also for Firefox
Thursday, June 25, 2009

Novell Communities
Thursday, June 25, 2009

Firebug:
• “Inspect” page elements
• Edit CSS properties, view edits immediately
• Display Box Model – width, padding,
margins
• JavaScript debugger – pause your scripts
• DOM inspector
Thursday, June 25, 2009

Firebug Plugin
Edit, debug, and monitor CSS, HTML, and JavaScript live
in any web page
Thursday, June 25, 2009

Inspecting IDs in Firebug
Thursday, June 25, 2009

Gridfox - 960px Grid
Thursday, June 25, 2009

Grids
• 960 Grid system http://960.gs/
• Blueprint CSS http://www.blueprintcss.org
• YUI Grids CSS http://developer.yahoo.com/
yui/grids
• 960px Gridded Themes: Four Seasons,
Framework, Hiroshige, Newswire, Sky
Thursday, June 25, 2009

Firebug Lite
• JavaScript
file to
simulate
some Firebug
features in
other
browsers
• http://
getfirebug.c
om/lite.html
Thursday, June 25, 2009

Stealther Firefox Plugin
• Temporarily disables saved
information - caches,
cookies, histories, form
information
• Quickly view how site looks
for users not logged in
• https://
addons.mozilla.org/en-US/
firefox/addon/1306
Thursday, June 25, 2009

Devel Module - Suite for
Theme & Module Dev
• http:/drupal.org/projects/
devel
• Tip: Give all users Devel
Module permissions to clear
the cache without being
logged in. ONLY for
development sites!
• Great for exposing function
calls and elements, including
whether or not the node is a
teaser. This happens to be
boolean.
Thursday, June 25, 2009

Theming for Views
Great way to
keep track of function
calls.
Views is one of the harder
(and more necessary)
modules to theme.
Views can produce all
kinds of lists of content.
Views is basically a SQL
query builder.
Thursday, June 25, 2009

Browsershots.org
• Identify problems in
other browsers
• Multiple screenshots
for troubleshooting
• Takes up to 30
Minutes to generate
the screenshots
Thursday, June 25, 2009

Zotero
• Firefox extension
which allows you to
take a snapshot of a
webpage along
with your notes on it,
take notes on a per
page basis, add
tags to a page,
rename page title
Thursday, June 25, 2009

Design & Web Standards
• http://www.alistapart.com/topics/
• http://www.csszengarden.com/
• http://www.thinkvitamin.com/
• http://www.uxmag.com/
• http://getfirebug.com/
Thursday, June 25, 2009

Modules
• Read the theme section in the module developers guide.
• Modules in Drupal have the capability to allow presentation to be
overridden for use on individual sites – (this process is theming)
• Logic must be separated as much as possible from presentation
• Modules do as much of the work on the data as possible, and
hand that data off to the presentation layer.
• Modules then provide default implementations that provide the
basic presentation and serve as the basis for themes that wish to
provide an alternate presentation.
• Handled through the theme() function, called a “theme hook”
Thursday, June 25, 2009

Drupal API: Node Types
• Most content in Drupal are referred to as nodes; content type and
node type are roughly equivalent. Node attributes that you may
need to know about are:
• nid: the node’s ID.
• vid: the version ID for the node.
• type: basically, the content type, such as a page or blog.
• uid: the author’s user ID.
• status: whether published/visible (= 1) or unpublished/hidden
(= 0).
Thursday, June 25, 2009

For Reference:
Thursday, June 25, 2009

Ways To Contribute
• Clean up XHTML and CSS
• Help create a set of well-named classes to
use across Drupal
• Help create templates that do not yet exist
Thursday, June 25, 2009

Thanks!
• Feel free to ask
questions.
Thursday, June 25, 2009