Forensic Theming for Drupal

Forensic ThemingEmma Jane Hogbin

Book (Co)Author

Trainer: Site Building Extravaganza

http://farm4.static.flickr.com/3567/3392276341_8712643bfb.jpg

Workbook Author: Design to Theme

See also: the inside spread of your Drupal Watchdog, that really awesome magazine that's in your loot bag.

Knitter of The Socks

Pattern at: www.emmajane.net/craft/drupal

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

www.emmajane.net/craft/drupal

Happy 100Happy 100thth

International Women's DayInternational Women's Day

The Making of a Theme

Mommy, where do themes come from?● Modules → ● Templates → ● Base theme →● Your theme → ● Rendered page

Steps to Making a Theme

● Communicate with your whole team.● Use wire frames to prove what you're saying about

how the site ought to be built.● Build the site without a theme.● Convert your wire frame to a grid layout.● Build out the HTML fragments in the relevant

tpl.php files.● Apply your theme to the site.● Refine as necessary based on the UX.

Key Tools

Wire Frames

www.balsamiq.com

CSS Grid Framework

http://960.gs/

CSS Grid Framework

Base Theme

● drupal.org/project/ninesixty● drupal.org/project/fusion● http://drupal.org/project/zen_ninesixty

Text EditorText EditorUse something better than a punch in the face.

Names of Drupal Variables

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

But how do I theme that thing?

Forensic Theming

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

● Toolkit:● Firebug● Sweaver● Devel themer

● Requirements: Plan and Build your site before you theme.

Step Away from the Code

● Most common problems are so common they can be solved with settings in the administrative interface.

● Get to know Drupal really well and can do less work to make your site look right.

● Use helper modules to avoid writing new code.

The Clues are in the Code

● Look at the class names to find out what module made that.

● Use the body classes to make page-specific selectors.

● Before you make another theme tpl.php file make sure you really need to.

Firebug

● Inspect element.● Edit CSS properties.● Edit CSS files.● Cannot publish changes.● www.getfirebug.com

Less Yucky Markup

● European vs American theming● Inheritance: start with a better base.● Base theme: mothership● Modules: Semantic Views● D6 Modules: Semantic CCK

Sweaver

● Pointy-clicky-non-scary CSS class selector.● Can make minor changes to CSS for a set of styles

and save to the server.● drupal.org/project/sweaver

Devel / Themer

● The Cadillac of theming tools.● Tells you which tpl.php or theme function is

responsible for that thing displaying over there.

Build me a theme!

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

page.tpl.php

Hard Code Relevant Images

Minimum Viable Theme

+ forensic theming

styles.css

Domicile: the theme

Domicile

● Designed by Betty Biesenthal.● Themed by Emma Jane Hogbin.● Will be available from

http://drupal.org/project/domicile

What did you think?Locate this session on the DCC

website:http://chicago2011.drupal.org/sessions

Click the “Take the Survey” link.

Thanks!