• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Forensic ThemingEmma Jane Hogbin
  • 2. Book (Co)Author
  • 3. Trainer: Site Building Extravaganzahttp://farm4.static.flickr.com/3567/3392276341_8712643bfb.jpg
  • 4. Workbook Author: Design to ThemeSee also: the inside spread of your Drupal Watchdog,that really awesome magazine thats in your loot bag.
  • 5. Knitter of The SocksPattern at: www.emmajane.net/craft/drupalhttp://www.flickr.com/photos/mortendk/1439332466/
  • 6. www.emmajane.net/craft/drupal
  • 7. th Happy 100International Womens Day
  • 8. The Making of a ThemeMommy, 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 youre 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
  • 11. Wire Frames www.balsamiq.com
  • 12. CSS Grid Frameworkhttp://960.gs/
  • 13. CSS Grid Framework
  • 14. Base Theme● drupal.org/project/ninesixty● drupal.org/project/fusion● http://drupal.org/project/zen_ninesixty
  • 15. Text EditorUse something better than a punch in the face.
  • 16. Names of Drupal Variables Also go to: http://api.drupal.org
  • 17. But how do I theme that thing?
  • 18. 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.
  • 19. 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.
  • 20. 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.
  • 21. Firebug● Inspect element.● Edit CSS properties.● Edit CSS files.● Cannot publish changes.● www.getfirebug.com
  • 22. Less Yucky Markup● European vs American theming● Inheritance: start with a better base.● Base theme: mothership● Modules: Semantic Views● D6 Modules: Semantic CCK
  • 23. 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
  • 24. Devel / Themer● The Cadillac of theming tools.● Tells you which tpl.php or theme function is responsible for that thing displaying over there.
  • 25. Build me a theme!
  • 26. Theme Foldersites/example.com/themes/theme_name   theme_name.info   page.tpl.phpAlso: sites/all/themes/base_theme
  • 27. theme_name.info (1 of 2)name = D7SBE - Domiciledescription = A three-column design by Design House (www.design-house.ca) andthemed by Design to Theme.screenshot = screenshot.pngcore = 7.xengine = phptemplatebase theme = ninesixty; Stylesheets.stylesheets[all][] = styles.css; To show the 960.gs grid and debug your themes layout, delete this section.; You will be able to remove this when http://drupal.org/node/1032486 is rolled outstylesheets[all][] = debug.css
  • 28. theme_name.info (2 of 2); Regionsregions[nav_left] = Navigation (left)regions[feature_middle]= Feature column (middle)regions[content] = Content column (right)regions[copyright_footer] = Copyright notice (footer); Featuresfeatures[] = logofeatures[] = namefeatures[] = favicon
  • 29. page.tpl.php
  • 30. Hard Code Relevant Images
  • 31. Minimum Viable Theme
  • 32. + forensic theming
  • 33. styles.css
  • 34. Domicile: the theme
  • 35. Domicile● Designed by Betty Biesenthal.● Themed by Emma Jane Hogbin.● Will be available from http://drupal.org/project/domicile
  • 36. What did you think?Locate this session on the DCCwebsite:http://chicago2011.drupal.org/sessionsClick the “Take the Survey” link.Thanks!