Your SlideShare is downloading. ×
Drupal 7 Theming - what's new
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Drupal 7 Theming - what's new

9,615

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
9,615
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
114
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/

    ×