SlideShare a Scribd company logo
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
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
Intro to Theming Drupal, FOSSLC Summer Camp 2010
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


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.
Intro to Theming Drupal, FOSSLC Summer Camp 2010
Intro to Theming Drupal, FOSSLC Summer Camp 2010
Intro to Theming Drupal, FOSSLC Summer Camp 2010
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 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.
Step 5: Theme the Rest by UX
Intro to Theming Drupal, FOSSLC Summer Camp 2010
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://themegarden.org/drupal6/)
●   Selling your themes
    (www.topnotchthemes.com)
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
             emma@designtotheme.com
               www.designtotheme.com
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 $
?>
                                                  <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
    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 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.

More Related Content

What's hot

8 things to know about theming in drupal 8
8 things to know about theming in drupal 88 things to know about theming in drupal 8
8 things to know about theming in drupal 8
Logan Farr
 
Converting (X)HTML/CSS template to Drupal 7 Theme
Converting (X)HTML/CSS template to Drupal 7 ThemeConverting (X)HTML/CSS template to Drupal 7 Theme
Converting (X)HTML/CSS template to Drupal 7 Theme
Adolfo Nasol
 
Drupal 7 Theme System
Drupal 7 Theme SystemDrupal 7 Theme System
Drupal 7 Theme System
Peter Arato
 
A look at Drupal 7 Theming
A look at Drupal 7 ThemingA look at Drupal 7 Theming
A look at Drupal 7 Theming
Aimee Maree Forsstrom
 
Building a Custom Theme in Drupal 8
Building a Custom Theme in Drupal 8Building a Custom Theme in Drupal 8
Building a Custom Theme in Drupal 8
Anne Tomasevich
 
Drupal theming - a practical approach (European Drupal Days 2015)
Drupal theming - a practical approach (European Drupal Days 2015)Drupal theming - a practical approach (European Drupal Days 2015)
Drupal theming - a practical approach (European Drupal Days 2015)
Eugenio Minardi
 
Drupal Flyover, CMS Expo
Drupal Flyover, CMS ExpoDrupal Flyover, CMS Expo
Drupal Flyover, CMS Expo
Emma Jane Hogbin Westby
 
Theme Kickstart
Theme KickstartTheme Kickstart
Theme Kickstart
Peter
 
Arizona WP - Building a WordPress Theme
Arizona WP - Building a WordPress ThemeArizona WP - Building a WordPress Theme
Arizona WP - Building a WordPress Theme
certainstrings
 
PSD to a Drupal Theme (using a base theme)
PSD to a Drupal Theme (using a base theme)PSD to a Drupal Theme (using a base theme)
PSD to a Drupal Theme (using a base theme)
kuydigital
 
How to create a basic template
How to create a basic templateHow to create a basic template
How to create a basic template
vathur
 
Wordpress & HTML5 by Rob Larsen
Wordpress & HTML5 by Rob LarsenWordpress & HTML5 by Rob Larsen
Wordpress & HTML5 by Rob Larsen
George Mamadashvili
 
The Way to Theme Enlightenment 2017
The Way to Theme Enlightenment 2017The Way to Theme Enlightenment 2017
The Way to Theme Enlightenment 2017
Amanda Giles
 
Drupal 8 templating with twig
Drupal 8 templating with twigDrupal 8 templating with twig
Drupal 8 templating with twig
Taras Omelianenko
 
Drupal Front End PHP
Drupal Front End PHPDrupal Front End PHP
Drupal Front End PHP
Emma Jane Hogbin Westby
 
Introduction to WordPress Theme Development
Introduction to WordPress Theme DevelopmentIntroduction to WordPress Theme Development
Introduction to WordPress Theme Development
Sitdhibong Laokok
 
WordPress Theme Development: Part 2
WordPress Theme Development: Part 2WordPress Theme Development: Part 2
WordPress Theme Development: Part 2
Josh Lee
 
Build a WordPress theme from HTML5 template @ Telerik
Build a WordPress theme from HTML5 template @ TelerikBuild a WordPress theme from HTML5 template @ Telerik
Build a WordPress theme from HTML5 template @ Telerik
Mario Peshev
 
