Forensic Theming for Drupal -- DrupalCon London

Transcript

1. Forensic Theming Design, UX and Theming Emma Jane Hogbin @emmajanedotnet www.designtotheme.com
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. Really Tiny Web Budgets
4. The Socks http://www.flickr.com/photos/mortendk/1439332466/
5. www.emmajane.net/craft/drupal
6. Book (Co)Author
7. Workbook Author www.designtotheme.com Discount Code: DCLON87488 Valid to the end of August.
8. Drupal Trainer www.sitebuildingextravaganza.com
9. Lazy Front End Developer
10. I'll just change this one tpl.php file http://www.flickr.com/photos/gibbons/2500423526
11. Okay ... and a module file?
12. and ...
13. ... everything else too? Bugger. http://www.flickr.com/photos/amagill/3225245292
14. This presentation is not about ... • Best practices • Anything advanced • Design • Semantic markup • Responsive Web design • Typography • Grids (maybe a little bit) • CSS optimization • CSS preprocessing • Rick Astley • PHP • Hooks • Inheritance • HTML5 • Photoshop • Web systems • Theming APIs • Mobile devices • Unicorns • Sprites • In-the-browser design • Sliding doors • Gradients • IE6
15. Advanced Theming Sessions Display Suite Tuesday 17:00 - NodeOne Road - Fairfield Room http://tinyurl.com/dclondon-displaysuite Theming API Tuesday 15:45 - NodeOne Road - Fairfield Room http://tinyurl.com/dclondon-themingapi Responsive Design Thursday 11am - Axis 12 Street - Arnhem Gallery http://tinyurl.com/dclondon-responsivedesign
16. Forensic Theming Best Practices Dissecting Themes
17. Agenda Tools for Forensic Theming • Sweaver • Firebug • Devel Themer Theming Tools • Sketchbooks • Wireframes • Data models • Grid frameworks Summary • Questions/Answers • Bonuses Theme Building • Base themes • Image extraction • MVTs • Forensic styling • CSS Frameworks • Base themes • Layout modules • Text editors
18. The Crime
19. Crime Scene
20. Forensic Theming Definition: the art of investigating a Drupal page to find out how that thing got there.
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. Crime Scene Working with rendered pages. You can only look at the effects of Drupal on a rendered page.
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. Sweaver User Interface
25. Click on Stuff
26. See How a Selector Will Be Applied Change CSS properties See the changes CSS selector to use in your theme
27. Risky Live Demo http://d7.sandbox/sweaver
28. Identifying What's 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. Locate Properties of Page Elements Relevant HTML source Page element CSS styles
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. 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. Forensics
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. Point, Click, Analyse 1. Enable Themer Info 2. Click on the thing you want to investigate 3. Analyse the list of functions, templates, variables, etc which control this page element.
35. Investigate What Themer Reveals Also go to: http://api.drupal.org
36. Ooops.
37. No risky live demo.
38. Making It Easier
39. node.tpl.php page.tpl.php field.tpl.php jplayer.tpl.php
40. content
41. Pink sherbert photography http://www.flickr.com/photos/pinksherbet/3372060864/ I want less yucky markup!
43. 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
44. Theming Tools
45. Sketchbook
46. Wire Frames www.balsamiq.com
47. Data Model http://www.flickr.com/photos/alan-dean/3513723498
48. Grid Framework http://960.gs/
49. 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 doesn't finish his book you're going to build exclusively 16-column, grid-based Web sites until his book his published.
50. CSS (Grid) Framework
51. Base Theme • drupal.org/project/ninesixty • drupal.org/project/fusion • drupal.org/project/zen
52. Drupal (Layout) Modules • Context http://drupal.org/project/context • Display Suite http://drupal.org/project/ds • Panels http://drupal.org/project/panels
53. Text Editor Use anything that doesn't make you want to punch someone in the face.
54. Build me a theme!
55. Steps to Making a Theme 1. Communicate with your whole team. 2.Plan your data structure. 3.Use wire frames to prove what you're 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.
56. Domicile • Designed by Betty Biesenthal. • Themed by Emma Jane Hogbin. • Available from http://drupal.org/project/domicile • Described in Drupal: a user's guide
60. Theme Folder sites/example.com/themes/theme_name theme_name.info page.tpl.php Also: sites/all/themes/base_theme
61. 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
62. 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
63. page.tpl.php
69. Hard Code Relevant Images
70. Minimum Viable Theme
71. Locate Properties of Page Elements Relevant HTML source Page element CSS styles
72. styles.css
73. Domicile: the theme
74. 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.
75. Available September 2011 The practical guide to building sites with Drupal. Pre-order eBook edition on and SAVE 45%! Use Coupon Code IUGD45 at Step 3 of Checkout
76. 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
77. What did you think? Locate this session on the DrupalCon London website: http://london2011.drupal.org/conference/schedule Click the “Take the survey” link Discounts'n'stuff 45% off Drupal User Guide www.informit.com Code: IUGD45 45% off Design to Theme workbooks www.designtotheme.com Code: DCLON87488 www.sitebuildingextravaganza.com @emmajanedotnet emma@designtotheme.com 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 BoFs