0
Design, UX and ThemingForensic Theming       Emma Jane Hogbin       @emmajanedotnet     www.designtotheme.com
drupal.org participation●   emmajane●   uid: 1773●   First look at the Drupal code base: 2003ish.    I stole the i18n tabl...
Really Tiny Web Budgets
The Sockshttp://www.flickr.com/photos/mortendk/1439332466/
www.emmajane.net/craft/drupal
Book (Co)Author
Workbook Author  www.designtotheme.comDiscount Code: DCLON87488 Valid to the end of August.
Drupal Trainer www.sitebuildingextravaganza.com
Lazy Front End Developer
Ill just change this one tpl.php file                  http://www.flickr.com/photos/gibbons/2500423526
Okay ... and a module file?
and ...
... everything else too? Bugger.                http://www.flickr.com/photos/amagill/3225245292
This presentation is not about ...●   Best practices          ●   Inheritance●   Anything advanced       ●   HTML5●   Desi...
Advanced Theming SessionsDisplay SuiteTuesday 17:00 - NodeOne Road - Fairfield Roomhttp://tinyurl.com/dclondon-displaysuit...
Forensic Theming       Best       Practices       Dissecting       Themes
AgendaTools for Forensic Theming   Theming Tools                                 Sketchbooks           CSS Frameworks    S...
The Crime
Crime Scene
Forensic ThemingDefinition: the art ofinvestigating aDrupal page to findout how that thinggot there.
Two Types of Clues       Crime Scene Investigation       Working with the rendered page:       ●   Available CSS selectors...
Crime Scene              Working with rendered              pages. You can only look              at the effects of Drupal...
Identifying CSS Selectors               With Sweaver●   Common newbie problem: being able to find    relevant CSS selector...
Sweaver User Interface
Click on Stuff
See How a Selector Will Be AppliedChange CSS properties                        See the changes                            ...
Risky Live Demohttp://d7.sandbox/sweaver
Identifying Whats Applied                With Firebug●    Common newbie problem: trying to identifying    what CSS styles ...
Locate Properties of Page ElementsRelevant HTML   Page element   CSS stylessource
Risky Live Firebug Demo●    http://d7.sandbox/sbe-site3/●   Inspect element.●   Edit CSS properties.●   Edit CSS files.●  ...
Other Useful Browser Tools●    Web Developer Toolbar    http://chrispederick.com/work/web-developer/●   IE Web Developer T...
Forensics
Devel / Themer●   The Cadillac of theming tools.●    Tells you which tpl.php or theme function is    responsible for that ...
Point, Click, Analyse                                                  3. Analyse the list of                             ...
Investigate What Themer Reveals      Also go to: http://api.drupal.org
Ooops.
No risky live demo.
Making It Easier
node.tpl.php                                 field.tpl.phpjplayer.tpl.php                  page.tpl.php
content
I want less yucky markup!Pink sherbert photography http://www.flickr.com/photos/pinksherbet/3372060864/
Less Yucky Markup●    European vs American theming●   Inheritance: start with a better base.●   Base theme: mothership●   ...
Theming Tools
Sketchbook
Wire Frames       www.balsamiq.com
Data Model    http://www.flickr.com/photos/alan-dean/3513723498
Grid Frameworkhttp://960.gs/
Want to Learn Grids?Harass @markboulton and tell him to finish his book.http://www.fivesimplesteps.com/Do it.Right now.Twe...
CSS (Grid) Framework
Base Theme●   drupal.org/project/ninesixty●   drupal.org/project/fusion●   drupal.org/project/zen
Drupal (Layout) Modules●    Context http://drupal.org/project/context●   Display Suite http://drupal.org/project/ds●   Pan...
Text EditorUse anything that doesnt make youwant to punch someone in the face.
Build me a theme!
Steps to Making a Theme1. Communicate with your whole team.2. Plan your data structure.3. Use wire frames to prove what yo...
Domicile●    Designed by Betty Biesenthal.●   Themed by Emma Jane Hogbin.●   Available from http://drupal.org/project/domi...
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)r...
page.tpl.php
Hard Code Relevant Images
Minimum Viable Theme
Locate Properties of Page ElementsRelevant HTML   Page element   CSS stylessource
styles.css
Domicile: the theme
Summary●   Plan. Think. Build. Test. Theme. Iterate.●   Use relevant Drupal modules to break up content and display it    ...
The practical guide to building sites with Drupal.                                              Pre-order eBook edition on...
Theming Birds of a Feather Sessions●    Advanced Theming    Time slot: 24 August 13:45 – 14:45    Room 333 Part 1●    Fron...
What did you think?      Locate this session on the DrupalCon London website:      http://london2011.drupal.org/conference...
Forensic Theming - DrupalCon London
Forensic Theming - DrupalCon London
Forensic Theming - DrupalCon London
Forensic Theming - DrupalCon London
Forensic Theming - DrupalCon London
Forensic Theming - DrupalCon London
Forensic Theming - DrupalCon London
Forensic Theming - DrupalCon London
Forensic Theming - DrupalCon London
Forensic Theming - DrupalCon London
Upcoming SlideShare
Loading in...5
×

