Drupal 7 Theming - what's new

  • 9,518 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
9,518
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
112
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • $content included blocks as well

Transcript

  • 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
      • 6. Lets Connect
        • http://twitter.com/sotak
        • 7. http://sotak.co.uk
  • 8.  
  • 9.  
  • 10. Core themes massacre
      They are no longer with us* * they live in contrib FYI Garland survived
  • 13. New kids on the block
      Stark
      • for demonstration purposes
      • 14. a troubleshooting tool
      • 15. using default HTML markup
      • 16. simple layout.css
  • 17. New kids on the block
      Bartik
      • Default D7 theme
      • 18. recolorable
      • 19. many regions
      • 20. Designed for content
  • 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
      • 28. new stylesheet system-behavior.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 &quot;-//W3C//DTD XHTML+RDFa 1.0//EN&quot; &quot;http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd&quot; > <html xmlns= &quot;http://www.w3.org/1999/xhtml&quot; xml:lang= &quot;<?php print $language->language; ?>&quot; version= &quot;XHTML+RDFa 1.0&quot; dir= &quot;<?php print $language->dir; ?>&quot; <?php print $rdf_namespaces ; ?>> <head profile= &quot;<?php print $grddl_profile; ?>&quot; > <?php print $head ; ?> <title><?php print $head_title ; ?></title> <?php print $styles ; ?> <?php print $scripts ; ?> </head> <body class = &quot;<?php print $classes; ?>&quot; <?php print $attributes ;?>> <div id= &quot;skip-link&quot; > <a href= &quot;#main-content&quot; ><?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
  • 34. page.tpl.php No headers
  • 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 = &quot;<?php print $classes; ?>&quot; > <?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
      • 45. $content -> block
      • 46. $help -> block
  • 47. blocks
      blocks.tpl.php
    <div id= &quot;<?php print $block_html_id; ?>&quot; class = &quot;<?php print $classes; ?>&quot; <?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 = &quot;content&quot; <?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
  • 51. hook_alter
      We can use _alter hooks in template.php Please, don't be evil!
  • 55. hook_page_alter
  • 56. PHPTemplate suggestions
    • page--user--%.tpl.php
    • 57. page--user--edit.tpl.php, etc...
    • 58. No need to have node.tpl.php in your theme
    • 59. Using two dashes
    • 60. node--article.tpl.php
    • 61. page--front.tpl.php
  • 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
    • 71. #attached_js per element
  • 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/