Forensic Theming - DrupalCon London

Design, UX and Theming

Forensic 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 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.

The Socks

http://www.flickr.com/photos/mortendk/1439332466/

Workbook Author
www.designtotheme.com
Discount Code: DCLON87488
Valid to the end of August.

Drupal Trainer

www.sitebuildingextravaganza.com

I'll just change this one tpl.php file
http://www.flickr.com/photos/gibbons/2500423526

... everything else too? Bugger.
http://www.flickr.com/photos/amagill/3225245292

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

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

Forensic Theming

Best
Practices
Dissecting
Themes

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

Forensic Theming

Definition: the art of
investigating a
Drupal page to find
out how that thing
got there.

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

Crime Scene

Working with rendered
pages. You can only look
at the effects of Drupal
on a rendered page.

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

See How a Selector Will Be Applied

Change CSS properties
See the changes

CSS selector to use in your theme

Risky Live Demo
http://d7.sandbox/sweaver

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

Locate Properties of Page Elements

Relevant HTML Page element CSS styles
source

Risky Live Firebug Demo
●
http://d7.sandbox/sbe-site3/
● Inspect element.
● Edit CSS properties.
● Edit CSS files.
● Cannot publish changes.
● www.getfirebug.com

Other Useful Browser Tools
●
Web Developer Toolbar
http://chrispederick.com/work/web-developer/
● IE Web Developer Toolbar
http://tinyurl.com/ie-web-dev-toolbar

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

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

Investigate What Themer Reveals

Also go to: http://api.drupal.org

node.tpl.php

field.tpl.php

jplayer.tpl.php

page.tpl.php

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
● Modules: Semantic Views
● D6 Modules: Semantic CCK
● HTML5 http://drupal.org/project/html5_tools

Wire Frames

www.balsamiq.com

Data Model

http://www.flickr.com/photos/alan-dean/3513723498

Grid Framework

http://960.gs/

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.

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
● Panels http://drupal.org/project/panels

Text Editor
Use anything that doesn't make you
want to punch someone in the face.

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.

Domicile
●
Designed by Betty Biesenthal.
● Themed by Emma Jane Hogbin.
● Available from http://drupal.org/project/domicile
● Described in Drupal: a user's guide

Theme Folder

sites/example.com/themes/theme_name
theme_name.info
page.tpl.php

Also: sites/all/themes/base_theme

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

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

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.

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

Theming Birds of a Feather Sessions
●
Advanced Theming
Time slot: 24 August 13:45 – 14:45
Room 333 Part 1
●
Front End Development
Room 333 Part 2
●
Theming in Drupal 8
Room 333 Part 2

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
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

Forensic Theming - DrupalCon London

Forensic Theming - DrupalCon London

More Related Content

What's hot

Viewers also liked

Similar to Forensic Theming - DrupalCon London

More from Emma Jane Hogbin Westby

Recently uploaded

Forensic Theming - DrupalCon London