Intro to Theming Drupal, FOSSLC Summer Camp 2010

Basic Design for Drupal

Emma Jane Hogbin
@emmajanedotnet
emma@designtotheme.com
www.designtotheme.com

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

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.

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.

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

No, Balsamiq is not open source.

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

Establish the Framework
1.Grid layout: 960.gs templates
2.Colour palate: colourlovers.com,
colorschemedesigner.com
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
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.

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.

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

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: 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/modules--system--page.tpl.php/6/source

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/domainname.com/themes
● Enabling the theme: ?q=/admin/build/themes
● Clear Drupal’s cache
● When in doubt, clear Drupal’s cache again.

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://themegarden.org/drupal6/)
● Selling your themes
(www.topnotchthemes.com)

And that was...
Basically How You Theme Drupal

Emma Jane Hogbin
@emmajanedotnet
emma@designtotheme.com
www.designtotheme.com

It’s too hard.
Show me how!

Pink sherbert photography http://www.flickr.com/photos/pinksherbet/3372060864/

$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 $
?>
    <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="nodebottom" class="node
    <div id="nodetop" class="nodetop row bottom row nested">
nested">     <div id="nodebottominner"
      <div id="nodetopinner" class="nodebottominner inner">
class="nodetopinner inner">       <?php print $node_bottom; ?>
        <?php print $node_top; ?>     </div><! /nodebottominner >
      </div><! /nodetopinner >   </div><! /nodebottom >
    </div><! /nodetop >   <?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
http://drupal.org/node/223430
● See also: api.drupal.org

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.

Your Theme’s .info file
name = My First Theme
description = Featuring multiple ponyfriendly regions.
core = 6.x
engine = phptemplate
base theme = ninesixty

; Add ponyfriendly 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.

Intro to Theming Drupal, FOSSLC Summer Camp 2010

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (6)

Similaire à Intro to Theming Drupal, FOSSLC Summer Camp 2010

Similaire à Intro to Theming Drupal, FOSSLC Summer Camp 2010 (20)

Plus de Emma Jane Hogbin Westby

Plus de Emma Jane Hogbin Westby (20)

Dernier

Dernier (20)

Intro to Theming Drupal, FOSSLC Summer Camp 2010