For more Four Kitchens presentations, please visit http://fourkitchens.com/presentations

1. From Photoshop to
Drupal theme
Creating a Drupal-optimized design
Todd Nienkerk and Aaron Stanush
DrupalCon San Francisco | April 19, 2010

2. Personal introductions

3. Todd Nienkerk
Co-founder, designer, and developer
Four Kitchens
todd@fourkitchens.com
@toddross
Photo: Kristin Hillery

4. Aaron Stanush
Co-founder and designer
Four Kitchens
aaron@fourkitchens.com
@astanush

5. Prologue:
Anatomy of a Drupal
theme
See drupal.org/node/171194 for more information

6. What is a Drupal theme?

7. A Drupal theme is simply a collection
of files uploaded to a specific
directory.

8. This is what
Drupal looks like
out of the box
The only directory
you need to worry
about is /sites

9. Core themes are
stored in /themes
DO NOT put your
themes here!

10. Themes should be
uploaded to
/sites/all/themes
You will need to
create this
directory after
installing Drupal

11. To add a new
theme, upload it to
/sites/all/themes

12. Drupal themes need
very few files

13. Drupal themes need
very few files
mytheme.info
defines the theme

14. Drupal themes need
very few files
mytheme.info
defines the theme
.tpl.php files are
“template” files

15. Template files
‣ Contain a theme’s markup
‣ Just HTML and a little bit of PHP
‣ Each template file is responsible for a di erent
piece of the page

16. ‣ The most commonly used template files are:
‣ page.tpl.php
‣ block.tpl.php
‣ node.tpl.php

17. page.tpl.php
header region
The page template
is the theme’s
“main” template
left right
It assembles all the sidebar content region sidebar
pieces into a region region
finished page
The page includes
“regions” (header,
footer, etc.) footer region

18. node.tpl.php
The node template
renders the
content portion of
the page
The node template
also renders node
teasers

19. node.tpl.php
The node template
renders the
content portion of
the page
The node template
also renders node
teasers
Multiple nodes can
appear on page

20. block.tpl.php
The block
template renders
each block on a
page

21. block.tpl.php
The block
template renders
each block on a
page left right
sidebar sidebar
Blocks are placed region region
in the regions

22. ‣ When Drupal renders a page, it works from the
inside out

23. node.tpl.php

24. block.tpl block.tpl
block.tpl node.tpl.php block.tpl
block.tpl block.tpl

25. page.tpl.php
block.tpl block.tpl
block.tpl node.tpl.php block.tpl
block.tpl block.tpl

26. ‣ When you understand how themes work, you can
easily create a Drupal-optimized design

27. Step 1:
Stop! Close Photoshop!

28. You wouldn’t paint a house before
building it...
So how can you design a website
before architecting it?

29. Before you design, ask:
‣ What’s the purpose of the site?
‣ What kind of content will the site contain?
‣ How will content be organized?

30. Define the site
“What’s the purpose of the site?”

31. List your goals
Build a
community Raise
Generate
awareness
buzz
Make
money! Make
money!
Make money! Make money!
Make
money!
Make Make
money! money!

32. Describe your site in two
words or less
Community site
Brochureware
Blog
Viral campaign Online store
Fan site lolcat clone

33. Define the content
“What kind of content will the site contain?”

34. ‣ In Drupal, di erent kinds of content are called
content types.
‣ Content types are usually defined by the di erent
information they contain.

35. Blog post Product
Title Name
Author Description
Date published Price
Body Options (sizes, colors)
Lead image Images

36. Create a sitemap and
wireframes
“How will content be organized?”

37. Sitemaps
‣ List all sections of the site
‣ Illustrate how content is organized within the
sections

38. Home
page
Primary menu
Most
Science Sports Business Arts
popular
Blog post Blog post Blog post Blog post Blog post
Secondary menu
About us Terms of use Contact us
User tools
My account Search

39. Wireframes
‣ Illustrate page layout and functionality
‣ Demonstrate how a user will navigate the site
‣ Use placement of key components to reinforce the
goals of the site
‣ Shopping cart icon
‣ Revenue-generating ads

40. My account | Log out
Blog Logo
Search
Science
Sports
Most popular
Business
posts
Arts
Content
Advertisement
Copyright 2010 BlogCorp, Inc. About us | Contact us | Terms of use

41. Brainstorming should happen using
wireframes, not design comps or
mockups.

42. Case study: Spatula City
Spatula City is relaunching their website. It will be
the largest spatula site ever built!

43. Define the site
Goals Description
‣ Build awareness of ‣ “Online store”
the Spatula City brand
‣ Be the Amazon.com
of online spatula retail
‣ Make money!

44. Define content types
‣ Product Product
‣ Frequently asked Name
question (FAQ)
Description
‣ Page
Price
Color options
Image

45. Create a sitemap

