Date post: | 28-Jan-2015 |
Category: |
Technology |
Upload: | laura-scott |
View: | 114 times |
Download: | 2 times |
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>
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
and
• other templates
Which template?page.tpl.php
html.tpl.php
• !DOCTYPE• <head> stuff• Drupal calls for CSS and JavaScript*• <body> container
new!
Which template?page.tpl.php
node.tpl.php
• node title• node author• post date• node content• node taxonomy terms• node links
html.tpl.php
Which template?page.tpl.php
node.tpl.php
comment-wrapper.tpl.php
• Comment area title?• Comment templates
html.tpl.php
Which template?page.tpl.php
node.tpl.php
comment-wrapper.tpl.phpcomment.tpl.php• Comment title?• Comment author• Comment content• Comment links
html.tpl.php
Which template?page.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
Drupal 6 example
Drupal 6 example
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
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; ?>>
<!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; ?>>
<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
<!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; ?>>
<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>
html.tpl.php
<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
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> <!-- /#name-and-slogan --> <?php endif; ?>
<?php print render($page['header']); ?>
</div></div> <!-- /.section, /#header -->
<?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> <!-- /.section, /#navigation --> <?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> <!-- /.section, /#content -->
<?php if ($page['sidebar_first']): ?> <div id="sidebar-first" class="column sidebar"><div class="section"> <?php print render($page['sidebar_first']); ?> </div></div> <!-- /.section, /#sidebar-first --> <?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> <!-- /.section, /#sidebar-second --> <?php endif; ?>
</div></div> <!-- /#main, /#main-wrapper -->
<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> <!-- /.section, /#footer -->
</div></div> <!-- /#page, /#page-wrapper -->
logo
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
<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> <!-- /#name-and-slogan --> <?php endif; ?>
<?php print render($page['header']); ?>
</div></div> <!-- /.section, /#header -->
page.tpl.php
<?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> <!-- /.section, /#navigation --> <?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> <!-- /.section, /#content --> <?php if ($page['sidebar_first']): ?> <div id="sidebar-first" class="column sidebar"><div class="section"> <?php print render($page['sidebar_first']); ?> </div></div> <!-- /.section, /#sidebar-first --> <?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> <!-- /.section, /#sidebar-second --> <?php endif; ?> </div></div> <!-- /#main, /#main-wrapper -->
<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> <!-- /.section, /#footer -->
</div></div> <!-- /#page, /#page-wrapper -->
<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> <!-- /#name-and-slogan --> <?php endif; ?>
<?php print render($page['header']); ?>
</div></div> <!-- /.section, /#header -->
page.tpl.php
<?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> <!-- /.section, /#navigation --> <?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> <!-- /.section, /#content --> <?php if ($page['sidebar_first']): ?> <div id="sidebar-first" class="column sidebar"><div class="section"> <?php print render($page['sidebar_first']); ?> </div></div> <!-- /.section, /#sidebar-first --> <?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> <!-- /.section, /#sidebar-second --> <?php endif; ?> </div></div> <!-- /#main, /#main-wrapper -->
<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> <!-- /.section, /#footer -->
</div></div> <!-- /#page, /#page-wrapper -->
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']); ?>
<?php print render($content['comments']); ?>
</div>
new!
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'): ?> <?php print render($title_prefix); ?> <h2 class="title"><?php print t('Comments'); ?></h2> <?php print render($title_suffix); ?> <?php endif; ?>
<?php print render($content['comments']); ?>
<?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 $submitted; ?> </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>
block.tpl.php
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); ?>
<div class="content"<?php print $content_attributes; ?>> <?php print $content ?> </div></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); ?>
<div class="content"<?php print $content_attributes; ?>> <?php print $content ?> </div></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
new!
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['header']); ?>
<?php print render($page['header']); ?>
<?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
all
sites
themes
yourtheme
css
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
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.
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
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
Template Suggestions
blog
event
classified
product
by content type
node--blog.tpl.php
node--event.tpl.php
node--classified.tpl.php
node--product.tpl.php
node.tpl.php
Template Suggestions
blog
event
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.
new!
Wildcards in tpl names
page--user--42.tpl.php
page--user--%.tpl.php
override all user displayswithout affecting /user
new!
.clear-blockis now.clearfix
new!
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).
new!
<div id="example" class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>
...
</div>
<div id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>
...
</div>
node.tpl.php
Attributes
• $attributes
• $title_attributes for titles
• $content_attributes for content
new!
<div id="example" class="<?php print $classes; ?>"<?php print $attributes; ?>>
<h2<?php print $title_attributes; ?>>...</h2>
<div class="content"<?php print $content_attributes; ?>>...
</div>
</div>
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!
<!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
<!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
<!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
<!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
<!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
<!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; ?>>
<head profile="<?php print $grddl_profile; ?>">
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
©2010 Laura Scott
Questions?
@lauras