1. Forensic Theming
Emma Jane Hogbin

2. Book (Co)Author

3. Trainer: Site Building Extravaganza
http://farm4.static.flickr.com/3567/3392276341_8712643bfb.jpg

4. Workbook Author: Design to Theme
See also: the inside spread of your Drupal Watchdog,
that really awesome magazine that's in your loot bag.

5. Knitter of The Socks
Pattern at: www.emmajane.net/craft/drupal
http://www.flickr.com/photos/mortendk/1439332466/

6. www.emmajane.net/craft/drupal

7. th
Happy 100
International Women's Day

8. The Making of a Theme
Mommy, where do themes come from?
● Modules →
● Templates →
● Base theme →
● Your theme →
● Rendered page

9. Steps to Making a Theme
● Communicate with your whole team.
● Use wire frames to prove what you're saying about
how the site ought to be built.
● Build the site without a theme.
● Convert your wire frame to a grid layout.
● Build out the HTML fragments in the relevant
tpl.php files.
● Apply your theme to the site.
● Refine as necessary based on the UX.

10. Key Tools

12. Wire Frames
www.balsamiq.com

13. CSS Grid Framework
http://960.gs/

14. CSS Grid Framework

15. Base Theme
● drupal.org/project/ninesixty
● drupal.org/project/fusion
● http://drupal.org/project/zen_ninesixty

16. Text Editor
Use something better than a punch in the face.

17. Names of Drupal Variables
Also go to: http://api.drupal.org

18. But how do I theme
that thing?

19. Forensic Theming
● Definition: the art of investigating a Drupal page to
find out how that thing got there.
● Toolkit:
● Firebug
● Sweaver
● Devel themer
● Requirements: Plan and Build your site before you
theme.

20. Step Away from the Code
● Most common problems are so common they can
be solved with settings in the administrative
interface.
● Get to know Drupal really well and can do less
work to make your site look right.
● Use helper modules to avoid writing new code.

21. The Clues are in the Code
● Look at the class names to find out what module
made that.
● Use the body classes to make page-specific
selectors.
● Before you make another theme tpl.php file make
sure you really need to.

23. Firebug
● Inspect element.
● Edit CSS properties.
● Edit CSS files.
● Cannot publish changes.
● www.getfirebug.com

24. Less Yucky Markup
● European vs American theming
● Inheritance: start with a better base.
● Base theme: mothership
● Modules: Semantic Views
● D6 Modules: Semantic CCK

26. Sweaver
● Pointy-clicky-non-scary CSS class selector.
● Can make minor changes to CSS for a set of styles
and save to the server.
● drupal.org/project/sweaver

28. Devel / Themer
● The Cadillac of theming tools.
● Tells you which tpl.php or theme function is
responsible for that thing displaying over there.

29. Build me a theme!

33. Theme Folder
sites/example.com/themes/theme_name
theme_name.info
page.tpl.php
Also: sites/all/themes/base_theme

34. theme_name.info (1 of 2)
name = D7SBE - Domicile
description = A three-column design by Design House (www.design-house.ca) and
themed by Design to Theme.
screenshot = screenshot.png
core = 7.x
engine = phptemplate
base theme = ninesixty
; Stylesheets.
stylesheets[all][] = styles.css
; To show the 960.gs grid and debug your theme's layout, delete this section.
; You will be able to remove this when http://drupal.org/node/1032486 is rolled out
stylesheets[all][] = debug.css

35. theme_name.info (2 of 2)
; Regions
regions[nav_left] = Navigation (left)
regions[feature_middle]= Feature column (middle)
regions[content] = Content column (right)
regions[copyright_footer] = Copyright notice (footer)
; Features
features[] = logo
features[] = name
features[] = favicon

36. page.tpl.php

42. Hard Code Relevant Images

43. Minimum Viable Theme

44. + forensic theming

45. styles.css

46. Domicile: the theme

47. Domicile
● Designed by Betty Biesenthal.
● Themed by Emma Jane Hogbin.
● Will be available from
http://drupal.org/project/domicile

48. What did you think?
Locate this session on the DCC
website:
http://chicago2011.drupal.org/sessions
Click the “Take the Survey” link.
Thanks!