D7 theming what's new - London

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/

D7 theming what's new - London

by Marek Sotak

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 1

Statistics

D7 theming what’s new - London Presentation Transcript