Drupal 7 Theming - what's new
Download as ODP, PDF3 likes2,703 views
- Drupal 7 introduced new core themes like Bartik and Seven and removed old themes like Garland and Bluemarine. - Theming architecture was updated with changes like new page templates, regions, block templates, and preprocessing functions. - Theme development best practices also changed including new template suggestions, class generation methods, and altered hooks.
Drupal 7 Theming - what's new
- 1. What's new in Drupal 7 Theming Marek Sotak @sotak
- 2. Who am I? Marek Sotak Drupal developer, themer and designer
- 3. co-founder of Atomic Ant Ltd – http://atomicant.co.uk
- 4. working with Drupal for about 5 years
- 5. creator of admin theme RootCandy
- 10. Core themes massacre They are no longer with us* Bluemarine
- 11. Pushbutton
- 12. Chameleon * they live in contrib FYI Garland survived
- 13. New kids on the block Stark for demonstration purposes
- 15. using default HTML markup
- 17. New kids on the block Bartik Default D7 theme
- 18. recolorable
- 19. many regions
- 21. New kids on the block Seven administration theme
- 22. result of D7UX
- 23. designed by
- 24. Mark Boulton & Leisa Reichelt
- 25. Little big changes CSS .clear-block -> .clearfix
- 26. new classes for accessibility .element-hidden
- 27. .element-invisible default.css merged with system.css
- 29. 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)); }
- 30. Theme anatomy
- 31. .info No automatic loading for: script.js style.css Core themes only: package=core
- 32. html.tpl.php Single file with headers and wrappers
- 33. 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 being used everywhere, $attributes as well Skip link for better accessbility New region $page_top (scope) Rendered page in $page $page_bottom replacing $closure
- 35. regions $missions variable removed -> regions[highlighted] = Highlighted $footer_message variable removed -> regions[footer] = Footer $content no longer as output -> region and is required
- 36. regions hidden regions $page_top, $page_bottom
- 37. custom hidden region needs to be specified in .info: regions[indicators] = Indicators
- 38. regions_hidden[] = indicators Not displayed in blocks UI
- 39. Modules adds blocks directly into these regions
- 40. regions sidebars $left region -> $sidebar_first
- 41. $right -> $sidebar_second help $help -> region
- 42. regions region.tpl.php <?php if ( $content ): ?> <div class = "<?php print $classes; ?>" > <?php print $content ; ?> </div> <?php endif ; ?>
- 43. blocks Meaningful classes block-user-0 -> block-user-login
- 44. block-search-0 -> block-search-form New blocks $search_box -> block
- 46. $help -> block
- 47. blocks blocks.tpl.php <div id= "<?php print $block_html_id; ?>" class = "<?php print $classes; ?>" <?php print $attributes ; ?>> <?php print render ( $title_prefix ); ?> <?php if ( $block ->subject): ?> <h2<?php print $title_attributes ; ?>><?php print $block ->subject ?></h2> <?php endif ;?> <?php print render ( $title_suffix ); ?> <div class = "content" <?php print $content_attributes ; ?>> <?php print $content ?> </div> </div>
- 48. 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 ); } }
- 49. rendering New delivery callback drupal_render render()
- 50. hide()
- 51. hook_alter We can use _alter hooks in template.php hook_form_alter
- 52. hook_css_alter
- 53. hook_xxx_alter
- 54. hook_page_alter Please, don't be evil!
- 55. hook_page_alter
- 58. No need to have node.tpl.php in your theme
- 59. Using two dashes
- 62. worth mentioning PHPTemplate prefix is gone You are not able to use phptemplate_ prefix in your template.php file any more
- 63. worth mentioning 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' ]; }
- 64. worth mentioning Primary and secondary links are now Main and Secondary menu
- 65. All theme() functions now take a single argument, $variables
- 66. new suggestions, specific menu items THEMENAME_menu_link__MENU_NAME()
- 67. THEMENAME_menu_tree__MENU_NAME() theme_link() - markup for l() function
- 68. jQuery, scripts Drupal 7 ships with jQuery 1.4 & jQuery UI 1.8
- 69. Drupal.jsEnabled has been removed
- 70. drupal_add_js supports external scripts
- 72. 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
- 73. Questions? When will be Drupal 7 released? -> When it's ready ;) http://twitter.com/sotak - @sotak http://atomicant.co.uk http://sotak.co.uk Drupal Theming workshop tomorrow!
- 74. Thank you! Credits for images slide 3 - by Vlastula http://www.flickr.com/photos/vlastula/1256146490/sizes/o/ slide 4 by mikivenezia http://www.flickr.com/photos/mikivenezia/2677504269/sizes/l/t slide 25 by erix http://www.flickr.com/photos/erix/3600983811/sizes/l/
Editor's Notes
- #16: $content included blocks as well