Theming Drupal: Beyond the Look and Feel


Published on

Published in: Lifestyle
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Theming Drupal: Beyond the Look and Feel

  1. 1. Theming Drupal Beyond the Look and Feel
  2. 2. 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, …
  3. 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. 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. 5. 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
  6. 6. Template Patterns Look for double underscores or double hyphens Allows for fallback Extends flexibility Provides specific themable instances Views uses these extensively
  7. 7. * 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’; ... } }
  8. 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. 9. 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
  10. 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. 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. 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. 13. Questions?Chris Albrecht NREL: Other: Twitter: @ChrisAlbrecht D.o: (KeyboardCowboy)