ePUB 3 and Publishing e-books
ePUB 3 and Publishing e-booksePUB 3 and Publishing e-books
ePUB 3 and Publishing e-books
Kerem Karatal
 

What's hot (19)

8 things to know about theming in drupal 8
8 things to know about theming in drupal 88 things to know about theming in drupal 8
8 things to know about theming in drupal 8
 
Converting (X)HTML/CSS template to Drupal 7 Theme
Converting (X)HTML/CSS template to Drupal 7 ThemeConverting (X)HTML/CSS template to Drupal 7 Theme
Converting (X)HTML/CSS template to Drupal 7 Theme
 
Drupal 7 Theme System
Drupal 7 Theme SystemDrupal 7 Theme System
Drupal 7 Theme System
 
A look at Drupal 7 Theming
A look at Drupal 7 ThemingA look at Drupal 7 Theming
A look at Drupal 7 Theming
 
Building a Custom Theme in Drupal 8
Building a Custom Theme in Drupal 8Building a Custom Theme in Drupal 8
Building a Custom Theme in Drupal 8
 
Drupal theming - a practical approach (European Drupal Days 2015)
Drupal theming - a practical approach (European Drupal Days 2015)Drupal theming - a practical approach (European Drupal Days 2015)
Drupal theming - a practical approach (European Drupal Days 2015)
 
Drupal Flyover, CMS Expo
Drupal Flyover, CMS ExpoDrupal Flyover, CMS Expo
Drupal Flyover, CMS Expo
 
Theme Kickstart
Theme KickstartTheme Kickstart
Theme Kickstart
 
Arizona WP - Building a WordPress Theme
Arizona WP - Building a WordPress ThemeArizona WP - Building a WordPress Theme
Arizona WP - Building a WordPress Theme
 
PSD to a Drupal Theme (using a base theme)
PSD to a Drupal Theme (using a base theme)PSD to a Drupal Theme (using a base theme)
PSD to a Drupal Theme (using a base theme)
 
How to create a basic template
How to create a basic templateHow to create a basic template
How to create a basic template
 
Wordpress & HTML5 by Rob Larsen
Wordpress & HTML5 by Rob LarsenWordpress & HTML5 by Rob Larsen
Wordpress & HTML5 by Rob Larsen
 
The Way to Theme Enlightenment 2017
The Way to Theme Enlightenment 2017The Way to Theme Enlightenment 2017
The Way to Theme Enlightenment 2017
 
Drupal 8 templating with twig
Drupal 8 templating with twigDrupal 8 templating with twig
Drupal 8 templating with twig
 
Drupal Front End PHP
Drupal Front End PHPDrupal Front End PHP
Drupal Front End PHP
 
Introduction to WordPress Theme Development
Introduction to WordPress Theme DevelopmentIntroduction to WordPress Theme Development
Introduction to WordPress Theme Development
 
WordPress Theme Development: Part 2
WordPress Theme Development: Part 2WordPress Theme Development: Part 2
WordPress Theme Development: Part 2
 
Build a WordPress theme from HTML5 template @ Telerik
Build a WordPress theme from HTML5 template @ TelerikBuild a WordPress theme from HTML5 template @ Telerik
Build a WordPress theme from HTML5 template @ Telerik
 
ePUB 3 and Publishing e-books
ePUB 3 and Publishing e-booksePUB 3 and Publishing e-books
ePUB 3 and Publishing e-books
 

Viewers also liked

Git Makes Me Angry Inside
Git Makes Me Angry InsideGit Makes Me Angry Inside
Git Makes Me Angry Inside
Emma Jane Hogbin Westby
 
Communications 2 0
Communications 2 0Communications 2 0
Communications 2 0
e-Strategy
 
Presentation7
Presentation7Presentation7
Presentation7
ealeno
 
Monitoring Processes
Monitoring ProcessesMonitoring Processes
Monitoring Processes
switchsolutions
 
Flatstanleyprjct
FlatstanleyprjctFlatstanleyprjct
Flatstanleyprjct
carlynn
 
