Grok Drupal (7) Theming

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

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

9$#;"4<($7=#50$=>?@AB

!"#$"%&'()/$0"120%CD$0'E(

$F%C$#;"4%G$'HDE0'E%

"I9%/(JK(#I90$

*+,-.%/$0"120

34"#$"5

C$#;"4%5DI'0%LMM:

67$(89:9

34"#$"5

67$(89:9

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

http://sf2010.drupal.org/conference/sessions




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

!"#$%&"'()*%+,-./01<h1 id="title"> </h1>

!"#$%&"'()*%+,-./01<h1 id="title"> </h1>

How Drupal displays content (templates)

How to start theming

Other things to consider

Assumptions

• You know HTML/xhtml

• You know CSS 2.1

• You are at least getting to know CSS 3 (or want to)

• Drupal theming confuses or mystifies you

• You don't know PHP(but if you do, we won't hold it against you)

• You understand some basic Drupal architecture concepts

• You want to learn this

Some PHP required

• Mainly to print pre-defined 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 '?>'.

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

• .info file

new!

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

What's inside a template?

html.tpl.php

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

http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd


http://www.w3.org/1999/xhtml



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

html.tpl.php







page.tpl.php

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"> <img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" /> </a> <?php endif; ?>

<?php if ($site_name || $site_slogan): ?> <div id="name-and-slogan"> <?php if ($site_name): ?> <?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"> <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): ?> <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"> <?php print theme('links__system_main_menu', array('links' => $main_menu, 'attributes' => array('id' => 'main-menu', 'class' => array('links', 'clearfix')), 'heading' => t('Main menu'))); ?> </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">

<div id="content" class="column"><div class="section"> <?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; ?> <?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>  <?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' => 'secondary-menu', 'class' => array('links', 'clearfix')), 'heading' => t('Secondary menu'))); ?> <?php print render($page['footer']); ?> </div></div> 

</div></div> 

logosite namesite sloganmain menubreadcrumb

messages

highight<h1> title

tabshelp

content

sidebarsfooter

sidebarsfeed icons

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

<div id="page-wrapper"><div id="page">







page.tpl.php



<?php print $messages; ?> <div id="main-wrapper"><div id="main" class="clearfix"> <div id="content" class="column"><div class="section"> <?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; ?> <?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>  <?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> 










page.tpl.php













page.tpl.php






node.tpl.php

node.tpl.php

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

<?php print $user_picture; ?>

<?php print render($title_prefix); ?> <?php if (!$page): ?> <h2<?php print $title_attributes; ?>><a href="<?php print $node_url; ?>"><?php print $title; ?></a></h2> <?php endif; ?> <?php print render($title_suffix); ?>

<?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 print render($title_prefix); ?> <?php if (!$page): ?> <h2<?php print $title_attributes; ?>><a href="<?php print $node_url; ?>"><?php print $title; ?></a></h2> <?php endif; ?> <?php print render($title_suffix); ?>

<?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']); ?>


</div>

new!

block.tpl.php

block.tpl.php

<div id="block-<?php print $block->module . '-' . $block->delta; ?>" class="<?php print $classes; ?>"<?php print $attributes; ?>>

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

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

block.tpl.php

<div id="block-<?php print $block->module . '-' . $block->delta; ?>" class="<?php print $classes; ?>"<?php print $attributes; ?>>

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

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

comment-wrapper.tpl.php

comment-wrapper.tpl.php

<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

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

<?php print render($title_prefix); ?> <h3<?php print $title_attributes; ?>><?php print $title ?></h3> <?php print render($title_suffix); ?>

<div class="submitted"> <?php print $permalink; ?> <?php print t('Submitted by !username on !datetime.', array('!username' => $author, '!datetime' => $created)); ?> </div>

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

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

polls

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 tohave a home.

field.tpl.php

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

page.tpl.php

node.tpl.php

comment-wrapper.tpl.phpcomment.tpl.php

block.tpl.php

html.tpl.php

page.tpl.php

node.tpl.php

comment-wrapper.tpl.phpcomment.tpl.php

block.tpl.php

html.tpl.php

region.tpl.php

region.tpl.php region.tpl.php

region.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['content']); ?>

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

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

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

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

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

scaryPreprocessdoesn't have to be

!"!#$%&!"!#$%&

'&()*+#',-./0,&-'&()*+#',-./0,&-

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

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

May I recommend....PHP for Drupal Designers,

by Emma Jane Hogbindesigntotheme.com

So how to go about creating a theme?

• theme .info file

• page.tpl.php

• *.tpl.php files as needed to override core

• template.php for your preprocess and postprocess

• background images

Create a theme from scratch, making everything

or make a baby!

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

base.css

Inheritance

style.css

forms.css

style.css

base.css

page.tpl.php

Inheritance

node.tpl.php

block.tpl.php

node.tpl.php

page.tpl.php

Many good base themes

• AdaptiveTheme

• Basic

• Blueprint

• Framework

• Fusion

• Genesis

• Mobile

• NineSixty

• Stark

• Studio

• Zen

Create your theme

example.com/themes/

Create your theme

example.com/themes/

example.com/sites/all/themes/yourtheme

yourtheme.info

yourtheme.info

name = yourthemedescription = This is where you describe your theme in words.version = 1.0

; Requirementsbase theme = ninesixtycore = 7.xengine = phptemplate

; Stylesheetsstylesheets[screen][] = styles/base.cssstylesheets[screen][] = styles/layout.cssstylesheets[screen][] = styles/colors.cssstylesheets[screen][] = styles/forms.cssstylesheets[print][] = styles/print.css

; Regionsregions[header] = Headerregions[help] = Helpregions[highlight] = Highlightregions[content] = Contentregions[page_top] = Page topregions[page_bottom] = Page bottomregions[indicators] = Indicatorsregions_hidden[] = indicators

; Scriptsscripts[] = scripts/twitter.js

yourtheme.info

name = yourthemedescription = This is where you describe your theme in words.version = 1.0

; Requirementsbase theme = ninesixtycore = 7.xengine = phptemplate

; Stylesheetsstylesheets[screen][] = styles/base.cssstylesheets[screen][] = styles/layout.cssstylesheets[screen][] = styles/colors.cssstylesheets[screen][] = styles/forms.cssstylesheets[print][] = styles/print.css

; Regionsregions[header] = Headerregions[help] = Helpregions[highlight] = Highlightregions[content] = Contentregions[page_top] = Page topregions[page_bottom] = Page bottomregions[indicators] = Indicatorsregions_hidden[] = indicators

; Scriptsscripts[] = scripts/twitter.js

new!

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




blogeventclassifiedproduct

by content type

node--blog.tpl.phpnode--event.tpl.phpnode--classified.tpl.phpnode--product.tpl.php

node.tpl.php


blogeventclassifiedproduct

by content type

node--blog.tpl.phpnode--event.tpl.phpnode--classified.tpl.phpnode--product.tpl.php

node.tpl.php new!

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

event-meeting

event-party

node--event-meeting.tpl.php

node--event-party.tpl.php

Be nice to robots!

photo: Don Soloflickr.com/photos/donsolo/3950364004/

photo: Don Soloflickr.com/photos/donsolo/3950364004/

• Robot food

• An entire language to learn

• Theming just got a lot more technical

RDFa

Image: Davie60rflickr.com/photos/davie60r/3274499595/

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

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

Hmmmmm…. data…..

Hand over your RDF!

It's easy!

Image: Eric__I_Eflickr.com/photos/deadling/256390679/

Dance withthem!

http://www.flickr.com/photos/deadling/

http://www.flickr.com/photos/deadling/


html.tpl.php








html.tpl.php








html.tpl.php








html.tpl.php








html.tpl.php







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

Points of Modification

• CSS

• xhtml in the template that applies

• preprocess

• module

Basics to Remember

• Create your theme insites/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 changesdrupal.org/update/theme/6/7

• Template suggestionsdrupal.org/node/190815*

• RDFabuytaert.net/semantic-web-and-drupal-video

* Drupal 6

http://drupal.org/update/theme/6/7








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

@lauras #d4dgrokrarepattern.com/contact

©2010 Laura Scott

Questions?

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

Feedback is good!@lauras #grokd4d