Forensic Theming for Drupal
Upcoming SlideShare
Loading in...5

Forensic Theming for Drupal






Total Views
Views on SlideShare
Embed Views



3 Embeds 44 39 4 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Forensic Theming for Drupal Forensic Theming for Drupal Presentation Transcript

  • Forensic ThemingEmma Jane Hogbin
  • Book (Co)Author
  • Trainer: Site Building Extravaganza
  • 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:
  • 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
  • CSS Grid Framework
  • CSS Grid Framework
  • Base Theme●●●
  • Text EditorUse something better than a punch in the face.
  • Names of Drupal Variables Also go to:
  • 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.●
  • 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.●
  • 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/   page.tpl.phpAlso: sites/all/themes/base_theme
  • (1 of 2)name = D7SBE - Domiciledescription = A three-column design by Design House ( andthemed by Design to Theme.screenshot = screenshot.pngcore = 7.xengine = phptemplatebase theme = ninesixty; Stylesheets.stylesheets[all][] = styles.css; To show the grid and debug your themes layout, delete this section.; You will be able to remove this when is rolled outstylesheets[all][] = debug.css
  • (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
  • What did you think?Locate this session on the DCCwebsite: the “Take the Survey” link.Thanks!