Drupal 7 Theming - what's new

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

Bartik
Default D7 theme
recolorable
many regions
Designed for content

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 "-//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

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 = "<?php print $classes; ?>" > <?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= "<?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>

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/

Drupal 7 Theming - what's new

by Marek Sotak

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 20

Statistics