Drupal Theming

   December 5th 2012 NWDUG
Drupal Themes
Some standard ones:
- Garland/Bartik - Drupal Core
- Zen
- Omega
- Boilerplate

Drupal themes, ordered by popularity:
http://bit.ly/XqhSop
Anatomy Of A Drupal Theme
<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'
<theme name>.info
Add stylesheets:

stylesheets[all][] = style.css

Add JavaScript:

scripts[] = myscript.js

Control items on theme config page:

features[] = logo
Sub themes
Don't hack other themes; create a sub theme.

base theme = garland
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)
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
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
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)
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)
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',
    ),
  );
}
Regions
Where blocks go.

In your info file:

regions[header] = 'Header'


In your page.tpl.php template:

<?php print render($page['header_nav']); ?>
render()
Renders content.

print render($content);


Used with hide() and show().

hide($content['comments']);
print render($content);
Theme All The Things!
It is theoretically possible to alter every theme
element in Drupal*
* It's probably not a good idea though
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.
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.
Resources
Drupal.org .info files:
http://drupal.org/node/171205

Drupal themes, ordered by popularity:
http://bit.ly/XqhSop




                 Questions?
Philip Norton && Mike Bell
Blog
http:///www.norton42.org.uk/
http://www.digital006.com

Twitter
@philipnorton42
@mikebell_

#! code
http://www.hashbangcode.com/
Before we forget
What subject next?

Next meetup date is 2nd Jan
- Postpone to week after
- Postpone to month after

Drupal theming