D7 theming what's new - London
Upcoming SlideShare
Loading in...5

D7 theming what's new - London



A short presentation on what's new in Drupal 7 theming layer

A short presentation on what's new in Drupal 7 theming layer



Total Views
Views on SlideShare
Embed Views



1 Embed 1

http://translate.googleusercontent.com 1



Upload Details

Uploaded via as Adobe PDF

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

D7 theming what's new - London D7 theming what's new - London Presentation Transcript

  • What's new in  Drupal 7 Theming Marek Sotak
  • Who am I? Marek Sotak Drupal developer, themer and designer co-founder of Atomic Ant Ltd – http://atomicant.co.uk working with Drupal for about 5 years creator of admin theme RootCandy Lets Connect http://twitter.com/sotak http://sotak.co.uk
  • Back in the days You won't believe me
  • It's that easy now With D7 everyone can
  • Core themes massacre They live in contrib, Garland escaped
  • New kids on the block Seven, Bartik, Stark
  • Theme anatomy
  • .info No automatic loading for: script.js style.css Core themes only: package=core
  • html.tpl.php Single file with headers and wrappers
  • html.tpl.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language; ?>" version="XHTML+RDFa 1.0" dir="<?php print $language->dir; ?>"<?php print $rdf_namespaces; ?>> <head profile="<?php print $grddl_profile; ?>"> <?php print $head; ?> Common $classes variable that is being <title><?php print $head_title; ?></title> <?php print $styles; ?> used everywhere, $attributes as well <?php print $scripts; ?> </head> <body class="<?php print $classes; ?>" <?php print $attributes;?>> <div id="skip-link"> <a href="#main-content"><?php print t('Skip to main content'); ?></a> </div> <?php print $page_top; ?> <?php print $page; ?> New Skip link for better (scope) region $page_top accessbility <?php print $page_bottom; ?> Rendered page in $page </body> $page_bottom replacing $closure </html>
  • regions $missions variable removed ● → regions[highlighted] = Highlighted $footer_message variable removed ● → regions[footer] = Footer $content no longer as output ● → region and is required
  • regions hidden regions ● $page_top, $page_bottom ● custom hidden region needs to be specified in .info: regions[indicators] = Indicators regions_hidden[] = indicators ● Not displayed in blocks UI ● Modules adds blocks directly into these regions
  • regions sidebars ● $left region → $sidebar_first ● $right → $sidebar_second help ● $help → region
  • regions region.tpl.php <?php if($content): ?> <div class="<?php print $classes; ?>"> <?php print $content; ?> </div> <?php endif; ?>
  • blocks Meaningful classes ● block-user-0 → block-user-login ● block-search-0 → block-search-form New blocks ● $search_box → block ● $content → block ● $help → block
  • process & preprocess after preprocess we have post processing function both functions are available for tpl.php and for theme functions function bartik_process_html(&$variables) { // Hook into color.module. if (module_exists('color')) { _color_html_alter($variables); } }
  • hook_alter We can use _alter hooks in template.php ● hook_form_alter ● hook_css_alter ● hook_page_alter ● hook_xxx_alter
  • Don't be evil Being evil is easier than ever
  • rendering New delivery callback Renderable array
  • hook_page_alter Region in node.tpl, dynamic fields,...? easy
  • hide() & render() hide($content['field']); prevents content from rendering render($content); renders the $content
  • $classes_array HTML classes generated through a variable function mytheme_preprocess_node(&$vars) { // Add a striping class. $vars['classes_array'][] = 'node-' . $vars['zebra']; } Default template_process will flatten the classes_array into a string so in all templates we can use <?php print $classes ?>
  • PHPTemplate suggestions ● page--user--%.tpl.php ● page--user--edit.tpl.php, etc... ● No need to have node.tpl.php in your theme ● Using two dashes ● node--article.tpl.php ● page--front.tpl.php
  • Little big changes CSS ● .clear-block → .clearfix ● new classes for accessibility – .element-hidden – .element-invisible ● default.css merged with system.css ● new stylesheet system-behavior.css ● conditional stylesheets function garland_preprocess_html(&$vars) { drupal_add_css(path_to_theme() . '/fix-ie.css', array('weight' => CSS_THEME, 'browsers' => array('IE' => 'lt IE 7', '!IE' => FALSE), 'preprocess' => FALSE)); }
  • worth mentioning PHPTemplate prefix is gone You are not able to use phptemplate_ prefix in your template.php file any more
  • worth mentioning ● Primary and secondary links are now Main and Secondary menu ● All theme() functions now take a single argument, $variables ● new suggestions, specific menu items ● THEMENAME_menu_link__MENU_NAME() ● THEMENAME_menu_tree__MENU_NAME() ● theme_link() - markup for l() function
  • jQuery, scripts ● Drupal 7 ships with jQuery 1.4 & jQuery UI 1.8 ● Drupal.jsEnabled has been removed ● drupal_add_js supports external scripts ● #attached_js per element
  • resources Theme upgrade guide on d.org http://drupal.org/node/254940 Moshe Weitzman's talk on drupal_render http://bit.ly/drupalrender John Albin's talk about D7 theming http://bit.ly/johnalbinsf
  • Questions? And answers
  • Thank you! Credits for images slide 1 by Gilderic http://www.flickr.com/photos/gilderic/4405965973/sizes/o/ slide 3 by isar21 http://www.flickr.com/photos/sriess/2244583403/sizes/o/ slide 4 by jenburn http://www.flickr.com/photos/jenburn/255246409/sizes/o/ slide 5 by Anakronik http://www.flickr.com/photos/nokianakronik/3054987717/sizes/o/ slide 6 by dmc-flux http://www.flickr.com/photos/jackstiefel/3000208336/sizes/l/ slide 7 by freeny http://freeny.deviantart.com/art/Sackboy-Anatomy-Wallpaper-117738222 slide 18 by ??? slide 20 by ??? slide 6 by dmc-flux http://www.flickr.com/photos/jackstiefel/3000208336/sizes/l/