power theming
DESCRIPTION
TRANSCRIPT
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