D7 theming what's new - London

What's new in
Drupal 7 Theming
Marek 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

Back in the days
You won't believe me

It's that easy now
With D7 everyone can

Core themes massacre
They live in contrib, Garland escaped

New kids on the block
Seven, Bartik, Stark

.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; ?>
Common $classes variable that is being
<title><?php print $head_title; ?></title>
<?php print $styles; ?> used everywhere, $attributes as well
<?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; ?> New Skip link for better (scope)
region $page_top accessbility
<?php print $page_bottom; ?> Rendered page in $page
</body> $page_bottom replacing $closure
</html>

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

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);
}
}

hook_alter
We can use _alter hooks in template.php
● hook_form_alter
● hook_css_alter
● hook_page_alter
● hook_xxx_alter

Don't be evil
Being evil is easier than ever

rendering
New delivery callback
Renderable array

hook_page_alter
Region in node.tpl, dynamic fields,...? easy

hide() & render()
hide($content['field']);
prevents content from rendering
render($content);
renders the $content

$classes_array
HTML classes generated through a variable
function mytheme_preprocess_node(&$vars) {
// Add a striping class.
$vars['classes_array'][] = 'node-' .
$vars['zebra'];
}

Default template_process will flatten the
classes_array into a string so in all templates
we can use <?php print $classes ?>

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

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));
}

worth mentioning
PHPTemplate prefix is gone
You are not able to use phptemplate_ prefix in your
template.php file any more

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

Thank you!
Credits for images
slide 1 by Gilderic http://www.flickr.com/photos/gilderic/4405965973/sizes/o/
slide 3 by isar21 http://www.flickr.com/photos/sriess/2244583403/sizes/o/
slide 4 by jenburn http://www.flickr.com/photos/jenburn/255246409/sizes/o/
slide 5 by Anakronik http://www.flickr.com/photos/nokianakronik/3054987717/sizes/o/
slide 6 by dmc-flux http://www.flickr.com/photos/jackstiefel/3000208336/sizes/l/
slide 7 by freeny http://freeny.deviantart.com/art/Sackboy-Anatomy-Wallpaper-117738222
slide 18 by ???
slide 20 by ???
slide 6 by dmc-flux http://www.flickr.com/photos/jackstiefel/3000208336/sizes/l/

D7 theming what's new - London

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (13)

Similar to D7 theming what's new - London

Similar to D7 theming what's new - London (20)

Recently uploaded

Recently uploaded (20)

D7 theming what's new - London