Your SlideShare is downloading. ×
Forensic Theming for Drupal
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Forensic Theming for Drupal


Published on

  • 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 Extravaganza
  • 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:
  • 6.
  • 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
  • 12. CSS Grid Framework
  • 13. CSS Grid Framework
  • 14. Base Theme●●●
  • 15. Text EditorUse something better than a punch in the face.
  • 16. Names of Drupal Variables Also go to:
  • 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.●
  • 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.●
  • 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/   page.tpl.phpAlso: sites/all/themes/base_theme
  • 27. (1 of 2)name = D7SBE - Domiciledescription = A three-column design by Design House ( andthemed by Design to Theme.screenshot = screenshot.pngcore = 7.xengine = phptemplatebase theme = ninesixty; Stylesheets.stylesheets[all][] = styles.css; To show the grid and debug your themes layout, delete this section.; You will be able to remove this when is rolled outstylesheets[all][] = debug.css
  • 28. (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
  • 36. What did you think?Locate this session on the DCCwebsite: the “Take the Survey” link.Thanks!