Drupal Version Control & File System Basics
Drupal Version Control & File System BasicsDrupal Version Control & File System Basics
Drupal Version Control & File System Basics
Julia Kulla-Mader
 

Viewers also liked (6)

Git Makes Me Angry Inside
Git Makes Me Angry InsideGit Makes Me Angry Inside
Git Makes Me Angry Inside
 
Communications 2 0
Communications 2 0Communications 2 0
Communications 2 0
 
Presentation7
Presentation7Presentation7
Presentation7
 
Monitoring Processes
Monitoring ProcessesMonitoring Processes
Monitoring Processes
 
Flatstanleyprjct
FlatstanleyprjctFlatstanleyprjct
Flatstanleyprjct
 
Drupal Version Control & File System Basics
Drupal Version Control & File System BasicsDrupal Version Control & File System Basics
Drupal Version Control & File System Basics
 

Similar to Intro to Theming Drupal, FOSSLC Summer Camp 2010

Drupal theming
Drupal themingDrupal theming
Drupal theming
Philip Norton
 
Forensic Theming for Drupal
Forensic Theming for DrupalForensic Theming for Drupal
Forensic Theming for Drupal
Emma Jane Hogbin Westby
 
Decoupling Drupal mit dem Lupus Nuxt.js Drupal Stack
Decoupling Drupal mit dem Lupus Nuxt.js Drupal StackDecoupling Drupal mit dem Lupus Nuxt.js Drupal Stack
Decoupling Drupal mit dem Lupus Nuxt.js Drupal Stack
nuppla
 
D7 theming what's new - London
D7 theming what's new - LondonD7 theming what's new - London
D7 theming what's new - London
Marek Sotak
 
Introduction To Drupal
Introduction To DrupalIntroduction To Drupal
Introduction To Drupal
Lauren Roth
 
Drupal 8: frontend development
Drupal 8: frontend developmentDrupal 8: frontend development
Drupal 8: frontend development
sparkfabrik
 
Forensic Theming - DrupalCon London
Forensic Theming - DrupalCon LondonForensic Theming - DrupalCon London
Forensic Theming - DrupalCon London
Emma Jane Hogbin Westby
 
DrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme DevelopmentDrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme Development
ultimike
 
Drupal Themes
Drupal ThemesDrupal Themes
Drupal Themes
akosh
 
7 Theming in Drupal
7 Theming in Drupal7 Theming in Drupal
7 Theming in Drupal
Wingston
 
Adopt or hack - how to hack a theme in a Drupal way
Adopt or hack - how to hack a theme in a Drupal wayAdopt or hack - how to hack a theme in a Drupal way
Adopt or hack - how to hack a theme in a Drupal way
Marek Sotak
 
Ready. Set. Drupal! An Intro to Drupal 8, Part 2
Ready. Set. Drupal! An Intro to Drupal 8, Part 2Ready. Set. Drupal! An Intro to Drupal 8, Part 2
Ready. Set. Drupal! An Intro to Drupal 8, Part 2
Acquia
 
"Paragraphs are more powerful than you can expect" from Vasily Jaremchuk for ...
"Paragraphs are more powerful than you can expect" from Vasily Jaremchuk for ..."Paragraphs are more powerful than you can expect" from Vasily Jaremchuk for ...
"Paragraphs are more powerful than you can expect" from Vasily Jaremchuk for ...
DrupalCamp Kyiv
 
Display Suite: A Themers Perspective
Display Suite: A Themers PerspectiveDisplay Suite: A Themers Perspective
Display Suite: A Themers Perspective
Mediacurrent
 
Theming tips and tricks
Theming tips and tricksTheming tips and tricks
Theming tips and tricks
aaroncouch
 
Joomla! Day UK 2009 Basic Templates
Joomla! Day UK 2009 Basic TemplatesJoomla! Day UK 2009 Basic Templates
Joomla! Day UK 2009 Basic Templates
Andy Wallace
 
Joomla Day UK 2009 Basic Templates
Joomla Day UK 2009 Basic TemplatesJoomla Day UK 2009 Basic Templates
Joomla Day UK 2009 Basic Templates
Chris Davenport
 
