The document provides an overview of theming in Drupal. It discusses: - Drupal uses a "prepare and push" system where complete web pages are compiled from different sources in themes, unlike WordPress' "pull" system. - Themes style individual Drupal elements like pages, blocks, and nodes, not the whole page. - Creating a new theme involves choosing a base theme, creating a sub-theme folder, modifying template and style files, and launching a minimum viable theme. - Key template files that can be modified include page.tpl.php, node.tpl.php, and block.tpl.php. Variables and content can be rearranged in these files

1. Basic Design for Drupal
Emma Jane Hogbin
@emmajanedotnet
emma@designtotheme.com
www.designtotheme.com

2. Overview of
Drupal’s Theming System

3. Theming WordPress
A “pull” system
http://www.flickr.com/photos/13879801@N00/96609354/

4. Theming Drupal
A prep and “push” system
Source: http://www.flickr.com/photos/sebbisuperstar/2470560831

5. Flow of Themed Content

6. Rendered Page
Logo
Primary Links
Search Block
View (block)
Login block
Navigation menu

7. Rendered Page
● page.tpl.php Logo: Site information Menu
Primary Links
● $primary_links
● $secondary_links Node
Block
● $logo
● $footer_message
● node.tpl.php Node
Region
● block.tpl.php
Node
Block Pager
Menu or Secondary Links
Footer: Site information

8. Which means...
● Drupal uses Theme Engines to style available
content independently of the module layer.
● The most commonly used engine is PHPtemplate
which is a “prepare and push” system, this differs
from WordPress’s “pull” system.
● Complete Web pages of rendered HTML are
compiled from different sources in the theme.
● Design for individual Drupal page elements, not
the whole page.

9. Creating Your First Theme

10. My Steps for Creating a Theme
0. Create Wireframes
1. Colour palate + grid + imagination + GiMP.
2. Choose a Base Theme. Create a sub-theme.
3. Rebuild the Design Files in Drupal
(slice + convert).
4. Launch MVT.
5. Theme by UX, not by module or tpl.php.

11. Step 0: Wireframes + Specs

13. Creating Front Page Shapes

14. Creating Content Page Shapes

15. Warning!
Promotion of
Non-free software
in the next slide

16. Drupal
Components
for Balsamiq
Created by Top
Notch Themes
Available from:
http://mockupstogo.net/drupal-
cms-components
No, Balsamiq is not open source.

17. Step 1: Grid + colour palate +
imagination + GiMP.

18. Establish the Framework
1.Grid layout: 960.gs templates
2.Colour palate: colourlovers.com,
colorschemedesigner.com
3.Page elements: see wireframes and site specs

19. Creating a Basic Design
1.Background: texture, image, colour
2.Place page elements: see wireframes and specs
3.Decorate: texture, flourishes, illustration,
photography
4.Typography and font selection
5.Edges and borders: page, block
6.Lists: indents, margins, padding
7.Actions: default, hover, active, .active

20. Decorating and Designing
If that last slide offended you go watch
http://sf2010.drupal.org/conference/sessions/
stop-decorating-and-start-designing
while I carry on with my decorator lesson for
those of us who don’t poop designs for breakfast.

21. Optimize your Design Files
● Theme by element: node, teaser, blocks,
breadcrumbs, pager, site name, shopping cart.
● Sort layers into element-related folders.
● Use Web fonts in your design.
● Use the 960.gs grid templates.
● Create colour palates.
● Use a style guide.

25. Background with Texture

26. Creating Front Page Shapes

27. Grid and Blocks

28. Creating Front Page Shapes

29. Page Elements

30. Change Palate

31. Change Palate (again)

32. http://www.scribbleoneverything.com/prints/type-o-file/-preorder-so-you-need-a-typeface-poster/prod_260.html

33. Fill in the Blanks

34. Step 2: Choose a Base Theme.
Create a sub-theme.

35. Base Themes
● A base theme is a collection of defaults that
you can adjust in your own theme. It is not
meant to be used as-is. It is meant to be a
foundation of adjustable assumptions.
● DO NOT HACK THE BASE THEME. Use it like a
library--reference it, do not hack it.
● Criteria for choosing a base theme: CSS grid
framework (or overall layout), SEO, accessibility,
additional helper functions, quality of
documentation.

36. Lazy Base Theme: 960.gs
www.drupal.org/project/ninesixty

37. Super Lazy
Base Theme:
Fusion
www.drupal.org/project/fusion

38. Ultra Powerful Base Theme: Zen
www.drupal.org/project/zen

39. Step 3: Rebuild the Design Files
in Drupal.

