Intro to Theming Drupal, FOSSLC Summer Camp 2010
Upcoming SlideShare
Loading in...5

Intro to Theming Drupal, FOSSLC Summer Camp 2010






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Intro to Theming Drupal, FOSSLC Summer Camp 2010 Intro to Theming Drupal, FOSSLC Summer Camp 2010 Presentation Transcript

  • Basic Design for Drupal Emma Jane Hogbin @emmajanedotnet
  • Overview of Drupal’s Theming System
  • Theming WordPress A “pull” system
  • Theming Drupal A prep and “push” system Source:
  • Flow of Themed Content
  • Rendered Page Logo Primary Links Search Block View (block) Login block Navigation menu
  • 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
  • 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.
  • Creating Your First Theme
  • 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.
  • Step 0: Wireframes + Specs
  • Creating Front Page Shapes
  • Creating Content Page Shapes
  • Warning! Promotion of Non-free software in the next slide
  • Drupal Components for Balsamiq Created by Top Notch Themes Available from: cms-components No, Balsamiq is not open source.
  • Step 1: Grid + colour palate + imagination + GiMP.
  • Establish the Framework 1.Grid layout: templates 2.Colour palate:, 3.Page elements: see wireframes and site specs
  • 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
  • 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.
  • 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.
  • Background with Texture
  • Creating Front Page Shapes
  • Grid and Blocks
  • Creating Front Page Shapes
  • Page Elements
  • Change Palate
  • Change Palate (again)
  • Fill in the Blanks
  • Step 2: Choose a Base Theme. Create a sub-theme.
  • 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.
  • Lazy Base Theme:
  • Super Lazy Base Theme: Fusion
  • Ultra Powerful Base Theme: Zen
  • Step 3: Rebuild the Design Files in Drupal.
  • <html goes here> Copy the page.tpl.php from your base theme and/or use: Repeat for page-front.tpl.php
  • Step 4: Launch Your Minimum Viable Theme
  • 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.
  • 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.
  • Step 5: Theme the Rest by UX
  • Themer Module
  • You’re a Themer!
  • Sharing Your Designs ● Licensing: GPL the “codey bits.” ● Creating a project on (and also ● Selling your themes (
  • 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.
  • And that was... Basically How You Theme Drupal Emma Jane Hogbin @emmajanedotnet
  • It’s too hard. Show me how! Pink sherbert photography
  • Advanced, Extra Stuff
  • $node object $node­>nid $node­>body $node­>content['body'][#value]
  • 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;  ?> ­­>
  • 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:
  • 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.
  • 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
  • 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.