Drupal Theming An Introduction

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!


Does Theming Make You Feel
Like This?


Then You Can Probably
Do This:


What Custom Theming
Can Look Like:


If Not,


Some Familiar Themes:

•


Where Do I Get More
Themes? Drupal.org


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


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


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


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


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


Introduction In 4 Parts

• 1. Theme Anatomy
• 2. Basic Build from Static HTML/CSS
• 3. Create a Zen SubTheme
• 4. Tools & Tricks


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


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.


Drupal Theme Stack
PHP Theme PHPTemplate Theme

Don’t Hack These


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


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


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


Directory Structure of
Theme Engines


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


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)


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


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.


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


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()


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.


3 Common
block.tpl.php Template Files
Navigation
Blog Post 1

Who’s Online node.tpl.php

Syndicate Blog Post 2

page.tpl.php


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


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


zen.info
metadata

name = internal theme
name zen.info
description = one
sentence

engine = phptemplate Text
Drupal version, 6.x

CSS stylesheets

Regions

Features


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!)


*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.


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


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
Menu 2
Menu 3
Menu 4
Menu 5 DrupalAustin’s Party
Menu 6 Drupal Austin has been busy lately, making awesome sites.
Menu 9
Menu 10
Drupal 7’s UI Overhaul Update

Footer


Regions: $header, $center, $left,
$right, $footer
DrupalAustin
Header

Left Center Right
Menu 1
Menu 2
Menu 3
Menu 4
Menu 9
Menu 10

Footer


Region: $header

DrupalAustin
Header

Left Center Right
Menu 1
Menu 2
Menu 3
Menu 4
Menu 9
Menu 10

Footer


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 ?>


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.


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.


Region: $left

DrupalAustin
Header

Left Center Right
Menu 1
Menu 2
Menu 3
Menu 4
Menu 9
Menu 10

Footer


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 6</a></li> <?php endif; ?>
<li><a href= “#”>Menu 7</a></li> </div>
</ul>
</div>
</div>

$left: The HTML for the left sidebar


Region: $right

DrupalAustin
Header

Left Center Right
Menu 1
Menu 2
Menu 3
Menu 4
Menu 9
Menu 10

Footer


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


Region: $footer

DrupalAustin
Header

Left Center Right
Menu 1
Menu 2
Menu 3
Menu 4
Menu 9
Menu 10

Footer


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.


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)


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


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!


Part Three:
Create A Subtheme
Base Theme
Parent

Subtheme

Child


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


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


Theme Override Layers
d SubTheme Override Base Theme

c Theme Override

Theme Engine Override
b
Modules
a Core

a: Default Theming Implementation


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


Theme vs. Sub-Theme


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


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


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


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.


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.


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.)


Our DrupalAustin Mockup Again

DrupalAustin
Header

Left Center Right
Menu 1
Menu 2
Menu 3
Menu 4
Menu 9
Menu 10

Footer


3 Column
Fixed Right/Left
Fluid Center


Zen Layout


Zen Options


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.


Save in sites/all/themes


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


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.


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.


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.


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".


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.


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’);


Part 4: Ninja
Tips & Tricks • Tools!
• Preprocessor
Functions

• template.php
• Customizing data
output

• More template files
for more control


Great Tools For Analyzing
Design

• Firebug Plugin for Firefox
• Gridfox Plugin for Firefox
• Devel Module - Drupal Suite
• Web Developer Plugin, also for Firefox


Novell Communities


Firebug:
• “Inspect” page elements
• Edit CSS properties, view edits immediately
• Display Box Model – width, padding,
margins

• JavaScript debugger – pause your scripts
• DOM inspector


Firebug Plugin

Edit, debug, and monitor CSS, HTML, and JavaScript live
in any web page

Inspecting IDs in Firebug


Gridfox - 960px Grid


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


Firebug Lite
• JavaScript
file to
simulate
some Firebug
features in
other
browsers

• http://
getfirebug.c
om/lite.html


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


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.


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.


Browsershots.org
• Identify problems in
other browsers

• Multiple screenshots
for troubleshooting

• Takes up to 30
Minutes to generate
the screenshots


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


Design & Web Standards

• http://www.alistapart.com/topics/
• http://www.csszengarden.com/
• http://www.thinkvitamin.com/
• http://www.uxmag.com/
• http://getfirebug.com/


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”


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).


For Reference:


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


Thanks!
• Feel free to ask
questions.


Drupal Theming An Introduction

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Drupal Theming An Introduction

Ähnlich wie Drupal Theming An Introduction (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Drupal Theming An Introduction