40. <html goes here>
Copy the page.tpl.php from your base theme and/or use:
http://api.drupal.org/api/drupal/modules--system--page.tpl.php/6/source
Repeat for page-front.tpl.php

41. Step 4: Launch Your
Minimum Viable Theme

42. Apply the MVT to a Prototype site
● Work with real data.
● Alter as much as possible from within the
Drupal UI. Use ImageCache, CCK and Views.
● Compare the prototype site frequently against
your wireframes. Try to make them match.

43. Uploading your MVTheme
● Base theme: /sites/all/themes
● Your theme: /sites/domainname.com/themes
● Enabling the theme: ?q=/admin/build/themes
● Clear Drupal’s cache
● When in doubt, clear Drupal’s cache again.

44. Step 5: Theme the Rest by UX

46. Themer Module

47. You’re a
Themer!
http://www.flickr.com/photos/14150482@N02/2526889807/

48. Sharing Your Designs
● Licensing: GPL the “codey bits.”
● Creating a project on drupal.org (and also
http://themegarden.org/drupal6/)
● Selling your themes
(www.topnotchthemes.com)

49. My Steps for Creating a Theme
0. Create Wireframes
1. Colour palate + grid + imagination + GiMP.
2. Choose a Base Theme. Create a sub-theme.
3. Rebuild the Design Files in Drupal
(slice + convert).
4. Launch MVT.
5. Theme by UX, not by module or tpl.php.

50. And that was...
Basically How You Theme Drupal
Emma Jane Hogbin
@emmajanedotnet
emma@designtotheme.com
www.designtotheme.com

51. It’s too hard.
Show me how!
Pink sherbert photography http://www.flickr.com/photos/pinksherbet/3372060864/

52. Advanced, Extra Stuff

53. $node object
$node­>nid
$node­>body
$node­>content['body'][#value]

54. node.tpl.php (theme: fusion)
<?php
// $Id: node.tpl.php,v 1.1.2.2 2009/11/11
05:26:25 sociotech Exp $
?>
<div class="content clearfix">
<div id="node­<?php print $node­>nid; ?>" <?php print $content ?>
class="node <?php print $node_classes; ? </div>
>"> <?php if ($terms): ?>
<div class="inner"> <div class="terms">
<?php print $picture ?> <?php print $terms; ?>
<?php if ($page == 0): ?> </div>
<h2 class="title"><a href="<?php print <?php endif;?>
$node_url ?>" title="<?php print $title ? <?php if ($links): ?>
>"><?php print $title ?></a></h2> <div class="links">
<?php endif; ?> <?php print $links; ?>
<?php if ($submitted): ?> </div>
<div class="meta"> <?php endif; ?>
<span class="submitted"><?php print </div><!­­ /inner ­­>
$submitted ?></span>
</div> <?php if ($node_bottom && !$teaser): ?
<?php endif; ?> >
<?php if ($node_top && !$teaser): ?> <div id="node­bottom" class="node­
<div id="node­top" class="node­top row bottom row nested">
nested"> <div id="node­bottom­inner"
<div id="node­top­inner" class="node­bottom­inner inner">
class="node­top­inner inner"> <?php print $node_bottom; ?>
<?php print $node_top; ?> </div><!­­ /node­bottom­inner ­­>
</div><!­­ /node­top­inner ­­> </div><!­­ /node­bottom ­­>
</div><!­­ /node­top ­­> <?php endif; ?>
<?php endif; ?> </div><!­­ /node­<?php print $node­>nid;
?> ­­>

55. tpl.php files to override styles
● Individual template files make up a whole
page (see the handout).
● tpl.php files include: page.tpl.php, node.tpl.php, node-
contenttype.tpl.php, comment.tpl.php
● Look at the source of a tpl.php file to find
variables that can be moved and altered.
● Use the Devel + Themer Modules
● Alter variable contents with
http://drupal.org/node/223430
● See also: api.drupal.org

56. Create Your Theme
1.Make a new folder (start with letters).
2.Add to it a text file named foldername.info
3.Copy the sample settings from the handout
into your .info file.

57. Your Theme’s .info file
name = My First Theme
description = Featuring multiple pony­friendly regions.
core = 6.x
engine = phptemplate
base theme = ninesixty
; Add pony­friendly regions, CSS and Javascript files
regions[shetland] = Left sidebar, column 1
stylesheets[all][] = my_theme_styles.css
scripts[] = myscript.js

58. How to use a Base theme
● Download the base theme and read its
documentation.
● Create a new theme folder which references
your chosen base theme in the .info file.
● Change only what’s needed. Your sub-theme is
the diff from the original base theme.