Theming Drupal: Beyond the Look and Feel
Upcoming SlideShare
Loading in...5

Theming Drupal: Beyond the Look and Feel






Total Views
Slideshare-icon Views on SlideShare
Embed Views



1 Embed 14 14



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Theming Drupal: Beyond the Look and Feel Theming Drupal: Beyond the Look and Feel Presentation Transcript

    • Theming Drupal Beyond the Look and Feel
    • Chris AlbrechtDrupal DeveloperNational Renewable Energy Lab Since Drupal 6.20 (2 years, 3 months)Living Drupal Since Drupal 5.2 (5 years, 7 months)Contributed modules, developedthemes, managed projects, configuredservers, …
    • 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 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
    • Building Out a Theme One theme to rule them all? Build a flexible base theme Start simple Locate desired template file 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().* Implementation of template_preprocess().nction THEME_preprocess_page(&$vars) { (Pre)processing Data/ Generate CSS classes relating to contentf (!empty($vars[‘page’][‘topnav’])) { $hook) {nction THEME_preprocess(&$vars, $vars[‘body_classes’][] = ‘topnav’;  Preprocessors vs Processors  Extend the processorsnction 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’; ... } }
    • 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);
    • Create Base Structure Use Features module 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  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
    • 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: Other: Twitter: @ChrisAlbrecht D.o: (KeyboardCowboy)