A presentation given at the December meetup of the North West Drupal User Group (NWDUG) by Phil Norton and Mike Bell.

1. Drupal Theming
December 5th 2012 NWDUG

2. Drupal Themes
Some standard ones:
- Garland/Bartik - Drupal Core
- Zen
- Omega
- Boilerplate
Drupal themes, ordered by popularity:
http://bit.ly/XqhSop

3. Anatomy Of A Drupal Theme

4. <theme name>.info
Required.
Also used for theme specific settings.
name = 'My amazing theme'
description = 'My amazing theme wot is amazing'
core = '7.x'
engine = 'phptemplate'
screenshot = 'screenshot.png'

5. <theme name>.info
Add stylesheets:
stylesheets[all][] = style.css
Add JavaScript:
scripts[] = myscript.js
Control items on theme config page:
features[] = logo

6. Sub themes
Don't hack other themes; create a sub theme.
base theme = garland

7. Templates
node.tpl.php
page.tpl.php
html.tpl.php
block.tpl.php
region.tpl.php
comment.tpl.php
***.tpl.php - defined by a module (eg, Views)

8. Overriding Templates
Don't hack core templates!
To make a custom node template for a content
type.
- Copy node.tpl.php from /modules/node into your template
directory.
- Rename to node--<type>.tpl.php

9. Overriding Templates
Templates can usually be overridden
hierarchically
page.tpl.php
page--node.tpl.php
page--node--2226.tpl.php
block.tpl.php
block--region.tpl.php
block--module-name.tpl.php
block--module-name-delta.tpl.php

10. template.php
Theme specific overrides.
Either by theme name or rendering engine.
For just this theme:
mytheme_breadcrumb($variables)
For this theme an all sub themes:
phptemplate_breadcrumb($variables)

11. Preprocess Hooks
Alter elements before they are sent to a theme
function or template.
hook_preprocess_html(&$variables)
hook_preprocess_page(&$variables)
hook_preprocess_node(&$variables)

12. Themeing from a Module
hook_theme();
Be nice to your themers!
function hook_theme($existing, $type, $theme, $path) {
return array(
'system_date_time_settings' => array(
'render element' => 'form',
'file' => 'system.admin.inc',
),
);
}

13. Regions
Where blocks go.
In your info file:
regions[header] = 'Header'
In your page.tpl.php template:
<?php print render($page['header_nav']); ?>

14. render()
Renders content.
print render($content);
Used with hide() and show().
hide($content['comments']);
print render($content);

15. Theme All The Things!
It is theoretically possible to alter every theme
element in Drupal*

16. * It's probably not a good idea though

17. Tips
Create a subdirectory of templates in your
theme.
If you get stuck turn on the Stark theme to see
the raw HTML being generated.
Think before including JavaScript libraries as
Drupal has a bunch.

18. Tips
When planning a site think about where you
content will go and what blocks go in what
region.
Use $var['theme_hook_suggestions'] in you
preprocess hooks to see what templates are
available.
Use devel themer module to see more
information about what is theming an element.

19. Resources
Drupal.org .info files:
http://drupal.org/node/171205
Drupal themes, ordered by popularity:
http://bit.ly/XqhSop
Questions?

20. Philip Norton && Mike Bell
Blog
http:///www.norton42.org.uk/
http://www.digital006.com
Twitter
@philipnorton42
@mikebell_
#! code
http://www.hashbangcode.com/

21. Before we forget
What subject next?
Next meetup date is 2nd Jan
- Postpone to week after
- Postpone to month after