Grok Drupal (7) Theming

Grok Drupal Theming

Laura ScottPINGV

@lauras#grokd4d

Drupal Design Camp LA 2011

"laura s"drupal.org/user/18973

Laura ScottCreative Director, Drupal Architect and Co-FounderPINGV Creative

@lauras

Drupal since 2004

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

Grok Drupal Theming<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 '?>'.

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

• other templates

html.tpl.php

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

node.tpl.php

• node title• node author• post date• node content• node taxonomy terms• node links

html.tpl.php

node.tpl.php

comment-wrapper.tpl.php

• Comment area title?• Comment templates

html.tpl.php

node.tpl.php

comment-wrapper.tpl.phpcomment.tpl.php• Comment title?• Comment author• Comment content• Comment links

html.tpl.php

node.tpl.php

comment-wrapper.tpl.phpcomment.tpl.php

block.tpl.php

• Block title• Block content

html.tpl.php

*We'll come back to this, because there's

one more very important thing.

Every module's output also has a template file.

(In theory.)

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

Each can be copied into your themeand used to override.

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

Drupal 6 example

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

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

html.tpl.php

page.tpl.php

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

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

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

site name

site slogan

main menu

breadcrumb

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 secondary content (aka "sidebars"), footer

* and that's debated

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

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

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

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

<?php print render($content['comments']); ?>

</div>

node.tpl.php

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

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

</div>

comment-wrapper.tpl.php

<div id="comments" class="<?php print $classes; ?>"<?php print $attributes; ?>> <?php if ($content['comments'] && $node->type != 'forum'): ?> <?php print render($title_prefix); ?> <h2 class="title"><?php print t('Comments'); ?></h2> <?php print render($title_suffix); ?> <?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; ?>

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

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

block.tpl.php

<div id="<?php print $block_html_id; ?>" 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); ?>

block.tpl.php

<div id="<?php print $block_html_id; ?>" 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); ?>

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

<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

block.tpl.php

html.tpl.php

page.tpl.php

node.tpl.php

block.tpl.php

html.tpl.php

region.tpl.php

region.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['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

scaryPreprocessdoesn't have to be

Everything is an arraypretty much

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 process

• background images

Create a theme from scratch, making everything

or make a baby!

Sub-themesinherit everything from parent theme,

except what is overridden.

page.tpl.php

Inheritance

node.tpl.php

block.tpl.php

html.tpl.php

page.tpl.php

Inheritance

node.tpl.php

block.tpl.php

node.tpl.php

page.tpl.php

html.tpl.php

page.tpl.php

Inheritance

node.tpl.php

block.tpl.php

node.tpl.php

page.tpl.php

html.tpl.php html.tpl.php

base.css

Inheritance

type.css

forms.css

type.css

base.css

Many good base themes

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

themes

yourtheme

images

templates

yourtheme.info

template.php

license.txt

yourtheme.info

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

; Requirementsbase theme = ninesixtycore = 7.xengine = phptemplate

; Stylesheetsstylesheets[all][] = styles.cssstylesheets[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[] = script.jsscripts[] = 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 file, 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

classified

product

by content type

node--blog.tpl.php

node--event.tpl.php

node--classified.tpl.php

node--product.tpl.php

node.tpl.php

classified

product

by content type

node--blog.tpl.php

node--event.tpl.php

node--classified.tpl.php

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

And no longer need node.tpl.php

in your themein order to use

node--event.tpl.php.

Wildcards in tpl names

page--user--42.tpl.php

page--user--%.tpl.php

override all user displayswithout affecting /user

.clear-blockis now.clearfix

Alter Hooks

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

Conditional CSS still needs trickery

//IE6 overridesdrupal_add_css( path_to_theme() . '/fix-ie.css', array( 'group' => CSS_THEME, 'browsers' => array( 'IE' => 'lt IE 7', '!IE' => FALSE ), 'preprocess' => FALSE ) );

Classes and Attributes are now standard

and predefined without futzing(although you can still futz if you want).

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

</div>

node.tpl.php

Attributes

• $attributes

• $title_attributes for titles

• $content_attributes for content

<h2<?php print $title_attributes; ?>>...</h2>

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

</div>

Be nice to robots!

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

• Robot food

• An entire language to learn

• Theming just got a lot more technical

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!

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/

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 Modification

• CSS

• xhtml in the template that applies

• preprocess

• module

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

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

@laurasrarepattern.com/contact

Questions?

@lauras

Grok Drupal (7) Theming - 2011 Feb update

Technology

Theming En Drupal

Drupal 8 theming deep dive

Responsive web design - Drupal theming

Drupal 7 Theming - what's new

Forensic Theming for Drupal

Demystifying drupal 7 theming

Drupal Theming Introduction

Deep into Drupal Theming Layer

Drupal 7 Theming

Drupal - theming (tips)

Drupal 8 theming

Theming Drupal 6.x Forms

Drupal Theming Hans Rossel

Drupal 6 Theming

Drupal 8 introduction to theming

Introduction to Drupal (7) Theming

drupal 8 theming copy - Drupal Groups copy.pdfRecursos - 27 Questions (and Answers) from My First Drupal 8 Site Build - Presentation: Drupal 8 Theming

Sustainable Drupal Theming with Fusion

Drupal 7 ninja theming