D7 as D8
D7 as D8D7 as D8
Drupal 7 install with modules and themes
Drupal 7 install with modules and themesDrupal 7 install with modules and themes
Drupal 7 install with modules and themes
Geshan Manandhar
 
Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR
Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCRDrupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR
Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR
Gaurav Mishra
 

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

Drupal theming
Drupal themingDrupal theming
Drupal theming
 
Forensic Theming for Drupal
Forensic Theming for DrupalForensic Theming for Drupal
Forensic Theming for Drupal
 
Decoupling Drupal mit dem Lupus Nuxt.js Drupal Stack
Decoupling Drupal mit dem Lupus Nuxt.js Drupal StackDecoupling Drupal mit dem Lupus Nuxt.js Drupal Stack
Decoupling Drupal mit dem Lupus Nuxt.js Drupal Stack
 
D7 theming what's new - London
D7 theming what's new - LondonD7 theming what's new - London
D7 theming what's new - London
 
Introduction To Drupal
Introduction To DrupalIntroduction To Drupal
Introduction To Drupal
 
Drupal 8: frontend development
Drupal 8: frontend developmentDrupal 8: frontend development
Drupal 8: frontend development
 
Forensic Theming - DrupalCon London
Forensic Theming - DrupalCon LondonForensic Theming - DrupalCon London
Forensic Theming - DrupalCon London
 
DrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme DevelopmentDrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme Development
 
Drupal Themes
Drupal ThemesDrupal Themes
Drupal Themes
 
7 Theming in Drupal
7 Theming in Drupal7 Theming in Drupal
7 Theming in Drupal
 
Adopt or hack - how to hack a theme in a Drupal way
Adopt or hack - how to hack a theme in a Drupal wayAdopt or hack - how to hack a theme in a Drupal way
Adopt or hack - how to hack a theme in a Drupal way
 
Ready. Set. Drupal! An Intro to Drupal 8, Part 2
Ready. Set. Drupal! An Intro to Drupal 8, Part 2Ready. Set. Drupal! An Intro to Drupal 8, Part 2
Ready. Set. Drupal! An Intro to Drupal 8, Part 2
 
"Paragraphs are more powerful than you can expect" from Vasily Jaremchuk for ...
"Paragraphs are more powerful than you can expect" from Vasily Jaremchuk for ..."Paragraphs are more powerful than you can expect" from Vasily Jaremchuk for ...
"Paragraphs are more powerful than you can expect" from Vasily Jaremchuk for ...
 
Display Suite: A Themers Perspective
Display Suite: A Themers PerspectiveDisplay Suite: A Themers Perspective
Display Suite: A Themers Perspective
 
Theming tips and tricks
Theming tips and tricksTheming tips and tricks
Theming tips and tricks
 
Joomla! Day UK 2009 Basic Templates
Joomla! Day UK 2009 Basic TemplatesJoomla! Day UK 2009 Basic Templates
Joomla! Day UK 2009 Basic Templates
 
Joomla Day UK 2009 Basic Templates
Joomla Day UK 2009 Basic TemplatesJoomla Day UK 2009 Basic Templates
Joomla Day UK 2009 Basic Templates
 
D7 as D8
D7 as D8D7 as D8
D7 as D8
 
Drupal 7 install with modules and themes
Drupal 7 install with modules and themesDrupal 7 install with modules and themes
Drupal 7 install with modules and themes
 
Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR
Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCRDrupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR
Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR
 

More from Emma Jane Hogbin Westby

Managing a Project the Drupal Way - Drupal Open Days Ireland
Managing a Project the Drupal Way - Drupal Open Days IrelandManaging a Project the Drupal Way - Drupal Open Days Ireland
Managing a Project the Drupal Way - Drupal Open Days Ireland
Emma Jane Hogbin Westby
 
Was it something I said?
Was it something I said?Was it something I said?
Was it something I said?
Emma Jane Hogbin Westby
 
HOWTO Empathy
HOWTO EmpathyHOWTO Empathy
Getting a CLUE at the Command Line
Getting a CLUE at the Command LineGetting a CLUE at the Command Line
Getting a CLUE at the Command Line
Emma Jane Hogbin Westby
 
