1. 10 new kickass things
about D7 theming
Trevor Twining
Niagara Drupal User Group
Senior Developer, Points of Light Institute
http://pointsoflight.org
@trevortwining
trevortwining@gmail.com
http://drupal.org/user/39694

2. 15 seconds about me
5yrs 60projects
I make Drupal look like something
that isn’t Drupal

3. The setup
• We’re all learning about D7 theming
• Lots of things besides these
• WOW things
• Links for more at end of presentation

4. go

5. 123456789
Content is now a block
(!)

6. content is a block???
• Add blocks above content
• put content somewhere else entirely
• mandatory region

7. 123456789
Added jQuery UI (1.8)
to core
so you can start adding things right away

8. 1 2 3 4 5 6 7 8 9
peekaboo variables

9. hidey/showey $vars

10. hidey/showey $vars
• To hide:

11. hidey/showey $vars
• To hide:
// We hide the comments and
links now so that we can
render them later.

12. hidey/showey $vars
• To hide:
// We hide the comments and
links now so that we can
render them later.
hide($content['comments']);

13. hidey/showey $vars
• To hide:
// We hide the comments and
links now so that we can
render them later.
hide($content['comments']);
hide($content['links']);

14. hidey/showey $vars
• To hide:
// We hide the comments and
links now so that we can
render them later.
hide($content['comments']);
hide($content['links']);
print render($content);

15. hidey/showey $vars
• To hide: • To show (somewhere else,
later):
// We hide the comments and
links now so that we can
render them later.
hide($content['comments']);
hide($content['links']);
print render($content);

16. hidey/showey $vars
• To hide: • To show (somewhere else,
later):
// We hide the comments and
links now so that we can <?php print
render them later. render($content['links']); ?>
hide($content['comments']);
hide($content['links']);
print render($content);

17. hidey/showey $vars
• To hide: • To show (somewhere else,
later):
// We hide the comments and
links now so that we can <?php print
render them later. render($content['links']); ?>
hide($content['comments']); <?php print
render($content['comments']);
hide($content['links']); ?>.
print render($content);

18. 1 2 3 4 5 6 7 8 9
a (metric) tonne of
core markup cleanup

19. Core Cleanup

20. Core Cleanup
• left/right sidebars now first/second

21. Core Cleanup
• left/right sidebars now first/second
• $closure becomes $page_bottom, new $page_top and
hidden regions

22. Core Cleanup
• left/right sidebars now first/second
• $closure becomes $page_bottom, new $page_top and
hidden regions
• Renamed $block->content to $content in block.tpl.php

23. Core Cleanup
• left/right sidebars now first/second
• $closure becomes $page_bottom, new $page_top and
hidden regions
• Renamed $block->content to $content in block.tpl.php
• Browser-targeted CSS files can and should be added using
drupal_add_css()

24. Core Cleanup
• left/right sidebars now first/second
• $closure becomes $page_bottom, new $page_top and
hidden regions
• Renamed $block->content to $content in block.tpl.php
• Browser-targeted CSS files can and should be added using
drupal_add_css()
• Changes to alt and title attribute for the RSS feed icon

25. Core Cleanup pt deux

26. Core Cleanup pt deux
• $picture changes to $user_picture, and the CSS class
'picture' to 'user-picture'

27. Core Cleanup pt deux
• $picture changes to $user_picture, and the CSS class
'picture' to 'user-picture'
• System module stylesheets have been reorganized to
separate behavior-supportingstyles from presentational
styles

28. Core Cleanup pt deux
• $picture changes to $user_picture, and the CSS class
'picture' to 'user-picture'
• System module stylesheets have been reorganized to
separate behavior-supportingstyles from presentational
styles
• clear-block --> .clearfix (yay!)

29. Core Cleanup pt deux
• $picture changes to $user_picture, and the CSS class
'picture' to 'user-picture'
• System module stylesheets have been reorganized to
separate behavior-supportingstyles from presentational
styles
• clear-block --> .clearfix (yay!)
• Search box moved from theme layer to blocks

30. Core Cleanup pt deux
• $picture changes to $user_picture, and the CSS class
'picture' to 'user-picture'
• System module stylesheets have been reorganized to
separate behavior-supportingstyles from presentational
styles
• clear-block --> .clearfix (yay!)
• Search box moved from theme layer to blocks
and many more

31. 1 2 3 4 5 6 7 8 9
PHPTemplate
suggestion wildcards

32. template wildcards
• page--user--%.tpl.php theme for any user
display page
• page--user--%--edit.tpl.php for any user edit
page (double dashes, hat tip to
@merlinofchaos)

33. 1 2 3 4 5 6 7 8 9
Cool Accessibility
changes!

34. new accessibility
changes in D7
• New classes available to hide content in an accessible manner
• .element-invisible
• .element-hidden
• Added markup to make installation task progress perceivable with
screen-reader and CSS disabled.
• theme_links() has a new parameter $heading for accessibility
• Add an invisible heading to theme_breadcrumb()
• Skip to main content links in core themes

35. 1 2 3 4 5 6 7 8 9
very little new work in
migrating your D6
themes to D7

36. OMG less work RAWKS!

37. 1 2 3 4 5 6 7 8 9
preprocess can be used
for any theming hook.
(templates and functions)

38. 1 2 3 4 5 6 7 8 9
new hooks available

39. new D7 hook functions
• hook_page_alter
• hook_form_alter
• hook_js_alter
• hook_css_alter

40. hook_(freaking!)_
page_alter();

41. hook_page_alter(&$page)
allows you to change any element on the
page prior to being rendered.

42. hook_page_alter is covered
in kickass and smothered in
awesomesauce.

43. SO. MUCH. MORE.
http://drupal.org/update/theme/6/7

44. So what’s this all mean?

45. When D7 ships, only one
thing will stop you from
making kickass themes...

46. You.