Theming DrupalBeyond the Look and Feel

Chris AlbrechtDrupal Developer

National Renewable Energy Lab Since Drupal 6.20 (2 years, 3 months)

Living DrupalSince Drupal 5.2 (5 years, 7 months)

Contributed modules, developed themes, managed projects, configured servers, …

Getting Started New to Drupal

Three basic templates

Flat HTML files

Strict enterprise standards

508 compliance

Need reusable themes

Built-in standards and structure

What Makes a Theme? Markup + CSS

Markup lives in template files and theme functions

Data is pushed in, final markup returned

In between are preprocessors and processors

MVC architecture Model = Modules Controller = (Pre)processors View = Themes/Templates

ModuleRetrieves datafrom database.

(Pre)processorApplies logic andmanipulates data.

TemplateRenders markupimplementing datawhere needed.

Building Out a Theme One theme to rule them all?

Build a flexible base theme

Start simple

Locate desired template file

Devel Themerhttp://drupal.org/project/devel_themer

Copy template to your theme and alter it

Use (pre)processors to manipulate the data

Template Patterns Look for double underscores

or double hyphens

Allows for fallback

Extends flexibility

Provides specific themable instances

Views uses these extensively

/** * Implementation of template_preprocess(). */function THEME_preprocess_page(&$vars) { // Add a printable template if (isset($_GET[‘print’])) { $vars[‘theme_hook_suggestions’][] = ‘page__printable’; }}

/** * Implementation of template_preprocess(). */function THEME_preprocess_page(&$vars) { // Alter the page data for node 100 if (in_array(‘page__node__100’, $vars[‘theme_hook_suggestions’])) { ... }}

/** * Implementation of template_preprocess(). */function THEME_preprocess(&$vars, $hook) {

}

function THEME_process(&$vars, $hook) {

}

/** * Implementation of template_preprocess(). */function THEME_preprocess_page(&$vars) { // Generate CSS classes relating to content if (!empty($vars[‘page’][‘topnav’])) { $vars[‘body_classes’][] = ‘topnav’; }}

template.php

Extend the processors

Add template suggestions

Adjust styles

Preprocessors vs Processors

Order of implementation

What gets processed?

(Pre)processing Data

/** * Implementation of template_preprocess(). */function THEME_preprocess_html(&$vars) { // Add the stylesheet for this color scheme. $color_scheme = theme_get_setting(‘color_scheme’); drupal_add_css(path_to_theme() . ‘/css/’ . $color_scheme . ‘.css’);}

name = My Themecore = 7.x

; Stylesheets

; Settingssettings[color_scheme] = greensettings[site_format] = program

$form[‘color_scheme’] = array( ‘#type’ => ‘radios’, ‘#title’ => t(‘Color Scheme’), ‘#options’ => array( ‘green’ => t(‘Green’), ‘blue’ => t(‘Blue’), ), ‘#default_value’ => theme_get_setting(‘color_scheme’),);

theme_settings.phphook_form_system_theme_settings_alter()

Defaults in .info file

Use theme settings in processors

Adding Theme Settings

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

Case Study – EERE Theme Theme settings

Color scheme Site format Include sitemap Base breadcrumbs

Menus Top navigation = Main Menu Left navigation = Secondary Menu Page-top links = Global Menu Page-bottom = Footer Menu

EERE News Feature News content type Default page and block views

EERE Events Feature Events content type Default page, block and calendar

views

Includes Panels layouts Printable template Standard 403 and 404 pages

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

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

Questions?Chris Albrecht

NREL: chris.albrecht@nrel.gov

Other: chris@162unlimited.com

Twitter: @ChrisAlbrecht

D.o: http://drupal.org/user/176328

(KeyboardCowboy)