Lessons From an Unlikely Superhero
Lessons From an Unlikely SuperheroLessons From an Unlikely Superhero
Lessons From an Unlikely Superhero
Emma Jane Hogbin Westby
 
PSD to Theme: The SMACSS Way
PSD to Theme: The SMACSS WayPSD to Theme: The SMACSS Way
PSD to Theme: The SMACSS Way
Emma Jane Hogbin Westby
 
Git Makes Me Angry Inside - DrupalCon Prague
Git Makes Me Angry Inside - DrupalCon PragueGit Makes Me Angry Inside - DrupalCon Prague
Git Makes Me Angry Inside - DrupalCon Prague
Emma Jane Hogbin Westby
 
Was It Something I Said? The Art of Giving (and getting) A Critique
Was It Something I Said? The Art of Giving (and getting) A CritiqueWas It Something I Said? The Art of Giving (and getting) A Critique
Was It Something I Said? The Art of Giving (and getting) A Critique
Emma Jane Hogbin Westby
 
Beyond the Bikeshed
Beyond the BikeshedBeyond the Bikeshed
Beyond the Bikeshed
Emma Jane Hogbin Westby
 
Gamestorming Meets Quiet
Gamestorming Meets QuietGamestorming Meets Quiet
Gamestorming Meets Quiet
Emma Jane Hogbin Westby
 
Work Flow for Solo Developers and Small Teams
Work Flow for Solo Developers and Small TeamsWork Flow for Solo Developers and Small Teams
Work Flow for Solo Developers and Small Teams
Emma Jane Hogbin Westby
 
Evaluating Base Themes
Evaluating Base ThemesEvaluating Base Themes
Evaluating Base Themes
Emma Jane Hogbin Westby
 
Speaker Check-in - 3 - Munich
Speaker Check-in - 3 - MunichSpeaker Check-in - 3 - Munich
Speaker Check-in - 3 - Munich
Emma Jane Hogbin Westby
 
Responsive Web Design for Drupal, CMS Expo
Responsive Web Design for Drupal, CMS ExpoResponsive Web Design for Drupal, CMS Expo
Responsive Web Design for Drupal, CMS Expo
Emma Jane Hogbin Westby
 
Selling Hopes and Dreams - DrupalCamp Toronto
Selling Hopes and Dreams - DrupalCamp TorontoSelling Hopes and Dreams - DrupalCamp Toronto
Selling Hopes and Dreams - DrupalCamp Toronto
Emma Jane Hogbin Westby
 
There's a Module for That, MIMA Summit 2010
There's a Module for That, MIMA Summit 2010There's a Module for That, MIMA Summit 2010
There's a Module for That, MIMA Summit 2010
Emma Jane Hogbin Westby
 
Advanced Layout Techniques @ CMSExpo
Advanced Layout Techniques @ CMSExpoAdvanced Layout Techniques @ CMSExpo
Advanced Layout Techniques @ CMSExpo
Emma Jane Hogbin Westby
 
Drupal Help System
Drupal Help SystemDrupal Help System
Drupal Help System
Emma Jane Hogbin Westby
 
Lessons from Life Coaching for Linux
Lessons from Life Coaching for LinuxLessons from Life Coaching for Linux
Lessons from Life Coaching for Linux
Emma Jane Hogbin Westby
 
Beautiful In Print
Beautiful In PrintBeautiful In Print
Beautiful In Print
Emma Jane Hogbin Westby
 

More from Emma Jane Hogbin Westby (20)

Managing a Project the Drupal Way - Drupal Open Days Ireland
Managing a Project the Drupal Way - Drupal Open Days IrelandManaging a Project the Drupal Way - Drupal Open Days Ireland
Managing a Project the Drupal Way - Drupal Open Days Ireland
 
Was it something I said?
Was it something I said?Was it something I said?
Was it something I said?
 
HOWTO Empathy
HOWTO EmpathyHOWTO Empathy
HOWTO Empathy
 
Getting a CLUE at the Command Line
Getting a CLUE at the Command LineGetting a CLUE at the Command Line
Getting a CLUE at the Command Line
 
