What's new in  Drupal 7 Theming <ul>Marek Sotak @sotak </ul>
Who am I? <ul>Marek Sotak </ul><ul><ul><li>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 </li><ul><li>http://twitter.com/sotak
http://sotak.co.uk </li></ul></ul></ul>
 
 
Core themes massacre <ul>They are no longer with us* <ul><li>Bluemarine
Pushbutton
Chameleon </li></ul>*  they live in contrib FYI Garland survived </ul>
New kids on the block <ul>Stark <ul><li>for demonstration purposes
a troubleshooting tool
using default HTML markup
simple layout.css </li></ul></ul>
New kids on the block <ul>Bartik <ul><li>Default D7 theme
recolorable
many regions
Designed for content </li></ul></ul>
New kids on the block <ul>Seven <ul><li>administration theme
result of D7UX
designed by
Mark Boulton & Leisa Reichelt </li></ul></ul>
Little big changes <ul>CSS <ul><li>.clear-block -> .clearfix
new classes for accessibility </li><ul><li>.element-hidden
.element-invisible </li></ul><li>default.css merged with system.css
new stylesheet system-behavior.css
conditional stylesheets </li></ul></ul>function   garland_preprocess_html (& $vars ) { drupal_add_css ( path_to_theme () ....
Theme anatomy
.info No automatic loading for: script.js style.css Core themes only: package=core
html.tpl.php Single file with headers and wrappers
Upcoming SlideShare
Loading in...5
×

Drupal 7 Theming - what's new

9,668

Published on

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

No Downloads
Views
Total Views
9,668
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
114
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • $content included blocks as well
  • Drupal 7 Theming - what's new

    1. 1. What's new in Drupal 7 Theming <ul>Marek Sotak @sotak </ul>
    2. 2. Who am I? <ul>Marek Sotak </ul><ul><ul><li>Drupal developer, themer and designer
    3. 3. co-founder of Atomic Ant Ltd – http://atomicant.co.uk
    4. 4. working with Drupal for about 5 years
    5. 5. creator of admin theme RootCandy
    6. 6. Lets Connect </li><ul><li>http://twitter.com/sotak
    7. 7. http://sotak.co.uk </li></ul></ul></ul>
    8. 10. Core themes massacre <ul>They are no longer with us* <ul><li>Bluemarine
    9. 11. Pushbutton
    10. 12. Chameleon </li></ul>* they live in contrib FYI Garland survived </ul>
    11. 13. New kids on the block <ul>Stark <ul><li>for demonstration purposes
    12. 14. a troubleshooting tool
    13. 15. using default HTML markup
    14. 16. simple layout.css </li></ul></ul>
    15. 17. New kids on the block <ul>Bartik <ul><li>Default D7 theme
    16. 18. recolorable
    17. 19. many regions
    18. 20. Designed for content </li></ul></ul>
    19. 21. New kids on the block <ul>Seven <ul><li>administration theme
    20. 22. result of D7UX
    21. 23. designed by
    22. 24. Mark Boulton & Leisa Reichelt </li></ul></ul>
    23. 25. Little big changes <ul>CSS <ul><li>.clear-block -> .clearfix
    24. 26. new classes for accessibility </li><ul><li>.element-hidden
    25. 27. .element-invisible </li></ul><li>default.css merged with system.css
    26. 28. new stylesheet system-behavior.css
    27. 29. conditional stylesheets </li></ul></ul>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)); }
    28. 30. Theme anatomy
    29. 31. .info No automatic loading for: script.js style.css Core themes only: package=core
    30. 32. html.tpl.php Single file with headers and wrappers
    31. 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
    32. 34. page.tpl.php No headers
    33. 35. regions <ul>$missions variable removed <ul><li>-> regions[highlighted] = Highlighted </li></ul>$footer_message variable removed <ul><li>-> regions[footer] = Footer </li></ul>$content no longer as output <ul><li>-> region and is required </li></ul></ul>
    34. 36. regions <ul>hidden regions <ul><li>$page_top, $page_bottom
    35. 37. custom hidden region needs to be specified in .info: </li><ul><li>regions[indicators] = Indicators
    36. 38. regions_hidden[] = indicators </li></ul><li>Not displayed in blocks UI
    37. 39. Modules adds blocks directly into these regions </li></ul></ul>
    38. 40. regions <ul>sidebars <ul><li>$left region -> $sidebar_first
    39. 41. $right -> $sidebar_second </li></ul>help <ul><li>$help -> region </li></ul></ul>
    40. 42. regions <ul>region.tpl.php </ul><?php if ( $content ): ?> <div class = &quot;<?php print $classes; ?>&quot; > <?php print $content ; ?> </div> <?php endif ; ?>
    41. 43. blocks <ul>Meaningful classes <ul><li>block-user-0 -> block-user-login
    42. 44. block-search-0 -> block-search-form </li></ul>New blocks <ul><li>$search_box -> block
    43. 45. $content -> block
    44. 46. $help -> block </li></ul></ul>
    45. 47. blocks <ul>blocks.tpl.php </ul><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>
    46. 48. process & preprocess <ul>after preprocess we have post processing function both functions are available for tpl.php and for theme functions </ul>function bartik_process_html (& $variables ) { // Hook into color.module. if ( module_exists ( 'color' )) { _color_html_alter ( $variables ); } }
    47. 49. rendering <ul>New delivery callback drupal_render <ul><li>render()
    48. 50. hide() </li></ul></ul>
    49. 51. hook_alter <ul>We can use _alter hooks in template.php <ul><li>hook_form_alter
    50. 52. hook_css_alter
    51. 53. hook_xxx_alter
    52. 54. hook_page_alter </li></ul>Please, don't be evil! </ul>
    53. 55. hook_page_alter
    54. 56. PHPTemplate suggestions <ul><li>page--user--%.tpl.php
    55. 57. page--user--edit.tpl.php, etc...
    56. 58. No need to have node.tpl.php in your theme
    57. 59. Using two dashes
    58. 60. node--article.tpl.php
    59. 61. page--front.tpl.php </li></ul>
    60. 62. worth mentioning <ul>PHPTemplate prefix is gone <ul><li>You are not able to use phptemplate_ prefix in your template.php file any more </li></ul></ul>
    61. 63. worth mentioning <ul>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 ?> </ul>function mytheme_preprocess_node (& $vars ) { // Add a striping class. $vars [ 'classes_array' ][] = 'node-' . $vars [ 'zebra' ]; }
    62. 64. worth mentioning <ul><li>Primary and secondary links are now Main and Secondary menu
    63. 65. All theme() functions now take a single argument, $variables
    64. 66. new suggestions, specific menu items </li><ul><li>THEMENAME_menu_link__MENU_NAME()
    65. 67. THEMENAME_menu_tree__MENU_NAME() </li></ul><li>theme_link() - markup for l() function </li></ul>
    66. 68. jQuery, scripts <ul><li>Drupal 7 ships with jQuery 1.4 & jQuery UI 1.8
    67. 69. Drupal.jsEnabled has been removed
    68. 70. drupal_add_js supports external scripts
    69. 71. #attached_js per element </li></ul>
    70. 72. Resources <ul>Theme upgrade guide on d.org <ul>http://drupal.org/node/254940 </ul>Moshe Weitzman's talk on drupal_render <ul>http://bit.ly/drupalrender </ul>John Albin's talk about D7 theming <ul>http://bit.ly/johnalbinsf </ul></ul>
    71. 73. Questions? <ul>When will be Drupal 7 released? <ul>-> When it's ready ;) http://twitter.com/sotak - @sotak http://atomicant.co.uk http://sotak.co.uk </ul>Drupal Theming workshop tomorrow! </ul>
    72. 74. Thank you! <ul>Credits for images <ul>slide 3 - by Vlastula <ul>http://www.flickr.com/photos/vlastula/1256146490/sizes/o/ </ul>slide 4 by mikivenezia <ul>http://www.flickr.com/photos/mikivenezia/2677504269/sizes/l/t </ul>slide 25 by erix <ul>http://www.flickr.com/photos/erix/3600983811/sizes/l/ </ul></ul></ul>
    1. A particular slide catching your eye?

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

    ×