46. Home
page
Primary menu
Spatulas Spatulas Build-A-
FAQ Contact us
by type by color Spatula
Question
Spatula page
page
Secondary menu
Retail locations About us Terms of use
User tools
My account Shopping cart Search

47. Create the wireframes

48. My account Shopping cart Log out
Logo
Search
Browse by type Browse by color Build-A-Spatula Contact us FAQ
Top rated
content
Content
Promo
Copyright text About us Retail locations Terms of use

49. Step 2:
Translate the wireframes
into “Drupalspeak”

50. Most Drupal themes are comprised of
just a few, basic components.

51. ‣ Content
‣ Usually a node, view, or panel
‣ Nodes are themed using node.tpl.php
‣ Can also be a user profile or admin interface

52. ‣ Blocks
‣ Can contain virtually anything: user login, menus,
lists of content, custom HTML, views...
‣ Appear in regions (usually sidebars, but
sometimes in the header or footer regions)
‣ Themed using block.tpl.php
‣ Menus
‣ Added to the page as blocks

53. ‣ Primary and secondary links
‣ Navigation
‣ Special kinds of menus
‣ Logo
‣ Search box
‣ Footer message
‣ All of these are page-level components that are
themed in page.tpl.php

54. My account Shopping cart Log out
Logo
Search
Browse by type Browse by color Build-A-Spatula Contact us FAQ
Top rated
content
Content
Promo
Copyright text About us Retail locations Terms of use

55. My account Shopping cart Log out
Logo
Search
Browse by type Browse by color Build-A-Spatula Contact us FAQ
Content (node)
Top rated
content
Content
Promo
Copyright text About us Retail locations Terms of use

56. Menu (block)
My account Shopping cart Log out
Logo
Search
Browse by type Browse by color Build-A-Spatula Contact us FAQ
Content (node) Block
Top rated
content
Content
Block
Promo
Copyright text About us Retail locations Terms of use

57. Menu (block)
My account Shopping cart Log out
Logo
Search
Primary links
Browse by type Browse by color Build-A-Spatula Contact us FAQ
Content (node) Block
Top rated
content
Content
Block
Promo
Secondary links
Copyright text About us Retail locations Terms of use

58. Logo Menu (block)
My account Shopping cart Log out
Logo Search box
Search
Primary links
Browse by type Browse by color Build-A-Spatula Contact us FAQ
Content (node) Block
Top rated
content
Content
Block
Promo
Footer message Secondary links
Copyright text About us Retail locations Terms of use

59. You’re not designing a website...
You’re designing a web system.

60. Step 3:
Design your site
(You may now open Photoshop!)

61. ‣ Now you can make informed decisions about how
to create a compelling and e ective design
‣ Use your wireframes as blueprints
‣ Let the theme components inform your design

62. Designing the new
Spatula City

63. My account Shopping cart Log out
Logo
Search box
Browse by type Browse by color Build-A-Spatula Contact us FAQ
Top rated
content
Content
Promo
Copyright text About us Retail locations Terms of use

65. Step 4:
Build your theme

66. Theming is simply a matter of
changing the markup in the template
files and adding your own CSS.

68. node.tpl.php

69. block.tpl.php
node.tpl.php block.tpl.php
block.tpl.php

70. page.tpl.php

71. Primary links
Secondary links

72. Logo
Search box
Primary links
Footer message Secondary links

73. Better. Faster. Cheaper.
How to accelerate the design and theming phases
of your project

74. Know what Drupal wants
to do
‣ Know what Drupal’s default output looks like
‣ Stark theme: drupal.org/project/stark
‣ Know the default regions
‣ left, right, content, header, and footer
‣ Assigning content to regions:
drupal.org/node/171224

75. Use template suggestions
‣ You’re not limited to a single template per
component!
‣ For example, each content type can have its own
node.tpl.php file
‣ Learn more at drupal.org/node/190815

76. Subtheme
‣ Subthemes, their structure and inheritance:
drupal.org/node/225125
‣ Zen: drupal.org/project/zen

77. Use a grid system
‣ NineSixty: drupal.org/project/ninesixty
‣ Drupal port of the 960.gs grid system
‣ Zen NineSixty: drupal.org/project/zen_ninesixty
‣ Blueprint: drupal.org/project/blueprint
‣ Drupal port of the Blueprint CSS framework

78. Credits
‣ The Swedish Chef was created by ‣ This presentation was created and
Jim Henson. Or someone who delivered by Todd Ross Nienkerk
worked for him. Whatever the and Aaron Stanush, co-founders of
case, we didn’t invent him. Four Kitchens
‣ Spatula City is based on an idea by
the great Weird Al Yankovic,
internationally renowned accordion
virtuoso.
‣ The items listed above are exempt
from this presentation’s Creative
Commons license

79. All content in this presentation, except where noted otherwise, is Creative Commons Attribution-
ShareAlike 3.0 licensed and copyright 2010 Four Kitchen Studios, LLC.