0
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
  w...
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:
   ...
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">
<ht...
regions
 $missions variable removed
 ●   → regions[highlighted] = Highlighted
 $footer_message variable removed
 ●   → reg...
regions
 hidden regions
 ●   $page_top, $page_bottom
 ●   custom hidden region needs to be specified in .info:
       regi...
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; ?>
 ...
blocks
 Meaningful classes
 ●   block-user-0 → block-user-login
 ●   block-search-0 → block-search-form


 New blocks
 ●  ...
process & preprocess
 after preprocess we have post processing
 function
 both functions are available for tpl.php and for...
hook_alter
 We can use _alter hooks in template.php
 ●   hook_form_alter
 ●   hook_css_alter
 ●   hook_page_alter
 ●   hoo...
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...
PHPTemplate suggestions
●   page--user--%.tpl.php
●   page--user--edit.tpl.php, etc...
●   No need to have node.tpl.php in...
Little big changes
 CSS
 ●   .clear-block → .clearfix
 ●   new classes for accessibility
     –   .element-hidden
     –  ...
worth mentioning
 PHPTemplate prefix is gone
   You are not able to use phptemplate_ prefix in your
   template.php file a...
worth mentioning
●   Primary and secondary links are now Main and
    Secondary menu
●   All theme() functions now take a ...
jQuery, scripts
●   Drupal 7 ships with jQuery 1.4 & jQuery UI 1.8
●   Drupal.jsEnabled has been removed
●   drupal_add_js...
resources
 Theme upgrade guide on d.org
   http://drupal.org/node/254940
 Moshe Weitzman's talk on drupal_render
   http:/...
Questions?
And answers
Thank you!
 Credits for images
   slide 1 by Gilderic http://www.flickr.com/photos/gilderic/4405965973/sizes/o/
   slide 3...
Upcoming SlideShare
Loading in...5
×

D7 theming what's new - London

6,908

Published on

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

Published in: Technology
1 Comment
11 Likes
Statistics
Notes
No Downloads
Views
Total Views
6,908
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
185
Comments
1
Likes
11
Embeds 0
No embeds

No notes for slide

Transcript of "D7 theming what's new - London"

  1. 1. What's new in  Drupal 7 Theming Marek Sotak
  2. 2. 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
  3. 3. Back in the days You won't believe me
  4. 4. It's that easy now With D7 everyone can
  5. 5. Core themes massacre They live in contrib, Garland escaped
  6. 6. New kids on the block Seven, Bartik, Stark
  7. 7. Theme anatomy
  8. 8. .info No automatic loading for: script.js style.css Core themes only: package=core
  9. 9. html.tpl.php Single file with headers and wrappers
  10. 10. 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>
  11. 11. regions $missions variable removed ● → regions[highlighted] = Highlighted $footer_message variable removed ● → regions[footer] = Footer $content no longer as output ● → region and is required
  12. 12. 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
  13. 13. regions sidebars ● $left region → $sidebar_first ● $right → $sidebar_second help ● $help → region
  14. 14. regions region.tpl.php <?php if($content): ?> <div class="<?php print $classes; ?>"> <?php print $content; ?> </div> <?php endif; ?>
  15. 15. blocks Meaningful classes ● block-user-0 → block-user-login ● block-search-0 → block-search-form New blocks ● $search_box → block ● $content → block ● $help → block
  16. 16. 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); } }
  17. 17. hook_alter We can use _alter hooks in template.php ● hook_form_alter ● hook_css_alter ● hook_page_alter ● hook_xxx_alter
  18. 18. Don't be evil Being evil is easier than ever
  19. 19. rendering New delivery callback Renderable array
  20. 20. hook_page_alter Region in node.tpl, dynamic fields,...? easy
  21. 21. hide() & render() hide($content['field']); prevents content from rendering render($content); renders the $content
  22. 22. $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 ?>
  23. 23. 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
  24. 24. 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)); }
  25. 25. worth mentioning PHPTemplate prefix is gone You are not able to use phptemplate_ prefix in your template.php file any more
  26. 26. 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
  27. 27. 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
  28. 28. 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
  29. 29. Questions? And answers
  30. 30. 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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×