Forensic Theming for DrupalPresentation Transcript
Forensic ThemingEmma Jane Hogbin
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/
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.
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.
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