• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Drupal 7 Theming - what's new
 

Drupal 7 Theming - what's new

on

  • 10,307 views

 

Statistics

Views

Total Views
10,307
Views on SlideShare
10,274
Embed Views
33

Actions

Likes
3
Downloads
109
Comments
0

2 Embeds 33

http://www.weebly.com 32
http://m.gaajinaglaasu.com 1

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • $content included blocks as well

Drupal 7 Theming - what's new Drupal 7 Theming - what's new Presentation Transcript

  • What's new in Drupal 7 Theming
      Marek Sotak @sotak
  • 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
  •  
  •  
  • Core themes massacre
      They are no longer with us*
      • Bluemarine
      • Pushbutton
      • Chameleon
      * they live in contrib FYI Garland survived
  • New kids on the block
      Stark
      • for demonstration purposes
      • a troubleshooting tool
      • using default HTML markup
      • simple layout.css
  • New kids on the block
      Bartik
      • Default D7 theme
      • recolorable
      • many regions
      • Designed for content
  • New kids on the block
      Seven
      • administration theme
      • result of D7UX
      • designed by
      • Mark Boulton & Leisa Reichelt
  • 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)); }
  • 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
  • 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
  • page.tpl.php No headers
  • regions
      $missions variable removed
      • -> regions[highlighted] = Highlighted
      $footer_message variable removed
      • -> regions[footer] = Footer
      $content no longer as output
      • -> region and is required
  • 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
  • regions
      sidebars
      • $left region -> $sidebar_first
      • $right -> $sidebar_second
      help
      • $help -> region
  • regions
      region.tpl.php
    <?php if ( $content ): ?> <div class = &quot;<?php print $classes; ?>&quot; > <?php print $content ; ?> </div> <?php endif ; ?>
  • blocks
      Meaningful classes
      • block-user-0 -> block-user-login
      • block-search-0 -> block-search-form
      New blocks
      • $search_box -> block
      • $content -> block
      • $help -> block
  • 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>
  • 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 ); } }
  • rendering
      New delivery callback drupal_render
      • render()
      • hide()
  • hook_alter
      We can use _alter hooks in template.php
      • hook_form_alter
      • hook_css_alter
      • hook_xxx_alter
      • hook_page_alter
      Please, don't be evil!
  • hook_page_alter
  • 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
  • worth mentioning
      PHPTemplate prefix is gone
      • You are not able to use phptemplate_ prefix in your template.php file any more
  • 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' ]; }
  • 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
  • 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
  • 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
  • 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!
  • 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/