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.

Intro to Theming Drupal, FOSSLC Summer Camp 2010


Published on

Published in: Technology

Intro to Theming Drupal, FOSSLC Summer Camp 2010

  1. 1. Basic Design for Drupal Emma Jane Hogbin @emmajanedotnet
  2. 2. Overview of Drupal’s Theming System
  3. 3. Theming WordPress A “pull” system
  4. 4. Theming Drupal A prep and “push” system Source:
  5. 5. Flow of Themed Content
  6. 6. Rendered Page Logo Primary Links Search Block View (block) Login block Navigation menu
  7. 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. 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. 9. Creating Your First Theme
  10. 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. 11. Step 0: Wireframes + Specs
  12. 12. Creating Front Page Shapes
  13. 13. Creating Content Page Shapes
  14. 14. Warning! Promotion of Non-free software in the next slide
  15. 15. Drupal Components for Balsamiq Created by Top Notch Themes Available from: cms-components No, Balsamiq is not open source.
  16. 16. Step 1: Grid + colour palate + imagination + GiMP.
  17. 17. Establish the Framework 1.Grid layout: templates 2.Colour palate:, 3.Page elements: see wireframes and site specs
  18. 18. 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
  19. 19. Decorating and Designing If that last slide offended you go watch stop-decorating-and-start-designing while I carry on with my decorator lesson for those of us who don’t poop designs for breakfast.
  20. 20. 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.
  21. 21. Background with Texture
  22. 22. Creating Front Page Shapes
  23. 23. Grid and Blocks
  24. 24. Creating Front Page Shapes
  25. 25. Page Elements
  26. 26. Change Palate
  27. 27. Change Palate (again)
  28. 28.
  29. 29. Fill in the Blanks
  30. 30. Step 2: Choose a Base Theme. Create a sub-theme.
  31. 31. 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.
  32. 32. Lazy Base Theme:
  33. 33. Super Lazy Base Theme: Fusion
  34. 34. Ultra Powerful Base Theme: Zen
  35. 35. Step 3: Rebuild the Design Files in Drupal.
  36. 36. <html goes here> Copy the page.tpl.php from your base theme and/or use: Repeat for page-front.tpl.php
  37. 37. Step 4: Launch Your Minimum Viable Theme
  38. 38. 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.
  39. 39. Uploading your MVTheme ● Base theme: /sites/all/themes ● Your theme: /sites/ ● Enabling the theme: ?q=/admin/build/themes ● Clear Drupal’s cache ● When in doubt, clear Drupal’s cache again.
  40. 40. Step 5: Theme the Rest by UX
  41. 41. Themer Module
  42. 42. You’re a Themer!
  43. 43. Sharing Your Designs ● Licensing: GPL the “codey bits.” ● Creating a project on (and also ● Selling your themes (
  44. 44. 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.
  45. 45. And that was... Basically How You Theme Drupal Emma Jane Hogbin @emmajanedotnet
  46. 46. It’s too hard. Show me how! Pink sherbert photography
  47. 47. Advanced, Extra Stuff
  48. 48. $node object $node­>nid $node­>body $node­>content['body'][#value]
  49. 49. node.tpl.php (theme: fusion) <?php // $Id: node.tpl.php,v 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;  ?> ­­>
  50. 50. 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:
  51. 51. 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.
  52. 52. 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
  53. 53. 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.