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
Developer Data Modeling Mistakes: From Postgres to NoSQL
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.
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
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
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
41. I want less yucky markup!
Pink sherbert photography http://www.flickr.com/photos/pinksherbet/3372060864/
42.
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
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.
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
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