This document discusses theming in Drupal. It begins by explaining the basic components of a Drupal theme, including template files, CSS, and the model-view-controller architecture. It then provides tips for building out a flexible base theme, such as starting simple, using template suggestions, and implementing preprocessing. The document also demonstrates how to add theme settings, create a base feature structure, and put all the components together. Finally, it analyzes a case study of a theme for the EERE website and encourages leveraging preprocessing, overrides, and settings while keeping logic out of templates.

1. Theming Drupal
Beyond the Look and Feel

2. Chris Albrecht
Drupal Developer
National Renewable Energy Lab
Since Drupal 6.20 (2 years, 3 months)
Living Drupal
Since Drupal 5.2 (5 years, 7 months)
Contributed modules, developed
themes, managed projects, configured
servers, …

3. Getting Started
 New to Drupal
 Three basic templates
 Flat HTML files
 Strict enterprise standards
 508 compliance
 Need reusable themes
 Built-in standards and structure

4. What Makes a Theme?
 Markup + CSS
Module
Retrieves data
 Markup lives in template files and theme from database.
functions
 Data is pushed in, final markup returned (Pre)processor
Applies logic and
 In between are preprocessors and manipulates data.
processors
 MVC architecture Template
 Model = Modules Renders markup
implementing data
 Controller = (Pre)processors
where needed.
 View = Themes/Templates

5. Building Out a Theme
 One theme to rule them all?
 Build a flexible base theme
 Start simple
 Locate desired template file
 Devel Themer
http://drupal.org/project/devel_themer
 Copy template to your theme and alter it
 Use (pre)processors to manipulate the data

6. Template Patterns
 Look for double underscores
or double hyphens
 Allows for fallback
 Extends flexibility
 Provides specific themable
instances
 Views uses these extensively

7. *
Implementation of template_preprocess().
*
Implementation of template_preprocess().
nction THEME_preprocess_page(&$vars) {
(Pre)processing Data
/ Generate CSS classes relating to content
f (!empty($vars[‘page’][‘topnav’])) { $hook) {
nction THEME_preprocess(&$vars,
$vars[‘body_classes’][] = ‘topnav’;
 Preprocessors vs Processors  Extend the processors
nction THEME_process(&$vars, $hook) {
 Order of implementation  Add template suggestions
 What gets processed?  Adjust styles
template.php
/**
* Implementation of template_preprocess().
*/
function THEME_preprocess_page(&$vars) {
Alter the page data for node 100
// Add a printable template
(in_array(‘page__node__100’, $vars[‘theme_hook_suggestions’])) {
if (isset($_GET[‘print’])) {
$vars[‘theme_hook_suggestions’][] = ‘page__printable’;
...
}
}

8. Adding Theme Settings
 theme_settings.php
hook_form_system_theme_settings_alter()
 Defaults in .info file
 Use theme settings in processors
$form[‘color_scheme’] = array(
name = My Theme
/**
core = 7.x ‘radios’, template_preprocess().
*‘#type’ =>
Implementation of
‘#title’ => t(‘Color Scheme’),
*/
; Stylesheets array(
‘#options’ =>
function THEME_preprocess_html(&$vars) {
//‘green’ => t(‘Green’), this color scheme.
Add the stylesheet for
; Settings t(‘Blue’),
‘blue’ =>
$color_scheme = theme_get_setting(‘color_scheme’);
drupal_add_css(path_to_theme() . ‘/css/’ . $color_scheme . ‘.css’);
settings[color_scheme] = green
),
} ‘#default_value’ => theme_get_setting(‘color_scheme’),
settings[site_format] = program
);

9. Create Base Structure
 Use Features module
http://drupal.org/projects/features
 Standard content types
 Default views
 Set regional templates
 Ex. Block titles in left sidebar are H3, in right are H4.
 block--left.tpl.php, block--right.tpl.php

10. Case Study – EERE Theme
 Theme settings  EERE News Feature
 Color scheme  News content type
 Site format  Default page and block views
 Include sitemap
 EERE Events Feature
 Base breadcrumbs
 Events content type
 Menus  Default page, block and calendar
 Top navigation = Main Menu views
 Left navigation = Secondary Menu
 Includes
 Page-top links = Global Menu
 Panels layouts
 Page-bottom = Footer Menu
 Printable template
 Standard 403 and 404 pages

11. Putting it All Together
 Download and enable the base theme
 Download and enable the base module
 Create sub-theme to extend/override base theme if necessary
 Add custom stylesheets for site specific areas
 Add (pre)processors
 Create custom templates to override existing ones
 Sub-theme inherits all the base theme’s settings
 Sub-theme functions always called after base themes

12. Summary
 Leverage preprocessors
 Use well crafted template overrides
 Keep logic out of templates
 Give users control via theme settings
 Use features to encapsulate stock functionality
 Spin up a new site in less than a day

13. Questions?
Chris Albrecht
NREL: chris.albrecht@nrel.gov
Other: chris@162unlimited.com
Twitter: @ChrisAlbrecht
D.o: http://drupal.org/user/176328
(KeyboardCowboy)