You've just been handed a gorgeous, static Photoshop file. By tomorrow it needs to be a flexible, extensible, and compatible Drupal theme for some Web site you've never seen. Oh and they said something about it needing to be responsive to 508 or something like that? *gulp* No worries! In this one-hour webinar, Drupal rock star Emma Jane Hogbin, will give you a sneak peek inside her brand new book Drupal: A User's Guide and show you how to transform a Photoshop file into a real live theme. As part of this webinar you will receive all of the code for the theme we build so you can watching, listening and learning how to quickly build themes for Drupal 7. We'll cover: Rapid prototyping with Minimum Viable Themes Choosing the best base theme for your current project--no, one size doesn't fit all--especially if the design was meant to be responsive How to save time with image extraction techniques Smoothing out the transition from design to theme with powerful helper modules

1. Get Ready ...
To prepare for this seminar you should download a copy of the
following themes:
● http://drupal.org/project/ninesixty
● http://drupal.org/project/domicile
If you need to leave:
● This session is recorded. If the recording fails, this is a similar
presentation to the one I gave at DrupalCon London.
● The information is available in: Drupal User's Guide or workbooks
at Designtotheme.com.
● Slides are available from: slideshare.net/emmajane

2. Drupal Trainer
www.sitebuildingextravaganza.com

3. Workbook Author
www.designtotheme.com
Discount code available at the end of the webinar.

4. Book (Co)Author

5. Agenda
Theme Building Summary
● Theming philosophy ● Questions/Answers
● Process ● Discount Coupons
● Case study: Domicile 20 minutes
35 minutes

6. Theming Philosophy

7. Lazy Front End Developer

8. Working With Others
Produces More Honey

9. Theming by tpl.php Files
Wastes Your Time
node.tpl.php
field.tpl.php
jplayer.tpl.php
page.tpl.php

10. Take Only Pictures, Leave Only Footprints
Theme Only What You Need To
UX
UX
Minimum Viable Theme
UX
UX

11. Budget-Appropriate Web Design
●
Know your Drupal toolkit. Know your budget.
●
Focus on the biggest elements first.
● Work closely with your designer and your client to
make sure you get the important things right.
●
Theme with the markup you have, not the markup
you'd like to have.
●
Pixel perfect design is for print. Get over it.

12. Accessible Web Design
“Accessible web design refers to the philosophy and
practice of designing web pages so that they can be
navigated and read by everyone, regardless of location,
experience, or the type of computer technology used.”
Australian Human Rights Commission
● Know your guidelines (508 or WAI).
● Use a checklist.
● Use an automated testing suite.
● Test with users.
http://www.designtotheme.com/tutorials/automated-accessibility-testing

13. Responsive Web Design
“Any approach that delivers elegant visual
experiences regardless of the size of the user’s
display and the limitations or capabilities of the
device” zeldman.
●
Read: http://tinyurl.com/responsive-article
●
Buy (and read): http://tinyurl.com/responsive-book
●
Watch: http://tinyurl.com/pathtomobile
●
Use: http://drupal.org/project/omega
(Eventually “all” base themes will be responsive.)

14. Theming Goals
●
Budget-appropriate.
● Accessible.
● Responsive.

15. Process

16. Steps to Making a Theme
1. Communicate with your whole team.
2. Plan your data structure.
3. Use wire frames to prove what you're saying about how the
site ought to be built.
4.Build the site (ignore the theme).
5. Convert your wire frame to its grid layout.
6.Build out the HTML fragments in the relevant tpl.php files.
Substitute CSS effects for PSD effects where possible.
7. Apply your theme to the site.
8.Refine as necessary based on the UX.

17. Data Model
http://www.flickr.com/photos/alan-dean/3513723498

18. Wire Frames

21. Begin Site Building
(This may affect site design decisions based on the
theming goals of budget-appropriate, accessible and
responsive.)

22. Grid Framework
http://960.gs/

23. CSS (Grid) Framework

24. Base Theme
● drupal.org/project/ninesixty
● drupal.org/project/fusion
● drupal.org/project/zen

