• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
6,106
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
109
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Forensic ThemingEmma Jane Hogbin
  • 2. Book (Co)Author
  • 3. Trainer: Site Building Extravaganzahttp://farm4.static.flickr.com/3567/3392276341_8712643bfb.jpg
  • 4. Workbook Author: Design to ThemeSee also: the inside spread of your Drupal Watchdog,that really awesome magazine thats in your loot bag.
  • 5. Knitter of The SocksPattern at: www.emmajane.net/craft/drupalhttp://www.flickr.com/photos/mortendk/1439332466/
  • 6. www.emmajane.net/craft/drupal
  • 7. th Happy 100International Womens Day
  • 8. The Making of a ThemeMommy, where do themes come from?● Modules →● Templates →● Base theme →● Your theme →● Rendered page
  • 9. 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.
  • 10. Key Tools
  • 11. Wire Frames www.balsamiq.com
  • 12. CSS Grid Frameworkhttp://960.gs/
  • 13. CSS Grid Framework
  • 14. Base Theme● drupal.org/project/ninesixty● drupal.org/project/fusion● http://drupal.org/project/zen_ninesixty
  • 15. Text EditorUse something better than a punch in the face.
  • 16. Names of Drupal Variables Also go to: http://api.drupal.org
  • 17. But how do I theme that thing?
  • 18. 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.
  • 19. 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.
  • 20. 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.
  • 21. Firebug● Inspect element.● Edit CSS properties.● Edit CSS files.● Cannot publish changes.● www.getfirebug.com
  • 22. Less Yucky Markup● European vs American theming● Inheritance: start with a better base.● Base theme: mothership● Modules: Semantic Views● D6 Modules: Semantic CCK
  • 23. 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
  • 24. Devel / Themer● The Cadillac of theming tools.● Tells you which tpl.php or theme function is responsible for that thing displaying over there.
  • 25. Build me a theme!
  • 26. Theme Foldersites/example.com/themes/theme_name   theme_name.info   page.tpl.phpAlso: sites/all/themes/base_theme
  • 27. 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
  • 28. 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
  • 29. page.tpl.php
  • 30. Hard Code Relevant Images
  • 31. Minimum Viable Theme
  • 32. + forensic theming
  • 33. styles.css
  • 34. Domicile: the theme
  • 35. Domicile● Designed by Betty Biesenthal.● Themed by Emma Jane Hogbin.● Will be available from http://drupal.org/project/domicile
  • 36. What did you think?Locate this session on the DCCwebsite:http://chicago2011.drupal.org/sessionsClick the “Take the Survey” link.Thanks!