Lessons From an Unlikely Superhero
Lessons From an Unlikely SuperheroLessons From an Unlikely Superhero
Lessons From an Unlikely Superhero
 
PSD to Theme: The SMACSS Way
PSD to Theme: The SMACSS WayPSD to Theme: The SMACSS Way
PSD to Theme: The SMACSS Way
 
Git Makes Me Angry Inside - DrupalCon Prague
Git Makes Me Angry Inside - DrupalCon PragueGit Makes Me Angry Inside - DrupalCon Prague
Git Makes Me Angry Inside - DrupalCon Prague
 
Was It Something I Said? The Art of Giving (and getting) A Critique
Was It Something I Said? The Art of Giving (and getting) A CritiqueWas It Something I Said? The Art of Giving (and getting) A Critique
Was It Something I Said? The Art of Giving (and getting) A Critique
 
Beyond the Bikeshed
Beyond the BikeshedBeyond the Bikeshed
Beyond the Bikeshed
 
Gamestorming Meets Quiet
Gamestorming Meets QuietGamestorming Meets Quiet
Gamestorming Meets Quiet
 
Work Flow for Solo Developers and Small Teams
Work Flow for Solo Developers and Small TeamsWork Flow for Solo Developers and Small Teams
Work Flow for Solo Developers and Small Teams
 
Evaluating Base Themes
Evaluating Base ThemesEvaluating Base Themes
Evaluating Base Themes
 
Speaker Check-in - 3 - Munich
Speaker Check-in - 3 - MunichSpeaker Check-in - 3 - Munich
Speaker Check-in - 3 - Munich
 
Responsive Web Design for Drupal, CMS Expo
Responsive Web Design for Drupal, CMS ExpoResponsive Web Design for Drupal, CMS Expo
Responsive Web Design for Drupal, CMS Expo
 
Selling Hopes and Dreams - DrupalCamp Toronto
Selling Hopes and Dreams - DrupalCamp TorontoSelling Hopes and Dreams - DrupalCamp Toronto
Selling Hopes and Dreams - DrupalCamp Toronto
 
There's a Module for That, MIMA Summit 2010
There's a Module for That, MIMA Summit 2010There's a Module for That, MIMA Summit 2010
There's a Module for That, MIMA Summit 2010
 
Advanced Layout Techniques @ CMSExpo
Advanced Layout Techniques @ CMSExpoAdvanced Layout Techniques @ CMSExpo
Advanced Layout Techniques @ CMSExpo
 
Drupal Help System
Drupal Help SystemDrupal Help System
Drupal Help System
 
Lessons from Life Coaching for Linux
Lessons from Life Coaching for LinuxLessons from Life Coaching for Linux
Lessons from Life Coaching for Linux
 
Beautiful In Print
Beautiful In PrintBeautiful In Print
Beautiful In Print
 

Recently uploaded

Intel Unveils Core Ultra 200V Lunar chip .pdf
Intel Unveils Core Ultra 200V Lunar chip .pdfIntel Unveils Core Ultra 200V Lunar chip .pdf
Intel Unveils Core Ultra 200V Lunar chip .pdf
Tech Guru
 
Generative AI Reasoning Tech Talk - July 2024
Generative AI Reasoning Tech Talk - July 2024Generative AI Reasoning Tech Talk - July 2024
Generative AI Reasoning Tech Talk - July 2024
siddu769252
 
The Path to General-Purpose Robots - Coatue
The Path to General-Purpose Robots - CoatueThe Path to General-Purpose Robots - Coatue
The Path to General-Purpose Robots - Coatue
Razin Mustafiz
 
kk vathada _digital transformation frameworks_2024.pdf
kk vathada _digital transformation frameworks_2024.pdfkk vathada _digital transformation frameworks_2024.pdf
kk vathada _digital transformation frameworks_2024.pdf
KIRAN KV
 
Discovery Series - Zero to Hero - Task Mining Session 1
Discovery Series - Zero to Hero - Task Mining Session 1Discovery Series - Zero to Hero - Task Mining Session 1
Discovery Series - Zero to Hero - Task Mining Session 1
DianaGray10
 
