is.gd/3mGND

Where Drupal gets its markup

How to change the markup

Where Drupal gets its markup

How to change the markupWorking with subthemes

Where Drupal gets its markup

How to change the markupWorking with subthemesTheming forms

Where Drupal gets its markup

Color moduleTheme settings

Javascript

Theme hooks

Theme hooks Names or IDs that Drupal uses to call themeable output

Theme hooks Names or IDs that Drupal uses to call themeable output*The* theme function

Theme hooks Names or IDs that Drupal uses to call themeable output*The* theme function Calls themeable output using theme hooks

theme('hook', $arg1, $arg2)

Theme registry Stores the "sequence of events" that happens when a theme hook is called

theme('hook', $arg1, $arg2)

Defined by implementations of

hook_theme()

function node_theme() { return array( 'node' => array( 'arguments' => array( 'node' => NULL, 'teaser' => FALSE, 'page' => FALSE), 'template' => 'node'), 'node_list' => array( 'arguments' => array( 'items' => NULL, 'title' => NULL)));}

function node_theme() { return array( 'node' => array( 'arguments' => array( 'node' => NULL, 'teaser' => FALSE, 'page' => FALSE), 'template' => 'node'), 'node_list' => array( 'arguments' => array( 'items' => NULL, 'title' => NULL)));}

theme hooks

function node_theme() { return array( 'node' => array( 'arguments' => array( 'node' => NULL, 'teaser' => FALSE, 'page' => FALSE), 'template' => 'node'), 'node_list' => array( 'arguments' => array( 'items' => NULL, 'title' => NULL)));}

this one uses a

template file called node.tpl.p

hp

function node_theme() { return array( 'node' => array( 'arguments' => array( 'node' => NULL, 'teaser' => FALSE, 'page' => FALSE), 'template' => 'node'), 'node_list' => array( 'arguments' => array( 'items' => NULL, 'title' => NULL)));}

this one is a function

theme('node_list', $items, $title)

theme('node_list', $items, $title)

theme('node_list', $items, $title)

theme('node_list', $items, $title)

theme('node_list', $items, $title)

theme('node', $node, $teaser, $page)

theme('node', $node, $teaser, $page)

'template' => 'node'

theme('node', $node, $teaser, $page)

node.tpl.php

theme('node', $node, $teaser, $page)

theme('node', $node, $teaser, $page)

theme('node', $node, $teaser, $page)

node-story.tpl.php

theme('node', $node, $teaser, $page)

node.tpl.php

drupal.org/node/173880

Let Drupal know you've added oroverridden a new theme hook with

drupal_rebuild_theme_registry()

Allows you to create theme stacksor a theme hierarchy

Subthemes inherit from parent themes:

Subthemes inherit from parent themes:

Stylesheets

Subthemes inherit from parent themes:

StylesheetsJavascript

Subthemes inherit from parent themes:

StylesheetsJavascriptTheme functions/overrides

Subthemes inherit from parent themes:

StylesheetsJavascriptTheme functions/overridesTheme templates

Subthemes inherit from parent themes:

StylesheetsJavascriptTheme functions/overridesTheme templatesPreprocessors

Subthemes inherit from parent themes:

StylesheetsJavascriptTheme functions/overridesTheme templatesPreprocessors

Subthemes do *not* inherit regions

Benefits of subtheming

Benefits of subthemingEliminate redundant coding for every site

Benefits of subthemingEliminate redundant coding for every siteDevelop themes quicker

Benefits of subthemingEliminate redundant coding for every siteDevelop themes quickerContent separate from "skin"

Benefits of subthemingEliminate redundant coding for every siteDevelop themes quickerContent separate from "skin"Multisite themes can share a base theme

Benefits of subthemingEliminate redundant coding for every siteDevelop themes quickerContent separate from "skin"Multisite themes can share a base themeCan make modular theme "pieces"

In the .info file:

base theme = name

Daisy chain your themes and let the inheritance begin

.info file

global $theme_info

global $theme_info Properties of the current theme

global $theme_info Properties of the current theme

global $base_theme_info

global $theme_info Properties of the current theme

global $base_theme_info Properties of the base theme

global $theme_info Properties of the current theme

global $base_theme_info Properties of the base theme

list_themes()

global $theme_info Properties of the current theme

global $base_theme_info Properties of the base theme

list_themes() Properties of all themes

global $theme_key

global $theme_key Name of the current theme

global $theme_key Name of the current theme (i.e. key in the list_themes() array)

global $theme_path

global $theme_key Name of the current theme (i.e. key in the list_themes() array)

global $theme_path Path to the current theme

global $theme_key Name of the current theme (i.e. key in the list_themes() array)

Universally theming forms

Universally theming forms All form-related theme functions are in includes/form.inc

Theming specific forms

Universally theming forms All form-related theme functions are in includes/form.inc

Theming specific forms Inject markup into forms using the Form API

Universally theming forms All form-related theme functions are in includes/form.inc

function example_theme() { return array( 'user_login' => array( 'arguments' => array('form' => NULL), ), );}

Implement hook_theme()

function example_theme() { return array( 'user_login' => array( 'arguments' => array('form' => NULL), ), );}

Implement hook_theme()

<input type="hidden" name="form_id" id="edit-user-login" value="user_login" />

Get the form_id

function example_user_login($form) {

// Change the form array here

return drupal_render($form);}

Create theme function

Add markup around elements #prefix #suffix

Add markup around elements #prefix #suffix

Add or change element's attributes #attributes

api.drupal.org

Themer developer module (part of Devel)

Drupal 6 JavaScript and jQuery by Matt Butcher

The Internet