Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Design to Theme @ CMSExpo


Published on

Published in: Technology
  • Be the first to comment

Design to Theme @ CMSExpo

  1. 1. Basic Design for Drupal Emma Jane Hogbin @emmajanedotnet
  2. 2. Agenda ● A short, analogy-filled, treatise on designing for Drupal. ● <your questions /> ● Anatomy of a Theme ● <your questions /> ● Base <your questions /> Themes ● Making Themes ● <your questions><my answers /></your questions>
  3. 3. Pre-requisites to Theming Drupal ● Get the handout. ● Understand that you will make mistakes and that it’s ok to make mistakes. ● Have a toolkit.
  4. 4. Overview of Drupal’s Theming System
  5. 5. Theming WordPress A “pull” system
  6. 6. Theming Drupal A prep and “push” system Source:
  7. 7. Flow of Themed Content
  8. 8. ANSIs: Areas of Natural and Scientific Interest Low priority High priority Source:
  9. 9. Tree Spotting
  10. 10. Rendered Page Logo Primary Links Search Block View (block) Login block Navigation menu
  11. 11. 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
  12. 12. 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.
  13. 13. Creating Your First Theme
  14. 14. My Steps for Creating a Theme 0.Wireframes with Balsamiq + specs. 1.Colour palate + grid + imagination + GiMP. 2.Base theme, text files, version control. 3.Rebuild the PSD in Drupal (or slice + convert). 4.Launch MVT. 5.Theme by UX, not by module or tpl.php.
  15. 15. Step 0: Wireframes + Specs
  16. 16. Creating Front Page Shapes
  17. 17. Creating Content Page Shapes
  18. 18. Drupal Components for Balsamiq Created by Top Notch Themes Available from: cms-components
  19. 19. Step 1: Grid + colour palate + imagination + GiMP.
  20. 20. Establish the Framework 1.Grid layout: templates 2.Colour palate:, 3.Page elements: see wireframes and site specs
  21. 21. 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
  22. 22. Decorating and Designing If that last slide offended you go watch op-decorating-and-start-designing while I carry on with my decorator lesson for those of us who don’t poop designs for breakfast.
  23. 23. Background with Texture
  24. 24. Grid and Blocks
  25. 25. Page Elements
  26. 26. Change Palate
  27. 27. Change Palate (again)
  28. 28.
  29. 29. Fill in the Blanks
  30. 30. Regions + Variables Acquia Slate
  31. 31. 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 grid templates. ● Create colour palates. ● Use a style guide.
  32. 32. Step 2: Base theme, text files, version control.
  33. 33. 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. ● Elements to inspect: SEO, accessibility, additional functions, documentation, CSS grid framework.
  34. 34. (Some of) My Fave Base Themes ● Lazy: ● Super lazy: Fusion ● Ultra powerful: Zen
  35. 35. How to use a Base theme ● Download the base theme and read its documentation. ● Create a new theme which references your chosen base theme in the .info file. ● Choose which properties need to be adjusted with custom tpl.php files and other stuff we won’t get to today.
  36. 36. Create Your Theme 1.Make a new folder (start with letters). 2.Add to it a text file named 3.Copy the sample settings from the handout into your .info file.
  37. 37. 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
  38. 38. Step 3: Rebuild the PSD in Drupal (or slice + convert).
  39. 39. <html goes here> Copy the page.tpl.php from your base theme and/or use: Repeat for page-front.tpl.php
  40. 40. It’s too hard. Show me how! Pink sherbert photography
  41. 41. Step 4: Launch Your MVT
  42. 42. Uploading your Theme ● Base theme: /sites/all/themes ● Your theme: /sites/ ● Enabling the theme: ?q=/admin/build/themes ● When in doubt: clear Drupal’s cache
  43. 43. Step 5: Theme the Rest by UX
  44. 44. Themer Module
  45. 45. $node object $node­>nid $node­>body $node­>content['body'][#value]
  46. 46. <?php node.tpl.php (theme: fusion) // $Id: node.tpl.php,v 2009/11/11  05:26:25 sociotech Exp $ ?> <div id="node­<?php print $node­>nid; ?>"      <div class="content clearfix"> class="node <?php print $node_classes; ?       <?php print $content ?> >">     </div>   <div class="inner"> <?php if ($terms): ?>     <?php print $picture ?>     <div class="terms"> <?php if ($page == 0): ?>       <?php print $terms; ?>     <h2 class="title"><a href="<?php print      </div> $node_url ?>" title="<?php print $title ?     <?php endif;?> >"><?php print $title ?></a></h2> <?php if ($links): ?>     <?php endif; ?>       <div class="links"> <?php if ($submitted): ?>       <?php print $links; ?>     <div class="meta">     </div>       <span class="submitted"><?php print      <?php endif; ?> $submitted ?></span>   </div><!­­ /inner ­­>     </div>     <?php endif; ?>   <?php if ($node_bottom && !$teaser): ? <?php if ($node_top && !$teaser): ?> >     <div id="node­top" class="node­top row    <div id="node­bottom" class="node­ nested"> bottom row nested">       <div id="node­top­inner"      <div id="node­bottom­inner"  class="node­top­inner inner"> class="node­bottom­inner inner">         <?php print $node_top; ?>       <?php print $node_bottom; ?>       </div><!­­ /node­top­inner ­­>     </div><!­­ /node­bottom­inner ­­>     </div><!­­ /node­top ­­>   </div><!­­ /node­bottom ­­>     <?php endif; ?>   <?php endif; ?> </div><!­­ /node­<?php print $node­>nid;  ?> ­­>
  47. 47. 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 ● See also:
  48. 48. You’re a Themer!
  49. 49. My 5 Steps for Creating a Theme 0.Wireframes the specs. 1.Colour palate + grid + imagination + GiMP. 2.Base theme, text files, version control. 3.Rebuild the PSD in Drupal (or slice + convert). 4.Launch MVT. 5.Theme by UX, not by module or tpl.php.
  50. 50. Sharing Your Designs ● Licensing: GPL the “codey bits.” ● Creating a project on (and also ● Selling your themes (
  51. 51. And that was... Basically How You Theme Drupal Emma Jane Hogbin @emmajanedotnet Remind me I have one Balsamiq license to give away. Also: online classes start next week.