Forensic ThemingEmma Jane Hogbin
Book (Co)Author
Trainer: Site Building Extravaganzahttp://farm4.static.flickr.com/3567/3392276341_8712643bfb.jpg
Workbook Author: Design to ThemeSee also: the inside spread of your Drupal Watchdog,that really awesome magazine thats in ...
Knitter of The SocksPattern at: www.emmajane.net/craft/drupalhttp://www.flickr.com/photos/mortendk/1439332466/
www.emmajane.net/craft/drupal
th        Happy 100International Womens Day
The Making of a ThemeMommy, where do themes come from?● Modules →● Templates →● Base theme →● Your theme →● Rendered page
Steps to Making a Theme●   Communicate with your whole team.●   Use wire frames to prove what youre saying about    how th...
Key Tools
Wire Frames       www.balsamiq.com
CSS Grid Frameworkhttp://960.gs/
CSS Grid Framework
Base Theme●   drupal.org/project/ninesixty●   drupal.org/project/fusion●   http://drupal.org/project/zen_ninesixty
Text EditorUse something better than a punch in the face.
Names of Drupal Variables   Also go to: http://api.drupal.org
But how do I theme  that thing?
Forensic Theming●   Definition: the art of investigating a Drupal page to    find out how that thing got there.●   Toolkit...
Step Away from the Code●   Most common problems are so common they can    be solved with settings in the administrative   ...
The Clues are in the Code●   Look at the class names to find out what module    made that.●   Use the body classes to make...
Firebug●   Inspect element.●   Edit CSS properties.●   Edit CSS files.●   Cannot publish changes.●   www.getfirebug.com
Less Yucky Markup●   European vs American theming●   Inheritance: start with a better base.●   Base theme: mothership●   M...
Sweaver●   Pointy-clicky-non-scary CSS class selector.●   Can make minor changes to CSS for a set of styles    and save to...
Devel / Themer●   The Cadillac of theming tools.●   Tells you which tpl.php or theme function is    responsible for that t...
Build me a theme!
Theme Foldersites/example.com/themes/theme_name   theme_name.info   page.tpl.phpAlso: sites/all/themes/base_theme
theme_name.info (1 of 2)name = D7SBE - Domiciledescription = A three-column design by Design House (www.design-house.ca) a...
theme_name.info (2 of 2); Regionsregions[nav_left] = Navigation (left)regions[feature_middle]= Feature column (middle)regi...
page.tpl.php
Hard Code Relevant Images
Minimum Viable Theme
+ forensic theming
styles.css
Domicile: the theme
Domicile●   Designed by Betty Biesenthal.●   Themed by Emma Jane Hogbin.●   Will be available from    http://drupal.org/pr...
What did you think?Locate this session on the DCCwebsite:http://chicago2011.drupal.org/sessionsClick the “Take the Survey”...
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Upcoming SlideShare
Loading in...5
×

Forensic Theming for Drupal

6,290

Published on

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,290
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
111
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Forensic Theming for Drupal

  1. 1. Forensic ThemingEmma Jane Hogbin
  2. 2. Book (Co)Author
  3. 3. Trainer: Site Building Extravaganzahttp://farm4.static.flickr.com/3567/3392276341_8712643bfb.jpg
  4. 4. Workbook Author: Design to ThemeSee also: the inside spread of your Drupal Watchdog,that really awesome magazine thats in your loot bag.
  5. 5. Knitter of The SocksPattern at: www.emmajane.net/craft/drupalhttp://www.flickr.com/photos/mortendk/1439332466/
  6. 6. www.emmajane.net/craft/drupal
  7. 7. th Happy 100International Womens Day
  8. 8. The Making of a ThemeMommy, where do themes come from?● Modules →● Templates →● Base theme →● Your theme →● Rendered page
  9. 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. 10. Key Tools
  11. 11. Wire Frames www.balsamiq.com
  12. 12. CSS Grid Frameworkhttp://960.gs/
  13. 13. CSS Grid Framework
  14. 14. Base Theme● drupal.org/project/ninesixty● drupal.org/project/fusion● http://drupal.org/project/zen_ninesixty
  15. 15. Text EditorUse something better than a punch in the face.
  16. 16. Names of Drupal Variables Also go to: http://api.drupal.org
  17. 17. But how do I theme that thing?
  18. 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. 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. 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. 21. Firebug● Inspect element.● Edit CSS properties.● Edit CSS files.● Cannot publish changes.● www.getfirebug.com
  22. 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. 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. 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. 25. Build me a theme!
  26. 26. Theme Foldersites/example.com/themes/theme_name   theme_name.info   page.tpl.phpAlso: sites/all/themes/base_theme
  27. 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. 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. 29. page.tpl.php
  30. 30. Hard Code Relevant Images
  31. 31. Minimum Viable Theme
  32. 32. + forensic theming
  33. 33. styles.css
  34. 34. Domicile: the theme
  35. 35. Domicile● Designed by Betty Biesenthal.● Themed by Emma Jane Hogbin.● Will be available from http://drupal.org/project/domicile
  36. 36. What did you think?Locate this session on the DCCwebsite:http://chicago2011.drupal.org/sessionsClick the “Take the Survey” link.Thanks!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×