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.phppage.tpl.phphtml.tpl.phpblock.tpl.phpregion.tpl.phpcomment.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.phppage--node.tpl.phppage--node--2226.tpl.php

block.tpl.phpblock--region.tpl.phpblock--module-name.tpl.phpblock--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 BellBloghttp:///www.norton42.org.uk/http://www.digital006.com

Twitter@philipnorton42@mikebell_

#! codehttp://www.hashbangcode.com/

Before we forget

What subject next?

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