Grok Drupal (7) Theming - 2011 Feb update

Grok Drupal
Theming
Laura Scott
PINGV
@lauras
#grokd4d

Drupal Design Camp LA 2011

Laura Scott
Creative Director,
Drupal Architect
and Co-Founder
PINGV Creative

"laura s"
drupal.org/user/18973
Drupal since 2004

@lauras

Grok Drupal Theming

Grok means to understand so thoroughly
that the observer becomes a part of the
observed — to merge, blend, intermarry,
lose identity in group experience.

Robert A. Heinlein, Stranger in a Strange Land

<h1 id="title"> Grok Drupal Theming </h1>

<h1 id="title"> Grok Drupal Theming </h1>

How Drupal displays content (templates)

How to start theming

Other things to consider

Assumptions
• You know HTML/xhtml • You don't know PHP
(but if you do, we won't
• You know CSS 2.1 hold it against you)

• You are at least getting • You understand some
to know CSS 3 (or want basic Drupal
to) architecture concepts

• Drupal theming confuses • You want to learn this
or mystiﬁes you

Some PHP required
• Mainly to print pre-deﬁned variables …
e.g., $title (for the page title).
• You can do a lot in the "preprocess" and
"process" functions.
• You can avoid it if it totally scares the living
daylights out of you. Just stick to copy and
paste from '<?php' to '?>'.

HTML5 is coming!

http://groups.drupal.org/html5

Theming for Drupal 7 is
more powerful than
previous versions
...but it's also a bit more complicated.

Anatomy of a Drupal "page"

• xhtml, CSS, bg images

• Content presented via
templates

• JavaScript

The Drupal theme
• CSS files
• Image files
• Template files
• JavaScript files
• .info file
• Preprocess and process new!

• CSS files
• Image files
• Template files
• JavaScript files
• Preprocess and process files
• .info file

Which template?

It depends....

Which template?
page.tpl.php

• logo
• main title
• regions
• footer

and

• other templates

Which template? html.tpl.php
new!
page.tpl.php

• !DOCTYPE
• <head> stuff
• Drupal calls for CSS and JavaScript*
• <body> container

page.tpl.php
node.tpl.php
• node title
• node author
• post date
• node content
• node taxonomy terms
• node links

page.tpl.php
node.tpl.php

comment-wrapper.tpl.php
• Comment area title?
• Comment templates

page.tpl.php
node.tpl.php

comment.tpl.php
• Comment title?
• Comment author
• Comment content
• Comment links

page.tpl.php
node.tpl.php block.tpl.php
• Block title
• Block content

comment.tpl.php

*We'll come back to
this, because there's
one more very
important thing.

Every module's output
also has a template ﬁle.
(In theory.)

42 *.tpl.php ﬁles in D7's /modules folder.

Each can be copied into your theme
and used to override.

The Views UI gives you template code
to override Views output.

One theme might
have dozens of
template ﬁles.

There are only
a few basics.

