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
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
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
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
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
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
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
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
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
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.