NVIDIA at Breakthrough Discuss for Space Exploration
NVIDIA at Breakthrough Discuss for Space ExplorationNVIDIA at Breakthrough Discuss for Space Exploration
NVIDIA at Breakthrough Discuss for Space Exploration
Alison B. Lowndes
 
Uncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in LibrariesUncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in Libraries
Brian Pichman
 
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and DisadvantagesBLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
SAI KAILASH R
 
Semantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software DevelopmentSemantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software Development
Baishakhi Ray
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
Jimmy Lai
 
Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024
Nicolás Lopéz
 
Camunda Chapter NY Meetup July 2024.pptx
Camunda Chapter NY Meetup July 2024.pptxCamunda Chapter NY Meetup July 2024.pptx
Camunda Chapter NY Meetup July 2024.pptx
ZachWylie3
 
Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
Steven Carlson
 
Computer HARDWARE presenattion by CWD students class 10
Computer HARDWARE presenattion by CWD students class 10Computer HARDWARE presenattion by CWD students class 10
Computer HARDWARE presenattion by CWD students class 10
ankush9927
 
Keynote : AI & Future Of Offensive Security
Keynote : AI & Future Of Offensive SecurityKeynote : AI & Future Of Offensive Security
Keynote : AI & Future Of Offensive Security
Priyanka Aash
 
UX Webinar Series: Aligning Authentication Experiences with Business Goals
UX Webinar Series: Aligning Authentication Experiences with Business GoalsUX Webinar Series: Aligning Authentication Experiences with Business Goals
UX Webinar Series: Aligning Authentication Experiences with Business Goals
FIDO Alliance
 
Google I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged SlidesGoogle I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged Slides
Google Developer Group - Harare
 
Improving Learning Content Efficiency with Reusable Learning Content
Improving Learning Content Efficiency with Reusable Learning ContentImproving Learning Content Efficiency with Reusable Learning Content
Improving Learning Content Efficiency with Reusable Learning Content
Enterprise Knowledge
 
The History of Embeddings & Multimodal Embeddings
The History of Embeddings & Multimodal EmbeddingsThe History of Embeddings & Multimodal Embeddings
The History of Embeddings & Multimodal Embeddings
Zilliz
 
