Forensic Theming - DrupalCon London
3 likes1,638 views
The document discusses the concept of forensic theming in Drupal, emphasizing the process of investigating how web elements are constructed on a page through various tools and techniques. It outlines essential theming tools, CSS selector identification, and debugging methods to optimize themes effectively. The presentation also includes a step-by-step guide for building themes and highlights upcoming Drupal events and discounts.
![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](https://image.slidesharecdn.com/drupalcon-london-export-110822210831-phpapp01/85/Forensic-Theming-DrupalCon-London-61-320.jpg)
![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](https://image.slidesharecdn.com/drupalcon-london-export-110822210831-phpapp01/85/Forensic-Theming-DrupalCon-London-62-320.jpg)
Forensic Theming - DrupalCon London
- 1. Design, UX and Theming Forensic 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
- 7. Workbook Author www.designtotheme.com Discount Code: DCLON87488 Valid to the end of August.
- 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 ● 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. 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 Theming Tools Sketchbooks CSS Frameworks Sweaver ● ● ● Wireframes ● Base themes Firebug ● ● ● Data models ● Layout modules ● Devel Themer ● Grid frameworks ● Text editors Theme Building Summary ● Base themes ● Questions/Answers ● Image extraction ● Bonuses ● MVTs ● Forensic styling
- 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
- 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
- 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 Page element CSS styles source
- 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 3. Analyse the list of functions, templates, 2. Click on the thing variables, etc which 1. Enable Themer Info you want to control this page element. investigate
- 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 field.tpl.php jplayer.tpl.php page.tpl.php
- 40. content
- 41. I want less yucky markup! Pink sherbert photography http://www.flickr.com/photos/pinksherbet/3372060864/
- 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
- 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.
- 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
- 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
- 71. Locate Properties of Page Elements Relevant HTML Page element CSS styles source
- 72. styles.css
- 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. 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 Available September 2011
- 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 BoFs 45% off Drupal User Guide Advanced Theming www.informit.com Code: IUGD45 Time slot: 24 August 13:45 – 14:45 Room 333 Part 1 45% off Design to Theme workbooks www.designtotheme.com Code: DCLON87488 Front End Development Time slot: 25 August 13:30 – 14:30 www.sitebuildingextravaganza.com Room 333 Part 2 @emmajanedotnet Theming in Drupal 8 emma@designtotheme.com Time slot: 25 August 14:45 – 15:45 Room 333 Part 2