Forensic Theming - DrupalCon London

2,361

Published on

The theme of your website has the capacity for beautiful, semantic markup...and also the hacky HTML soup. You can build a new theme by downloading a free theme and tearing out its guts--or you can learn how to become a theme surgeon.

In this session you will learn two key techniques needed to build a successful theme: crime scene investigation (identifying Drupal page elements in your design files) and power tools for copy-cat theming (things you need to recreate your design using Drupal). From start to finish we will transform a design file into a Drupal theme. With special attention given to your all-important questions: how do I save time with grid-based design? Should I use Panels? How do I make this bit of stuff appear next to that bit? Yah, but how do I start?

[This presentation was given at DrupalCon Chicago but the recording failed. Slides are available from http://www.slideshare.net/emmajane/forensic-theming-for-drupal]

About The Presenter
Emma Jane Hogbin is well known in the Drupal community for her engaging presentations and kickass theming book, Front End Drupal. She is currently working on her second book, Drupal: A user's guide which is due out shortly after DrupalCon. Through her training company, Design to Theme, emmajane has empowered thousands of people to create the Drupal site of their dreams.
Intended audience

Small business site builders who partner with graphic designers but have no idea how to make Drupal look like a design file. Intermediate themers who start with a free Drupal theme that looks "close" to the final site and then start hacking to make their theme. The audience currently does not use base themes and are frustrated at how complicated all of the code is. They are looking for shortcuts and some quick-fix solutions to make theming faster and more profitable.
Questions answered by this session

What are the key tools I need to use to make themeing Drupal easier?

How can I make Drupal markup less yucky?

Where should I start when building a new theme?

Yeah, but how do I theme *that thing*?

I want to see how you build a theme: show me!


Presented at: http://london2011.drupal.org/conference/sessions/forensic-theming-key-techniques-building-effective-drupal-themes

Published in: Technology, Design
2 Comments
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,361
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
72
Comments
2
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Forensic Theming - DrupalCon London"

  1. 1. Design, UX and ThemingForensic Theming Emma Jane Hogbin @emmajanedotnet www.designtotheme.com
  2. 2. drupal.org participation● emmajane● uid: 1773● First look at the Drupal code base: 2003ish. I stole the i18n table structure.● First Drupal site “for pay”: 2006ish.● First Drupal socks: 2007.● First DrupalCon conference: Szeged in 2008.● First Drupal book: 2009.● First Drupal core patch: 2010. Removed the “welcome” screen.
  3. 3. Really Tiny Web Budgets
  4. 4. The Sockshttp://www.flickr.com/photos/mortendk/1439332466/
  5. 5. www.emmajane.net/craft/drupal
  6. 6. Book (Co)Author
  7. 7. Workbook Author www.designtotheme.comDiscount Code: DCLON87488 Valid to the end of August.
  8. 8. Drupal Trainer www.sitebuildingextravaganza.com
  9. 9. Lazy Front End Developer
  10. 10. Ill just change this one tpl.php file http://www.flickr.com/photos/gibbons/2500423526
  11. 11. Okay ... and a module file?
  12. 12. and ...
  13. 13. ... everything else too? Bugger. http://www.flickr.com/photos/amagill/3225245292
  14. 14. This presentation is not about ...● Best practices ● Inheritance● Anything advanced ● HTML5● Design ● Photoshop● Semantic markup ● Web systems● Responsive Web design ● Theming APIs● Typography ● Mobile devices● Grids (maybe a little bit) ● Unicorns● CSS optimization ● Sprites● CSS preprocessing ● In-the-browser design● Rick Astley ● Sliding doors● PHP ● Gradients● Hooks ● IE6
  15. 15. Advanced Theming SessionsDisplay SuiteTuesday 17:00 - NodeOne Road - Fairfield Roomhttp://tinyurl.com/dclondon-displaysuiteTheming APITuesday 15:45 - NodeOne Road - Fairfield Roomhttp://tinyurl.com/dclondon-themingapiResponsive DesignThursday 11am - Axis 12 Street - Arnhem Galleryhttp://tinyurl.com/dclondon-responsivedesign
  16. 16. Forensic Theming Best Practices Dissecting Themes
  17. 17. AgendaTools for Forensic Theming Theming Tools Sketchbooks CSS Frameworks Sweaver ●● ● Wireframes ● Base themes Firebug ●● ● Data models ● Layout modules● Devel Themer ● Grid frameworks ● Text editorsTheme Building Summary● Base themes ● Questions/Answers● Image extraction ● Bonuses● MVTs● Forensic styling
  18. 18. The Crime
  19. 19. Crime Scene
  20. 20. Forensic ThemingDefinition: the art ofinvestigating aDrupal page to findout how that thinggot there.
  21. 21. Two Types of Clues Crime Scene Investigation Working with the rendered page: ● Available CSS selectors. ● Applied CSS styles. Crime Lab Forensics Working with Drupal code files: ● Theme templates ● Module templates ● Hard coded module nonsense
  22. 22. Crime Scene Working with rendered pages. You can only look at the effects of Drupal on a rendered page.
  23. 23. Identifying CSS Selectors With Sweaver● Common newbie problem: being able to find relevant CSS selectors.● Sweaver can be used as a pointy-clicky-non-scary CSS class selector.● Can save/publish minor changes to CSS to live Web sites.● http://drupal.org/project/sweaver
  24. 24. Sweaver User Interface
  25. 25. Click on Stuff
  26. 26. See How a Selector Will Be AppliedChange CSS properties See the changes CSS selector to use in your theme
  27. 27. Risky Live Demohttp://d7.sandbox/sweaver
  28. 28. Identifying Whats Applied With Firebug● Common newbie problem: trying to identifying what CSS styles are being applied by staring at code.● Firebug can be used to identify what CSS is actually being applied to a rendered Web page.● www.getfirebug.com
  29. 29. Locate Properties of Page ElementsRelevant HTML Page element CSS stylessource
  30. 30. Risky Live Firebug Demo● http://d7.sandbox/sbe-site3/● Inspect element.● Edit CSS properties.● Edit CSS files.● Cannot publish changes.● www.getfirebug.com
  31. 31. Other Useful Browser Tools● Web Developer Toolbar http://chrispederick.com/work/web-developer/● IE Web Developer Toolbar http://tinyurl.com/ie-web-dev-toolbar
  32. 32. Forensics
  33. 33. Devel / Themer● The Cadillac of theming tools.● Tells you which tpl.php or theme function is responsible for that thing displaying over there.● http://drupal.org/project/devel_themer● http://drupal.org/project/devel
  34. 34. Point, Click, Analyse 3. Analyse the list of functions, templates, 2. Click on the thing variables, etc which1. Enable Themer Info you want to control this page element. investigate
  35. 35. Investigate What Themer Reveals Also go to: http://api.drupal.org
  36. 36. Ooops.
  37. 37. No risky live demo.
  38. 38. Making It Easier
  39. 39. node.tpl.php field.tpl.phpjplayer.tpl.php page.tpl.php
  40. 40. content
  41. 41. I want less yucky markup!Pink sherbert photography http://www.flickr.com/photos/pinksherbet/3372060864/
  42. 42. Less Yucky Markup● European vs American theming● Inheritance: start with a better base.● Base theme: mothership● Modules: Semantic Views● D6 Modules: Semantic CCK● HTML5 http://drupal.org/project/html5_tools
  43. 43. Theming Tools
  44. 44. Sketchbook
  45. 45. Wire Frames www.balsamiq.com
  46. 46. Data Model http://www.flickr.com/photos/alan-dean/3513723498
  47. 47. Grid Frameworkhttp://960.gs/
  48. 48. Want to Learn Grids?Harass @markboulton and tell him to finish his book.http://www.fivesimplesteps.com/Do it.Right now.Tweet him.And tell him if he doesnt finish his book youre goingto build exclusively 16-column, grid-based Web sitesuntil his book his published.
  49. 49. CSS (Grid) Framework
  50. 50. Base Theme● drupal.org/project/ninesixty● drupal.org/project/fusion● drupal.org/project/zen
  51. 51. Drupal (Layout) Modules● Context http://drupal.org/project/context● Display Suite http://drupal.org/project/ds● Panels http://drupal.org/project/panels
  52. 52. Text EditorUse anything that doesnt make youwant to punch someone in the face.
  53. 53. Build me a theme!
  54. 54. Steps to Making a Theme1. Communicate with your whole team.2. Plan your data structure.3. Use wire frames to prove what youre saying about how the site ought to be built.4.Build the site (ignore the theme).5. Convert your wire frame to a grid layout.6.Build out the HTML fragments in the relevant tpl.php files.7. Apply your theme to the site.8.Refine as necessary based on the UX.
  55. 55. Domicile● Designed by Betty Biesenthal.● Themed by Emma Jane Hogbin.● Available from http://drupal.org/project/domicile● Described in Drupal: a users guide
  56. 56. Theme Foldersites/example.com/themes/theme_name   theme_name.info   page.tpl.phpAlso: sites/all/themes/base_theme
  57. 57. theme_name.info (1 of 2)name = D7SBE - Domiciledescription = A three-column design by Design House (www.design-house.ca) and themed byDesign 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
  58. 58. 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
  59. 59. page.tpl.php
  60. 60. Hard Code Relevant Images
  61. 61. Minimum Viable Theme
  62. 62. Locate Properties of Page ElementsRelevant HTML Page element CSS stylessource
  63. 63. styles.css
  64. 64. Domicile: the theme
  65. 65. Summary● Plan. Think. Build. Test. Theme. Iterate.● Use relevant Drupal modules to break up content and display it in relevant locations.● Use Sweaver to isolate selectors for your CSS files.● Use Firebug to diagnose and fix CSS problems.● Use Devel to isolate theme functions and variables.● Correlate the number of tpl and PHP files you edit to the size of your budget and amount of time you have.
  66. 66. The practical guide to building sites with Drupal. Pre-order eBook edition on and SAVE 45%! Use Coupon Code IUGD45 at Step 3 of CheckoutAvailable September 2011
  67. 67. Theming Birds of a Feather Sessions● Advanced Theming Time slot: 24 August 13:45 – 14:45 Room 333 Part 1● Front End Development Time slot: 25 August 13:30 – 14:30 Room 333 Part 2● Theming in Drupal 8 Time slot: 25 August 14:45 – 15:45 Room 333 Part 2
  68. 68. What did you think? Locate this session on the DrupalCon London website: http://london2011.drupal.org/conference/scheduleClick the “Take the survey” linkDiscountsnstuff BoFs45% off Drupal User Guide Advanced Themingwww.informit.com Code: IUGD45 Time slot: 24 August 13:45 – 14:45 Room 333 Part 145% off Design to Theme workbookswww.designtotheme.com Code: DCLON87488 Front End Development Time slot: 25 August 13:30 – 14:30www.sitebuildingextravaganza.com Room 333 Part 2@emmajanedotnet Theming in Drupal 8emma@designtotheme.com Time slot: 25 August 14:45 – 15:45 Room 333 Part 2
  1. A particular slide catching your eye?

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

×