introduction to drupal (7) theming
DESCRIPTION
Introduction to Drupal Theming. Given at DrupalCamp Edinburgh (UK) 21 May 2011TRANSCRIPT
Theming in Drupal
An introduction to theming !with a little Drupal 7 twist!
!Drupal Camp Edinburgh May 2011!
Rob Carr @robertgcarr!
What’s covered…
Prereqs.!Theming concepts.!Theme components.!Hardcore.!Tools.!
Pre-requisites for Theming Adventures
HTML.!CSS.!Basics of Drupal.!Some idea of PHP.!
‘Some idea of PHP:’
• Print variables!• Logic (if… then)!• Call functions!
For the braver: Arrays and Objects knowledge useful
Theming Options
Core theme!Off the Shelf:!• Contributed (d.o)!• Purchase!Scratch (hardcore!)!Sub-theme!!
Garland!!
Bartik!!
Seven!!
Stark!Never hack
a theme
Sub Theme?
Select [base] theme.!Override elements you don’t like.!Add custom PHP snippets, HTML, CSS or JS.!
Base theme!
Sub theme!(your custom code)"
Never hack a theme
What is a Theme?
A folder full of code:!• Manifest (.info)"
• Templates (.tpl.php)"
• Styles (.css)"
• Logic (template.php)"
• JavaScript (.js)""
Custom themes live in: /sites/all/themes/
themename
Manifest: yourtheme.info
Theme description.!Requirements.!Stylesheets.!Regions.!Scripts.!(Features).!(Settings).!
; DESCRIPTION name = yourtheme descrip=on = A flexible, simple custom theme based on Bar=k. ; REQUIREMENTS core = 7.x base theme = bar=k ; STYLESHEETS stylesheets[all][] = layout.css stylesheets[all][] = style.css stylesheets[print][] = print.css ; REGIONS regions[header] = Header regions[help] = Help regions[page_top] = Page top regions[page_boSom] = Page boSom regions[highlighted] = Highlighted regions[naviga=on] = Naviga=on regions[content] = Content regions[sidebar_first] = Sidebar first regions[sidebar_second] = Sidebar second regions[footer] = Footer ; SCRIPTS scripts[] = scripts.js
CSS
Cascading Style Sheets – inherit or override!
Regions
; REGIONS regions[header] = Header regions[help] = Help regions[page_top] = Page top regions[page_boSom] = Page boSom regions[highlighted] = Highlighted regions[naviga=on] = Naviga=on regions[content] = Content regions[sidebar_first] = Sidebar first regions[sidebar_second] = Sidebar second regions[footer] = Footer
Templating
Templates html.tpl.php – master template; includes <HEAD> content.!!page.tpl.php – layout of all <BODY> content.!!node.tpl.php – individual nodes (pieces of content).!
html.tpl.php"
node.tpl.php"
field.tpl.php"
page.tpl.php"
block.tpl.php"
block.tpl.php"region.tpl.php"
region.tpl.php"
region.tpl.php"
html.tpl.php
Theme: Sky (HTML5 theme)
html.tpl.php – Generated
Template variables
$page – rendered page content – page.tpl.php
page.tpl.php
page.tpl.php variables
http://api.drupal.org/api/drupal/modules--system--page.tpl.php/7"
<?php if ($site_slogan): ?> <h2 class="site-‐slogan"><?php print $site_slogan; ?></h2> <?php endif; ?>
page.tpl.php regions
<?php print render($page[region_name]); ?>
The array $page contains all region content for that particular page"
node.tpl.php Renders the content of a node and all its components:!• Title!• Main body!• Author!• Links (taxonomy etc)!• Comments!
Different Content (node) types Node type:!• Article!• Blog!• Event!• Project!
Template:"• node--article.tpl.php"• node--blog.tpl.php"• node--event.tpl.php"• node--project.tpl.php"
Don’t have to define node.tpl.php to have
nodetype-specific templates It’s a
double --
Sub Theming - Templates
You don’t have to define every single template if it doesn’t need changing.!
Base theme Your theme
html.tpl.php"
page.tpl.php" page.tpl.php"
node.tpl.php" node.tpl.php"
Templates… and finally You can also create tpl.php files for Views. !!Edit View > Advanced > > Information!
Templates… and finally
You can also create tpl.php files for Views too. !!Edit View > Advanced > > Information!
Logic
Q. Where does the HTML contents of the variables come from?!!A. theme()!
We can override this HTML output by altering any
themable function and even add our
own variables"
theme() 1. Menu system receives
page request.!2. Node data built and
template applied.!3. Node HTML
generated.!4. Preprocessing to
generate HTML for blocks in each region.!
5. Page template applied.!
Example - Breadcrumb
How Drupal Outputs Breadcrumb Drupal looks for:!1. yourtheme_breadcrumb().!2. sites/all/themes/yourtheme/breadcrumb.tpl.php!3. theme_breadcrumb().!
Generates (example):""Home » contact us"
Overide theme_breadcrumb()
Example:""Home » contact us"
Becomes:""Home → contact us"
A home for our theme function:
Any custom theme functions live in:!!!!And so much more…!
sites/all/themes/yourtheme/template.php
template.php
Contains function overrides and can add/replace template variables for our theme.!!!Examples:!yourtheme_preprocess_page(&$vars)"yourtheme_preprocess_html(&$vars)"
<theme name>_preprocess_<template name>
Add variable example
Insert into template.php:!!!!Add to node.tpl.php:!!!Clear the cache…!
Add variable example
Insert into template.php:!!!!Add to node.tpl.php:!!!Clear the cache…!
Clear caches"
Congrats! You’ve now built a theme!!!But what next: how can I keep tweaking?!
Tools Firebug (Plugin for FF, Firebug-Lite for others)!IE Developer!
Drupal Functions Drupal API: !http://api.drupal.org/!!Contrib Modules API: http://drupalcontrib.org/api/drupal!
!
Template Variables HTML: http://api.drupal.org/api/drupal/modules--system--html.tpl.php/7!!Page: http://api.drupal.org/api/drupal/modules--system--page.tpl.php/7!!Node: http://api.drupal.org/api/drupal/modules--node--node.tpl.php/7!!
The Killer App! Theme Developer Module http://drupal.org/project/devel_themer!!See also Drupal for Firebug (a bit hardcore)!http://drupal.org/project/drupalforfirebug!!
The Killer App! Theme Developer Module http://drupal.org/project/devel_themer!!See also Drupal for Firebug (a bit hardcore)!http://drupal.org/project/drupalforfirebug!!
Top Tip:
Never eat �yellow snow �
Top Tip:
Never eat �yellow snow �
/admin/config/development/performance/
(‘Clear all caches’)
Or
drush cc all
"
Clear the caches!
Drupal 6
Well I mastered theming in Drupal 6, but what changed when Drupal 7 was released?!!Too much to talk about here, but a great list is at:!http://drupal.org/update/themes/6/7!
Packt – Drupal 7 Themes
Only hard copy book available at time of presentation - published June 2011!!
Again!
We covered the basics:!• Theme components !• Templates!• Overriding theme()!• Tools!• Reference!
FIN