• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
DrupalEasy: Intro to Theme Development
 

DrupalEasy: Intro to Theme Development

on

  • 6,009 views

Presentation for DrupalEasy's Intro to Theming workshop.

Presentation for DrupalEasy's Intro to Theming workshop.

Statistics

Views

Total Views
6,009
Views on SlideShare
5,985
Embed Views
24

Actions

Likes
6
Downloads
243
Comments
1

2 Embeds 24

http://www.slideshare.net 23
http://localhost 1

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

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

    DrupalEasy: Intro to Theme Development DrupalEasy: Intro to Theme Development Presentation Transcript

    • Intro to Theme Development Michael Anello, Ryan Price www.DrupalEasy.com
    • Who are you? Designers? Developers?
    • Content vs. Presentation Static HTML vs. Database-Driven Sites
    • Content vs. Presentation Easy Theme Switching in Drupal (example)
    • Alternate Title Anatomy of a Drupal Themer
    • Who I am not Not just a Designer
    • A Drupal developer Who I am (sometimes)
    • Designer != Themer Designers Developer $$$
    • The best designers and themers see the BIG picture. IMHO
      • Code Editor
        • Mac
          • macromates.com - TextMate
          • panic.com – Coda
          • macrabbit.com – Espresso
          • barebones.com - TextWrangler
        • Windows
          • sourceforge.net - Notepad++
          • UltraEdit.com
          • CrimsonEditor.com
      A Themer's Toolbox
      • Image Editor
        • Pixelmator.com (mac)
        • Aviary.com (online)
        • GetDrawIt.com (mac)
      • Firefox Extensions
        • Firebug
        • ColorZilla
        • MeasureIt
        • Web Developer Toolbar
      A Themer's Toolbox
      • CSS Editor
        • macrabbit.com – CSSEdit (mac)
        • westciv.com – StyleMaster (windows)
      • FTP
        • FileZilla – sourceforge.net
      • SSH
        • PuTTY.org (windows)
      • Tools
        • wafflesoftware.com - Hex Color Picker (mac)
      A Themer's Toolbox
    • CSS
      • Layout
      • Styling
    • XTHML
      • Based on XML
      • More strict than HTML
        • Closing Tags
    • PHP (for themers)
      • <?php print $var; ?>
      • if (isset($var)): … endif;
      • if (!empty($var)): … endif;
      • http://drupal.geek.nz/blog/tplphps-are-not-templates
    • What do you need to know? XHTML CSS <?php print $content; ?> jQuery setting up a development enviornment version control a little more PHP?
    • Filetypes .info template.php .tpl.php images (.jpg, .gif, .png) css javascript
    • Brass Tacks http://drupal.org/node/171194
    • Template File Naming
      • page.tpl.php
        • page-front.tpl.php
      • node.tpl.php
        • node-blog.tpl.php
        • node-17.tpl.php
      • block.tpl.php
        • block-left.tpl.php
        • block-block-3.tpl.php
      • http://drupal.org/node/190815
    • Breaking down a Drupal site
      • Page
      • Region
      • Block
      • Node
      • Forms
      • Views
      • Panels
    • Views Theme Information
      • Which part?
        • Display
        • Style
        • Row
        • Field
      • Create named file
        • Lots of control
      • Copy code into theme folder
    • Overriding Theme Functions
      • http://api.drupal.org
      • hook _theme_function(arg1, arg2) {...}
      • /sites/all/themes/ zen /template.php
      • zen _theme_function(arg1, arg2) {...}
      • Clear theme registry
    • Possible Examples
      • Static image mockup to Drupal theme
      • Static HTML to Drupal theme http://drupal.org/node/313510
      • Subtheming http://drupal.org/node/225125
    • Helpful Things
      • Devel module: http://www.drupal.org/project/devel
      • Theme Developer module: http://www.drupal.org/project/devel_themer
      • Block Class module: http://www.drupal.org/project/block_class
      • Block Theme module: http://www.drupal.org/project/blocktheme
      • Menu Attributes module: http://www.drupal.org/project/menu_attributes
    • Helpful Things (continued)
      • Skinr module: http://www.drupal.org/project/skinr
      • Zen base theme: http://www.drupal.org/project/zen
      • Blueprint base theme: http://www.drupal.org/project/blueprint
      • NineSixty base theme: http://www.drupal.org/project/ninesixty
      • Fusion base theme: http://www.drupal.org/project/fusion
    • Helpful Things (even more!)
      • Semantic Views module: http://www.drupal.org/project/semantic_views
      • “Getting Started with the Blueprint Theme” - http://drupaleasy.com/blueprint
      • “Getting Started with the 960 Grid System” - http://drupaleasy.com/960
      • “Front End Drupal” by Emma Jane Hogbin and Konstantin Kafer. Prentice Hall, 2009.
      • DrupalEasy Podcast Interview with Emma Jane Hogbin - http://drupaleasy.com/frontenddrupal
    • Helpful Links
      • http://www.drupal.org/
      • http://groups.drupal.org/theme-development
      • http://groups.drupal.org/tnt-themes
      • http://design4drupal.org (June 19-20, 2010)
      • #drupal-support on IRC
        • http://drupal.org/irc
        • http://webchat.freenode.net/
        • Chatzilla (Firefox plugin)
        • Colloquy (Mac OS X) http://colloquy.info/
    • Helpful Links (get on with it!)
      • Structure of the Theme .info file http://drupal.org/node/171205
      • Types of Themes http://drupal.org/node/323990
      • POSH (Plain Old Semantic HTML) http://drupal.org/node/44072
      • Set the Maintenance Theme http://drupal.org/node/195435
      • Theme Search Results http://drupal.org/node/175013
    • Where to find Themes
      • http://drupal.org/project/Themes
      • http://themegarden.org
      • http://d-theme.com
      • http://DrupalThemes.org
      • http://groups.drupal.org/theme-development
      • http://www.csszengarden.com
      • http://oswd.org
    • Follow the Leader
        To follow along on your laptop, download:
      • http://acquia.com/download
      • http://drupal.org/project/zen
      • http://drupal.org/project/zenophile
      • http://drupal.org/project/devel
      • http://drupal.org/project/devel_themer