It's your unstructured data: How to get your GenAI app to production (and spe...
It's your unstructured data: How to get your GenAI app to production (and spe...It's your unstructured data: How to get your GenAI app to production (and spe...
It's your unstructured data: How to get your GenAI app to production (and spe...
Zilliz
 

Recently uploaded (20)

Intel Unveils Core Ultra 200V Lunar chip .pdf
Intel Unveils Core Ultra 200V Lunar chip .pdfIntel Unveils Core Ultra 200V Lunar chip .pdf
Intel Unveils Core Ultra 200V Lunar chip .pdf
 
Generative AI Reasoning Tech Talk - July 2024
Generative AI Reasoning Tech Talk - July 2024Generative AI Reasoning Tech Talk - July 2024
Generative AI Reasoning Tech Talk - July 2024
 
The Path to General-Purpose Robots - Coatue
The Path to General-Purpose Robots - CoatueThe Path to General-Purpose Robots - Coatue
The Path to General-Purpose Robots - Coatue
 
kk vathada _digital transformation frameworks_2024.pdf
kk vathada _digital transformation frameworks_2024.pdfkk vathada _digital transformation frameworks_2024.pdf
kk vathada _digital transformation frameworks_2024.pdf
 
Discovery Series - Zero to Hero - Task Mining Session 1
Discovery Series - Zero to Hero - Task Mining Session 1Discovery Series - Zero to Hero - Task Mining Session 1
Discovery Series - Zero to Hero - Task Mining Session 1
 
NVIDIA at Breakthrough Discuss for Space Exploration
NVIDIA at Breakthrough Discuss for Space ExplorationNVIDIA at Breakthrough Discuss for Space Exploration
NVIDIA at Breakthrough Discuss for Space Exploration
 
Uncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in LibrariesUncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in Libraries
 
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and DisadvantagesBLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
 
Semantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software DevelopmentSemantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software Development
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
 
Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024
 
Camunda Chapter NY Meetup July 2024.pptx
Camunda Chapter NY Meetup July 2024.pptxCamunda Chapter NY Meetup July 2024.pptx
Camunda Chapter NY Meetup July 2024.pptx
 
Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
 
Computer HARDWARE presenattion by CWD students class 10
Computer HARDWARE presenattion by CWD students class 10Computer HARDWARE presenattion by CWD students class 10
Computer HARDWARE presenattion by CWD students class 10
 
Keynote : AI & Future Of Offensive Security
Keynote : AI & Future Of Offensive SecurityKeynote : AI & Future Of Offensive Security
Keynote : AI & Future Of Offensive Security
 
UX Webinar Series: Aligning Authentication Experiences with Business Goals
UX Webinar Series: Aligning Authentication Experiences with Business GoalsUX Webinar Series: Aligning Authentication Experiences with Business Goals
UX Webinar Series: Aligning Authentication Experiences with Business Goals
 
Google I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged SlidesGoogle I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged Slides
 
Improving Learning Content Efficiency with Reusable Learning Content
Improving Learning Content Efficiency with Reusable Learning ContentImproving Learning Content Efficiency with Reusable Learning Content
Improving Learning Content Efficiency with Reusable Learning Content
 
The History of Embeddings & Multimodal Embeddings
The History of Embeddings & Multimodal EmbeddingsThe History of Embeddings & Multimodal Embeddings
The History of Embeddings & Multimodal Embeddings
 
It's your unstructured data: How to get your GenAI app to production (and spe...
It's your unstructured data: How to get your GenAI app to production (and spe...It's your unstructured data: How to get your GenAI app to production (and spe...
It's your unstructured data: How to get your GenAI app to production (and spe...
 

Intro to Theming Drupal, FOSSLC Summer Camp 2010

  • 1. Basic Design for Drupal Emma Jane Hogbin @emmajanedotnet emma@designtotheme.com www.designtotheme.com
  • 3. Theming WordPress A “pull” system http://www.flickr.com/photos/13879801@N00/96609354/
  • 4. Theming Drupal A prep and “push” system Source: http://www.flickr.com/photos/sebbisuperstar/2470560831
  • 5. Flow of Themed Content
  • 6. Rendered Page Logo Primary Links Search Block View (block) Login block Navigation menu
  • 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. 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.
  • 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.
  • 15. Warning! Promotion of Non-free software in the next slide
  • 16. Drupal Components for Balsamiq Created by Top Notch Themes Available from: http://mockupstogo.net/drupal- cms-components No, Balsamiq is not open source.
  • 17. Step 1: Grid + colour palate + imagination + GiMP.
  • 18. Establish the Framework 1.Grid layout: 960.gs templates 2.Colour palate: colourlovers.com, colorschemedesigner.com 3.Page elements: see wireframes and site specs
  • 19. 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
  • 20. 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.
  • 21. 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.
  • 33. Fill in the Blanks
  • 34. Step 2: Choose a Base Theme. Create a sub-theme.
  • 35. 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.
  • 36. Lazy Base Theme: 960.gs www.drupal.org/project/ninesixty
  • 37. Super Lazy Base Theme: Fusion www.drupal.org/project/fusion
  • 38. Ultra Powerful Base Theme: Zen www.drupal.org/project/zen
  • 39. Step 3: Rebuild the Design Files in Drupal.
  • 40. <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
  • 41. Step 4: Launch Your Minimum Viable Theme
  • 42. 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.
  • 43. 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.
  • 44. Step 5: Theme the Rest by UX
  • 48. 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)
  • 49. 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.
  • 50. And that was... Basically How You Theme Drupal Emma Jane Hogbin @emmajanedotnet emma@designtotheme.com www.designtotheme.com
  • 51. It’s too hard. Show me how! Pink sherbert photography http://www.flickr.com/photos/pinksherbet/3372060864/
  • 54. 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;  ?> ­­>
  • 55. 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
  • 56. 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.
  • 57. 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
  • 58. 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.