Forensic Theming for Drupal

Forensic ThemingEmma Jane Hogbin

Book (Co)Author

Trainer: Site Building Extravaganzahttp://farm4.static.flickr.com/3567/3392276341_8712643bfb.jpg

Workbook Author: Design to ThemeSee also: the inside spread of your Drupal Watchdog,that really awesome magazine thats in your loot bag.

Knitter of The SocksPattern at: www.emmajane.net/craft/drupalhttp://www.flickr.com/photos/mortendk/1439332466/

www.emmajane.net/craft/drupal

th Happy 100International Womens Day

The Making of a ThemeMommy, 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 youre 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 Frameworkhttp://960.gs/

CSS Grid Framework

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

Text 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 Foldersites/example.com/themes/theme_name theme_name.info page.tpl.phpAlso: sites/all/themes/base_theme

theme_name.info (1 of 2)name = D7SBE - Domiciledescription = A three-column design by Design House (www.design-house.ca) andthemed by Design to Theme.screenshot = screenshot.pngcore = 7.xengine = phptemplatebase theme = ninesixty; Stylesheets.stylesheets[all][] = styles.css; To show the 960.gs grid and debug your themes layout, delete this section.; You will be able to remove this when http://drupal.org/node/1032486 is rolled outstylesheets[all][] = debug.css

theme_name.info (2 of 2); Regionsregions[nav_left] = Navigation (left)regions[feature_middle]= Feature column (middle)regions[content] = Content column (right)regions[copyright_footer] = Copyright notice (footer); Featuresfeatures[] = logofeatures[] = namefeatures[] = 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 DCCwebsite:http://chicago2011.drupal.org/sessionsClick the “Take the Survey” link.Thanks!

http://drupalthailand.com	16
http://www.drupalthailand.com	4
http://www.onlydoo.com	1

Forensic Theming for Drupal

by Emma Jane Hogbin

Accessibility

Upload Details

Usage Rights

3 Embeds 21

Statistics