(It's not rocket science.)

html.tpl.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
"http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php
print $language->language; ?>" version="XHTML+RDFa 1.0"
dir="<?php print $language->dir; ?>"
<?php print $rdf_namespaces; ?>>

html.tpl.php
<head profile="<?php print $grddl_profile; ?>">
<?php print $head; ?>
<title><?php print $head_title; ?></title>
<?php print $styles; ?>
<?php print $scripts; ?>
</head>

html.tpl.php
<head profile="<?php print $grddl_profile; ?>">
<?php print $head; ?>
<title><?php print $head_title; ?></title>
<?php print $styles; ?>
<?php print $scripts; ?>
</head>
<body class="<?php print $classes; ?>" <?php print
$attributes;?>>
<div id="skip-link">
<a href="#main-content" class="element-invisible
element-focusable"><?php print t('Skip to main
content'); ?></a>
</div>
<?php print $page_top; ?>
<?php print $page; ?>
<?php print $page_bottom; ?>
</body>
</html>

page.tpl.php
<div id="page-wrapper"><div id="page">

<div id="header"><div class="section clearfix">

<?php if ($logo): ?>
<a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo">
logo
<img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" />

site name
</a>
<?php endif; ?>

<?php if ($site_name || $site_slogan): ?>
<div id="name-and-slogan">
<?php if ($site_name): ?>
<?php if ($title): ?>

site slogan
<div id="site-name"><strong>
<a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"><span><?php print
$site_name; ?></span></a>
</strong></div>
<?php else: /* Use h1 when the content title is empty */ ?>
<h1 id="site-name">

main menu
<a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"><span><?php print
$site_name; ?></span></a>
</h1>
<?php endif; ?>
<?php endif; ?>

<?php if ($site_slogan): ?>

breadcrumb
<div id="site-slogan"><?php print $site_slogan; ?></div>
<?php endif; ?>
</div> 
<?php endif; ?>

<?php print render($page['header']); ?>

messages
</div></div> 

<?php if ($main_menu): ?>
<div id="navigation"><div class="section">
<?php print theme('links__system_main_menu', array('links' => $main_menu, 'attributes' => array('id' => 'main-menu',
'class' => array('links', 'clearfix')), 'heading' => t('Main menu'))); ?>

highight
</div></div> 
<?php endif; ?>

<?php if ($breadcrumb): ?>
<div id="breadcrumb"><?php print $breadcrumb; ?></div>
<?php endif; ?>

<h1> title
<?php print $messages; ?>

<div id="main-wrapper"><div id="main" class="clearfix">

<div id="content" class="column"><div class="section">

tabs
<?php if ($page['highlight']): ?><div id="highlight"><?php print render($page['highlight']); ?></div><?php endif; ?>
<a id="main-content"></a>
<?php print render($title_prefix); ?>
<?php if ($title): ?><h1 class="title" id="page-title"><?php print $title; ?></h1><?php endif; ?>
<?php print render($title_suffix); ?>
<?php if ($tabs): ?><div class="tabs"><?php print render($tabs); ?></div><?php endif; ?>

help
<?php print render($page['help']); ?>
<?php if ($action_links): ?><ul class="action-links"><?php print render($action_links); ?></ul><?php endif; ?>
<?php print render($page['content']); ?>
<?php print $feed_icons; ?>
</div></div> 

content
<?php if ($page['sidebar_first']): ?>
<div id="sidebar-first" class="column sidebar"><div class="section">
<?php print render($page['sidebar_first']); ?>
</div></div> 
<?php endif; ?>

<?php if ($page['sidebar_second']): ?>
<div id="sidebar-second" class="column sidebar"><div class="section">
<?php print render($page['sidebar_second']); ?>
</div></div> 
feed icons
<?php endif; ?>

</div></div> 

<div id="footer"><div class="section">
<?php print theme('links__system_secondary_menu', array('links' => $secondary_menu, 'attributes' => array('id' =>
sidebars
footer
'secondary-menu', 'class' => array('links', 'clearfix')), 'heading' => t('Secondary menu'))); ?>
<?php print render($page['footer']); ?>
</div></div> 

</div></div>

The Semantic Page
• Logo/branding/site name
• [main nav]*
• <h1> Title (of article, view, blog post, etc.)
• Main content
• Then secondary content (aka "sidebars"),
footer
* and that's debated

<a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"><span><?
php print $site_name; ?></span></a>

page.tpl.php
</h1>
<?php endif; ?>
<?php endif; ?>

<?php endif; ?>
<?php endif; ?>

<?php print theme('links__system_main_menu', array('links' => $main_menu, 'attributes' => array('id'
=> 'main-menu', 'class' => array('links', 'clearfix')), 'heading' => t('Main menu'))); ?>
<?php endif; ?>
<?php endif; ?>
<?php if ($page['highlight']): ?><div id="highlight"><?php print render($page['highlight']); ?></
div><?php endif; ?>
<?php if ($action_links): ?><ul class="action-links"><?php print render($action_links); ?></ul><?php
endif; ?>
<?php endif; ?>
<?php endif; ?>
<?php print theme('links__system_secondary_menu', array('links' => $secondary_menu, 'attributes' =>
array('id' => 'secondary-menu', 'class' => array('links', 'clearfix')), 'heading' => t('Secondary
menu'))); ?>

<a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"><span><?
php print $site_name; ?></span></a>

page.tpl.php
</h1>
<?php endif; ?>
<?php endif; ?>

<?php endif; ?>
<?php endif; ?>

<?php if ($page['highlight']): ?><div id="highlight"><?php print render($page['highlight']); ?></
div><?php endif; ?>
<?php if ($action_links): ?><ul class="action-links"><?php print render($action_links); ?></ul><?php
endif; ?>
<?php endif; ?>
<?php endif; ?>
<?php print theme('links__system_main_menu', array('links' => $main_menu, 'attributes' => array('id'
=> 'main-menu', 'class' => array('links', 'clearfix')), 'heading' => t('Main menu'))); ?>
<?php endif; ?>
<?php endif; ?>
<?php print theme('links__system_secondary_menu', array('links' => $secondary_menu, 'attributes' =>
array('id' => 'secondary-menu', 'class' => array('links', 'clearfix')), 'heading' => t('Secondary
menu'))); ?>

node.tpl.php
<div id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?>
clearfix"<?php print $attributes; ?>>
<?php print $user_picture; ?>
<?php if (!$page): ?>
<h2<?php print $title_attributes; ?>><a href="<?php print $node_url; ?
>"><?php print $title; ?></a></h2>
<?php endif; ?>
<?php if ($display_submitted): ?>
<div class="submitted">
<?php
print t('Submitted by !username on !datetime',
array('!username' => $name, '!datetime' => $date));
?>
</div>
<?php endif; ?>
<div class="content"<?php print $content_attributes; ?>>
<?php
// We hide the comments and links now so that we can render them
later.
hide($content['comments']);
hide($content['links']);
print render($content);
?>
</div>
<?php print render($content['links']); ?>
<?php print render($content['comments']); ?>
</div>

node.tpl.php
<div id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?>
clearfix"<?php print $attributes; ?>>
<?php print $user_picture; ?>
<?php if (!$page): ?>
<h2<?php print $title_attributes; ?>><a href="<?php print $node_url; ?
>"><?php print $title; ?></a></h2>
<?php endif; ?>
<?php if ($display_submitted): ?>
<?php
print t('Submitted by !username on !datetime',
array('!username' => $name, '!datetime' => $date));
?>
</div>
<?php endif; ?>
<?php
// We hide the comments and links now so that we can render them
later.
hide($content['comments']);
?>
</div>
<?php print render($content['links']); ?>
new!
</div>


<div id="comments" class="<?php print $classes; ?>"<?php
print $attributes; ?>>
<?php if ($content['comments'] && $node->type !=
'forum'): ?>
<h2 class="title"><?php print t('Comments'); ?></h2>
<?php endif; ?>


<?php if ($content['comment_form']): ?>
<h2 class="title comment-form"><?php print t('Add
new comment'); ?></h2>
<?php print render($content['comment_form']); ?>
<?php endif; ?>
</div>

comment.tpl.php

<div class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>
<?php print $picture ?>

<?php if ($new): ?>
<span class="new"><?php print $new ?></span>
<?php endif; ?>

<h3<?php print $title_attributes; ?>><?php print $title ?></h3>

<?php print $permalink; ?>
<?php print $submitted; ?>
</div>

<?php
// We hide the comments and links now so that we can render them later.
?>
<?php if ($signature): ?>
<div class="user-signature clearfix">
<?php print $signature ?>
</div>
<?php endif; ?>
</div>

<?php print render($content['links']) ?>
</div>

block.tpl.php

<div id="<?php print $block_html_id; ?>" class="<?php
print $classes; ?>"<?php print $attributes; ?>>

<?php if ($block->subject): ?>
<h2<?php print $title_attributes; ?>><?php print
$block->subject ?></h2>
<?php endif;?>

<div class="content"<?php print $content_attributes; ?
>>
<?php print $content ?>
</div>
</div>

node.tpl.php node.tpl.php

poll-vote.tpl.php poll-results.tpl.php
poll-bar.tpl.php

block.tpl.php block.tpl.php

poll-vote.tpl.php poll-results--block.tpl.php
poll-bar--block.tpl.php

Fields are in core It's nice to
have a home.

ﬁeld.tpl.php

<div class="<?php print $classes; ?> clearfix"<?php
print $attributes; ?>>
<?php if (!$label_hidden) : ?>
<div class="field-label"<?php print
$title_attributes; ?>><?php print $label ?>: </div>
<?php endif; ?>
<div class="field-items"<?php print
$content_attributes; ?>>
<?php foreach ($items as $delta => $item) : ?>
<div class="field-item <?php print $delta % 2 ?
'odd' : 'even'; ?>"<?php print $item_attributes
[$delta]; ?>><?php print render($item); ?></div>
<?php endforeach; ?>
</div>
</div>

html.tpl.php
page.tpl.php

comment.tpl.php

html.tpl.php
page.tpl.php
region.tpl.php

region.tpl.php region.tpl.php


comment.tpl.php

region.tpl.php

region.tpl.php

<?php if ($content): ?>
<div class="<?php print $classes; ?>">
<?php print $content; ?>
</div>
<?php endif; ?>

So if all regions use the same template,
how does Drupal know which region?



<?php print render($page['highlight']); ?>





All regions in your theme must be declared,
or else you get these defaults.

Where the heck are all these templates?

Preprocess

scary
doesn't have to be

Everything is an array
pretty much

So how to go about
creating a theme?

Create a theme from scratch,
making everything

• theme .info ﬁle

• page.tpl.php

• *.tpl.php ﬁles as
needed to override
core

• template.php for your
preprocess and
process

• background images

Sub-themes
inherit
everything from
parent theme,

except what is overridden.

Inheritance

html.tpl.php

page.tpl.php

node.tpl.php

block.tpl.php

Inheritance

html.tpl.php

page.tpl.php page.tpl.php


block.tpl.php

Inheritance

html.tpl.php html.tpl.php

page.tpl.php page.tpl.php


block.tpl.php

Inheritance

base.css base.css

type.css type.css

forms.css

Copy in the base theme

example.com/themes/

example.com/sites/all/themes/basetheme

Create your child theme

example.com/themes/

example.com/sites/all/themes/yourtheme

sites

all

themes

yourtheme

yourtheme.info

template.php

license.txt

css

images

templates

yourtheme.info
name = yourtheme
description = This is where you describe your theme in words.
version = 1.0

; Requirements
base theme = ninesixty
core = 7.x
engine = phptemplate

; Stylesheets
stylesheets[all][] = styles.css
stylesheets[screen][] = styles/base.css
stylesheets[screen][] = styles/layout.css
stylesheets[screen][] = styles/colors.css
stylesheets[screen][] = styles/forms.css
stylesheets[print][] = styles/print.css

; Regions
regions[header] = Header
regions[help] = Help
regions[highlight] = Highlight
regions[content] = Content
regions[page_top] = Page top
regions[page_bottom] = Page bottom
regions[indicators] = Indicators
regions_hidden[] = indicators

; Scripts
scripts[] = script.js
scripts[] = scripts/twitter.js

In Drupal 7,
if you're creating a theme from
scratch, you must now declare
style.css and script.js in your .info
ﬁle, or they will not be included.

Template Suggestions

• Create a base template of that type
• Create variations on it to apply in certain
circumstances
• No coding necessary
http://drupal.org/node/190815

by content type

node.tpl.php

blog node--blog.tpl.php
event node--event.tpl.php
classiﬁed node--classiﬁed.tpl.php
product node--product.tpl.php

by content type
new!
node.tpl.php

blog node--blog.tpl.php
event node--event.tpl.php
classiﬁed node--classiﬁed.tpl.php
product node--product.tpl.php

Delimiters use two: '--'
Words still use one: '-'

event-meeting node--event-meeting.tpl.php

event-party node--event-party.tpl.php

new!

And no longer need
node.tpl.php
in your theme
in order to use
node--event.tpl.php.

new!

Wildcards in tpl names
page--user--42.tpl.php

page--user--%.tpl.php

override all user displays
without affecting /user

new!

.clear-block
is now
.clearﬁx

Alter Hooks

hook_page_alter()
hook_form_alter()
hook_css_alter()
hook_js_alter()

Conditional CSS
still needs trickery
//IE6 overrides
drupal_add_css(
path_to_theme() . '/fix-ie.css', array(
'group' => CSS_THEME,
'browsers' => array(
'IE' => 'lt IE 7',
'!IE' => FALSE
),
'preprocess' => FALSE
)
);

new!

Classes and Attributes
are now standard
and predeﬁned without futzing
(although you can still futz if you want).

<div id="example" class="<?php print $classes; ?>
clearﬁx"<?php print $attributes; ?>>

...

</div>

node.tpl.php

<div id="node-<?php print $node->nid; ?>"
class="<?php print $classes; ?> clearﬁx"<?php print
$attributes; ?>>

...

</div>

Attributes
new!

• $attributes
• $title_attributes for titles
• $content_attributes for content

Be nice to
robots!

photo: Don Solo
ﬂickr.com/photos/donsolo/3950364004/

RDFa
• Robot food
• An entire language
to learn
• Theming just got a
lot more technical

photo: Don Solo
ﬂickr.com/photos/donsolo/3950364004/

Image: Davie60r
ﬂickr.com/photos/davie60r/3274499595/

Robots just want to
Hand over I'm hungry!
your RDF! understand your site.

Hmmmmm….
data…..

Image: bbaltimore
ﬂickr.com/photos/bbaltimore/6778028/

Dance with
them!

It's easy!

Image: Eric__I_E
ﬂickr.com/photos/deadling/256390679/

html.tpl.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa
1.0//EN"
"http://www.w3.org/MarkUp/DTD/xhtml-
rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="<?php print $language->language; ?>"
version="XHTML+RDFa 1.0" dir="<?php print
$language->dir; ?>"

html.tpl.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa
1.0//EN"
"http://www.w3.org/MarkUp/DTD/xhtml-
rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="<?php print $language->language; ?>"
version="XHTML+RDFa 1.0" dir="<?php print
$language->dir; ?>"

<head profile="<?php print $grddl_profile; ?
>">

Do I really need to do
RDFa to use Drupal?

No, you can just ignore
it, and work on the same
level as other systems.
But you'll be missing out.

Photo: FlySi
ﬂickr.com/photos/ﬂysi/183272970/

Attributes

• $attributes
• $title_attributes for titles
• $content_attributes for content

Basics to Remember
• Create your theme in
sites/all/themes/yourtheme
• Copy templates into your theme to make
overrides
• Use template suggestions to break out
distinct structures and stylings
• Use base theme to get a jump on things
• Let Drupal do what it does best

Points of Modiﬁcation

• CSS
• xhtml in the template that applies
• preprocess
• module

Resources
• Drupal 6 » Drupal 7 theming
changes
drupal.org/update/theme/6/7
• Template suggestions
drupal.org/node/190815*

• RDFa
buytaert.net/semantic-web-
and-drupal-video
* Drupal 6

Get Drush!

Yeah yeah yeah, I know, you don't like command line, but this will really really and for true help you save time
developing so that you can spend more time designing and theming, and isn't that what you'd rather do anyway?
Video to make it easy:

http://is.gd/ aZe33

Grok Drupal (7) Theming - 2011 Feb update

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Grok Drupal (7) Theming - 2011 Feb update

Similar to Grok Drupal (7) Theming - 2011 Feb update (20)

Recently uploaded

Recently uploaded (20)

Grok Drupal (7) Theming - 2011 Feb update