Embed Size (px)
DESCRIPTION
A short presentation on what's new in Drupal 7 theming layer
Citation preview
What's new in Drupal 7 ThemingMarek Sotak
Who am I?
Marek SotakDrupal 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 daysYou won't believe me
It's that easy nowWith D7 everyone can
Core themes massacreThey live in contrib, Garland escaped
New kids on the blockSeven, Bartik, Stark
Theme anatomy
.infoNo automatic loading for:script.jsstyle.css
Core themes only:package=core
html.tpl.phpSingle 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; ?> <title><?php print $head_title; ?></title> <?php print $styles; ?> <?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; ?> <?php print $page_bottom; ?></body></html>
Common $classes variable that is beingused everywhere, $attributes as well
Skip link for better accessbilityNew region $page_top (scope)Rendered page in $page
$page_bottom replacing $closure
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 evilBeing evil is easier than ever
rendering
New delivery callback
Renderable array
hook_page_alterRegion 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
Default template_process will flatten the classes_array into a string so in all templates we can use <?php print $classes ?>
function mytheme_preprocess_node(&$vars) { // Add a striping class. $vars['classes_array'][] = 'node-' . $vars['zebra'];}
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 imagesslide 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/
