Basic Design for Drupal

           Emma Jane Hogbin
           @emmajanedotnet
    emma@designtotheme.com
      www.desig...
Overview of
Drupal’s Theming System
Theming WordPress
        A “pull” system




http://www.flickr.com/photos/13879801@N00/96609354/
Theming Drupal
A prep and “push” system




Source: http://www.flickr.com/photos/sebbisuperstar/2470560831
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

                                     ...
Which means...
●   Drupal uses Theme Engines to style available
    content independently of the module layer.
●   The mos...
Creating Your First Theme
My Steps for Creating a Theme
0. Create Wireframes
1. Colour palate + grid + imagination + GiMP.
2. Choose a Base Theme. C...
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:
http://mockupstogo.net/drupal-
cms-components

...
Step 1: Grid + colour palate +
     imagination + GiMP.
Establish the Framework
1.Grid layout: 960.gs templates
2.Colour palate: colourlovers.com,
  colorschemedesigner.com
3.Pag...
Creating a Basic Design
1.Background: texture, image, colour
2.Place page elements: see wireframes and specs
3.Decorate: t...
Decorating and Designing
If that last slide offended you go watch
http://sf2010.drupal.org/conference/sessions/
stop-decor...
Optimize your Design Files
●   Theme by element: node, teaser, blocks,
    breadcrumbs, pager, site name, shopping cart.
●...
Background with Texture
Creating Front Page Shapes
Grid and Blocks
Creating Front Page Shapes
Page Elements
Change Palate
Change Palate (again)
http://www.scribbleoneverything.com/prints/type-o-file/-preorder-so-you-need-a-typeface-poster/prod_260.html
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...
Lazy Base Theme: 960.gs




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




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




      www.drupal.org/project/zen
Step 3: Rebuild the Design Files
           in Drupal.
<html goes here>



         Copy the page.tpl.php from your base theme and/or use:
http://api.drupal.org/api/drupal/modul...
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. Us...
Uploading your MVTheme
●   Base theme: /sites/all/themes
●   Your theme: /sites/domainname.com/themes
●   Enabling the the...
Step 5: Theme the Rest by UX
Themer Module
You’re a
Themer!

http://www.flickr.com/photos/14150482@N02/2526889807/
Sharing Your Designs
●   Licensing: GPL the “codey bits.”
●   Creating a project on drupal.org (and also
    http://themeg...
My Steps for Creating a Theme
0. Create Wireframes
1. Colour palate + grid + imagination + GiMP.
2. Choose a Base Theme. C...
And that was...
Basically How You Theme Drupal

                    Emma Jane Hogbin
                    @emmajanedotnet
 ...
It’s too hard.
Show me how!




Pink sherbert photography http://www.flickr.com/photos/pinksherbet/3372060864/
Advanced, Extra Stuff
$node object
$node­>nid
$node­>body
$node­>content['body'][#value]
node.tpl.php (theme: fusion)
<?php
// $Id: node.tpl.php,v 1.1.2.2 2009/11/11 
05:26:25 sociotech Exp $
?>
                ...
tpl.php files to override styles
●   Individual template files make up a whole
    page (see the handout).
●   tpl.php fil...
Create Your Theme
1.Make a new folder (start with letters).
2.Add to it a text file named foldername.info
3.Copy the sampl...
Your Theme’s .info file
name = My First Theme
description = Featuring multiple pony­friendly regions.
core = 6.x
engine = ...
How to use a Base theme
●   Download the base theme and read its
    documentation.
●   Create a new theme folder which re...
Intro to Theming Drupal, FOSSLC Summer Camp 2010
Intro to Theming Drupal, FOSSLC Summer Camp 2010
Intro to Theming Drupal, FOSSLC Summer Camp 2010
Intro to Theming Drupal, FOSSLC Summer Camp 2010
Intro to Theming Drupal, FOSSLC Summer Camp 2010
Upcoming SlideShare
Loading in...5
×

Intro to Theming Drupal, FOSSLC Summer Camp 2010

3,039

Published on

Published in: Technology

Intro to Theming Drupal, FOSSLC Summer Camp 2010

  1. 1. Basic Design for Drupal Emma Jane Hogbin @emmajanedotnet emma@designtotheme.com www.designtotheme.com
  2. 2. Overview of Drupal’s Theming System
  3. 3. Theming WordPress A “pull” system http://www.flickr.com/photos/13879801@N00/96609354/
  4. 4. Theming Drupal A prep and “push” system Source: http://www.flickr.com/photos/sebbisuperstar/2470560831
  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: http://mockupstogo.net/drupal- 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: 960.gs templates 2.Colour palate: colourlovers.com, colorschemedesigner.com 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 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.
  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 960.gs 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. http://www.scribbleoneverything.com/prints/type-o-file/-preorder-so-you-need-a-typeface-poster/prod_260.html
  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: 960.gs www.drupal.org/project/ninesixty
  33. 33. Super Lazy Base Theme: Fusion www.drupal.org/project/fusion
  34. 34. Ultra Powerful Base Theme: Zen www.drupal.org/project/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: http://api.drupal.org/api/drupal/modules--system--page.tpl.php/6/source 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/domainname.com/themes ● 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! http://www.flickr.com/photos/14150482@N02/2526889807/
  43. 43. 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)
  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 emma@designtotheme.com www.designtotheme.com
  46. 46. It’s too hard. Show me how! Pink sherbert photography http://www.flickr.com/photos/pinksherbet/3372060864/
  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 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;  ?> ­­>
  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 http://drupal.org/node/223430 ● See also: api.drupal.org
  51. 51. 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.
  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.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×