DrupalEasy: Intro to Theme Development

Intro to Theme Development

Michael Anello, Ryan Pricewww.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 EditorMacmacromates.com - TextMate

panic.com Coda

macrabbit.com Espresso

barebones.com - TextWrangler

Windowssourceforge.net - Notepad++

UltraEdit.com

CrimsonEditor.com

A Themer's Toolbox

Image EditorPixelmator.com (mac)

Aviary.com (online)

GetDrawIt.com (mac)

Firefox ExtensionsFirebug

ColorZilla

MeasureIt

Web Developer Toolbar

A Themer's Toolbox

CSS Editormacrabbit.com CSSEdit (mac)

westciv.com StyleMaster (windows)

FTPFileZilla sourceforge.net

SSHPuTTY.org (windows)

Toolswafflesoftware.net - Hex Color Picker (mac)

A Themer's Toolbox

CSS

Layout

Styling

XTHML

Based on XML

More strict than HTMLClosing Tags

PHP (for themers)

if (isset($var)): endif;

if (!empty($var)): endif;

http://drupal.geek.nz/blog/tplphps-are-not-templates

What do you need to know?

XHTMLCSS

jQuerysetting up a development enviornmentversion controla little more PHP?

Filetypes

.infotemplate.php.tpl.phpimages (.jpg, .gif, .png)cssjavascript

Brass Tacks

http://drupal.org/node/171194

Template File Naming

page.tpl.phppage-front.tpl.php

node.tpl.phpnode-blog.tpl.php

node-17.tpl.php

block.tpl.phpblock-left.tpl.php

block-block-3.tpl.php


Breaking down a Drupal site

Page

Region

Block

Node

Forms

Views

Panels

Views Theme Information

Which part?Display

Style

Row

Field

Create named fileLots 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

Subtheming

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 IRChttp://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 filehttp://drupal.org/node/171205

Types of Themes

POSH (Plain Old Semantic HTML)http://drupal.org/node/44072

Set the Maintenance Themehttp://drupal.org/node/195435

Theme Search Results

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

Click to edit the title text format

Click to edit the outline text formatSecond Outline LevelThird Outline LevelFourth Outline LevelFifth Outline LevelSixth Outline LevelSeventh Outline LevelEighth Outline LevelNinth Outline Level

Technology

DrupalEasy: Intro to Theme Development