Your SlideShare is downloading. ×
0
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Forensic Theming for Drupal
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Forensic Theming for Drupal

6,186

Published on

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,186
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
111
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!

×