25. To Build a Successful Theme
You must:
● Know your data model.
● Create wire frames describing page elements.
● Identify the modules, templates and configuration
responsible for every element described in your wire
frames.
● Use a grid framework in both your design files and
Drupal templates.
● Use a base theme that meets your web design goals.

26. Case Study
Build me a theme!

27. Steps to MVT
1. Prepare design.
2. Create theme shell (text files for Drupal).
3. Create regions.
4.Extract and embed images.
5. Launch MVT.

28. Domicile
●
Designed by Betty
Biesenthal.
● Themed by Emma
Jane Hogbin (and the
base theme
NineSixty).
● Code available from
http://drupal.org/project/domicile

29. Domicile Theme

30. Grid Overlay

31. Wire Frame for NineSixty Sub-Theme

32. Create a Theme Shell
sites/example.com/themes/theme_name
theme_name.info
page.tpl.php
Also: sites/all/themes/base_theme

33. Take a peek
1. Download the theme:
http://drupal.org/project/domicile
2. Unzip the package.
3. Look at the files inside.

34. domicile.info
name = D7SBE - Domicile
description = A three-column design by Design House (www.design-
house.ca) and themed by Design to Theme.
screenshot = screenshot.png
core = 7.x
engine = phptemplate
base theme = ninesixty
; Stylesheets.
; Regions
; Features

35. Build page.tpl.php from NineSixty

36. Identify These
Shapes in
Domicile

37. Define Regions and Blocks

38. Extract Images from the PSD

41. Hard Code Fixed Images

42. Minimum Viable Theme

43. Steps to MVT Summary
1. Prepare design.
2. Create theme shell (text files for Drupal).
3. Create regions.
4.Extract and embed images.
5. Launch MVT.

44. What's Wrong?
Pink sherbert photography http://www.flickr.com/photos/pinksherbet/3372060864/

45. Theme by UX
Locate “problem” areas and fix with:
● The administrative interface.
● CSS enhancements.
And if you need more control add:
● Helper modules.
● Theme template files.
● Theme functions.

46. Administrative Interface

47. CSS Enhancements
Relevant HTML Page element CSS styles
source

48. Apply Generic Styles

49. Apply Build-Specific Styles

50. Site Building/Theming Helpers
Themer Tools Site Building
● Devel ● Views
● Theme Developer ● Nodes in Block
● Firebug for Drupal ● Menu Block
Layout ● Entity View Mode
● Panels ● Media
● Context ● jPlayer
● Display Suite ● etc

51. tpl.php
●
page.tpl.php
● node.tpl.php
● page-front.tpl.php
● block.tpl.php
● Error pages: 403, 404, 500

52. Theme Functions
Finally...and only if you really must:
● Preprocess functions.
● Form altering functions.
● Functionality-based PHP snippets.
● (etc)

53. Domicile: the theme

54. Theme Building Summary
Minimum Viable Theme Theme by UX
1. Prepare design. 6. Administrative interface
2. Create required theme files. 7. CSS enhancements
3. Create regions in page.tpl.php. 8. Module helpers
4. Extract and embed images. 9. tpl.php files
5. Launch MVT. 10.Theme functions

55. PSD to Theme Summary
● Plan your theme from the data model out, not the template files in.
● Use relevant Drupal modules to break up content and display it in
relevant locations.
● Extract only the images and colours you need from your PSD file.
● Using your grid, rebuild your design as a minimum viable theme in the
fewest possible tpl.php files.
● Fix any outstanding problems according to the expected user
experience with the site.
● Test your site using automated testing suites for cross-browser and
accessibility issues. Then test again using as much real content and as
many real people as you can afford.
● Cross your fingers and launch.

56. Discounts on Practical Drupal Guides
www.designtotheme.com
Save 35% on all titles.
Discount Code: ACQUIA-P2T
1. PSD to Drupal Theme
2. SBE Guide: Micro Site
www.informit.com
SAVE 35% on Drupal User's Guide.
www.drupalwatchdog.com/read
Discount Code: DRUPALUSER
Issue 1: Free PSD to Theme article.

57. Stay in Touch
●
@emmajanedotnet
● emma@designtotheme.com
● www.designtotheme.com