forensic theming for drupal
DESCRIPTION
TRANSCRIPT
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!