Grok Drupal (7) Theming

!"#$%&"'()*%+,-./01
!"#$"%&'()
*+,-.%/$0"120
34"#$"5 67$(89:9

!"#$"%&'() $#;"4%G$'HDE0'E%
/$0"1 20%CD$0'E($F%C
"I9 %/(JK(#I90$
* +,-.%/$0"120

9$#;"4<($7=#50$
=>?@AB
C$#;"4%5DI'0%LMM:

34"#$"5
67$(89:9

34"#$"5
67$(89:9

http://sf2010.drupal.org/
node/add/eval/8278

More on Drupal
Theming this week
• Theming with Skinr! (Jacine Rodriguez) —
Right after this session, right here in this
room.
• All your html are belong to us (Morten) —
Wednesday at 4:15pm.
• Sprint on Thursday — Free! Open! Friendly!

!"#$%&"'()*%+,-./01

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"> !"#$%&"'()*%+,-./01 </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
basic Drupal
to know CSS 3 (or want
to) architecture concepts

• Drupal theming confuses • You want to learn this
or mystifies you

Some PHP required

• Mainly to printthe page title).
e.g., $title (for
pre-defined variables …

• You can do a lot in the "preprocess" and
"process" functions.
• You can avoidof you. totally scarescopy living
daylights out
it if it
Just stick to
the
and
paste from '<?php' to '?>'.

Drupal 7 is more
complex than Drupal 6
...but it's also more simple

Anatomy of a Drupal "page"

• xhtml, CSS, images

• Content presented via
templates

• JavaScript

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

• .info file

Which template?

It depends....

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

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

Each can be copied and used to override.

One theme
might have
dozens of
template files.

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"><?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
logo
<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">
<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): ?>

site slogan
<?php if ($title): ?>
<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; ?>

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

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

</div></div> 

<?php if ($main_menu): ?>
<div id="navigation"><div class="section">
messages
<?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; ?>

<?php print $messages; ?>

<div id="main-wrapper"><div id="main" class="clearfix"> <h1> title
<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); ?>

help
<?php if ($tabs): ?><div class="tabs"><?php print render($tabs); ?></div><?php endif; ?>
<?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> 

<?php if ($page['sidebar_first']): ?>
<div id="sidebar-first" class="column sidebar"><div class="section">
<?php print render($page['sidebar_first']); ?>
</div></div> 
content
feed icons
<?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> 
<?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 sidebar(s), 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; ?>
<div id="main-wrapper"><div id="main" class="clearfix">
<?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; ?>

<div id="main-wrapper"><div id="main" class="clearfix">
<?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>

block.tpl.php

<div id="block-<?php print $block->module . '-' .
$block->delta; ?>" 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>

comment-wrapper.tpl.php

<div id="comments" class="<?php print $classes; ?>"<?php
<?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 t('Submitted by !username on !datetime.',
array('!username' => $author, '!datetime' => $created));
?>
</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>

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.

field.tpl.php

<div class="<?php print $classes; ?> clearfix"<?php
<?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
node.tpl.php block.tpl.php

comment.tpl.php

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

region.tpl.php region.tpl.php

node.tpl.php block.tpl.php

comment.tpl.php

region.tpl.php

region.tpl.php

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

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?

example.com/modules
BUT DON'T EDIT THEM THERE!

Preprocess
doesn't have to be

scary

May I
recommend.... !"!#$%&
'&()*+#',-./0,&-
PHP for Drupal Designers,
by Emma Jane Hogbin
!"#$%%&#'&()#*+,-.(#
!""#$%!&'()*+*,!"!-.+"!"!///-%!&'()*+*,!"!-.+"!

designtotheme.com

So how to go about
creating a theme?

Create a theme from scratch,
making everything

• theme .info file
• page.tpl.php
• *.tpl.php files as
needed to override
core
• template.php for your
preprocess and
postprocess
• background images

Sub-themes
inherit everything from parent theme,
except what is overridden.

Inheritance

base.css base.css

style.css style.css

forms.css

Inheritance

page.tpl.php page.tpl.php

node.tpl.php node.tpl.php

block.tpl.php

Many good base
themes
• AdaptiveTheme
• Basic • NineSixty
• Blueprint • Stark
• Framework • Studio
• Fusion • Zen
• Genesis
• Mobile

Create your theme

example.com/themes/

Create your theme

example.com/themes/
example.com/sites/all/themes/yourtheme

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[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[] = scripts/twitter.js

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[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 new!
regions_hidden[] = indicators

; Scripts
scripts[] = scripts/twitter.js

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
classified node--classified.tpl.php
product node--product.tpl.php

by content type
new!
node.tpl.php

blog node--blog.tpl.php
event node--event.tpl.php
classified node--classified.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

Be nice to
robots!

photo: Don Solo
flickr.com/photos/donsolo/3950364004/

RDFa
• Robot food
• Anlearn language
to
entire

• Theming just got a
lot more technical

photo: Don Solo
flickr.com/photos/donsolo/3950364004/

Image: Davie60r
flickr.com/photos/davie60r/3274499595/

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

Hmmmmm….
data…..

Image: bbaltimore
flickr.com/photos/bbaltimore/6778028/

Dance with
them!

It's easy!

Image: Eric__I_E
flickr.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; ?>"

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
flickr.com/photos/flysi/183272970/

Points of Modification

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

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

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/ a Ze 3 3

Questions?

Feedback is good!
@lauras #grokd4d
http://sf2010.drupal.org/
node/add/eval/8278

Grok Drupal (7) Theming

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Grok Drupal (7) Theming

Similar to Grok Drupal (7) Theming (20)

Recently uploaded

Recently uploaded (20)

Grok Drupal (7) Theming