Intro to Theme Development

Ryan Price, Michael Anellowww.DrupalEasy.com

Who are you?

Designers? Developers?Site Builders?Content Administrators?

Themers.

Content vs. Presentation

Static HTMLvs.Server-Side Includesvs.Database-Driven Sitesvs.Themable Data-Driven Sites

Content vs. Presentation

Easy Theme Switching in Drupal

(example)

Anatomy of a Drupal Themer

GraphicDesigner

Javascript +PHP Coder

$$$

Front-end Developer

The best designers and themers see the BIG picture.

IMHO

User Experience (UX)

macromates.com
TextMate
The Missing Editor for Mac OSX
Find in Project saves my life daily
See also: Smultron, KOD, TextWrangler, Coda
Espresso

notepad-plus-plus.org
Notepad++
Notepad replacement... to offer a greener environment
Also: Crimson, e-texteditor, UltraEdit, InType, ConTEXT,
Visual Web Developer Express

Image EditorPixelmator.com (mac)

Aviary.com (online)

GetDrawIt.com (mac)

The GIMP

Firefox ExtensionsFirebug

ColorZilla

MeasureIt

Web Developer Toolbar

A Themer's Toolbox

CSS Editormacrabbit.com CSSEdit (mac)

westciv.com StyleMaster (windows)

FTPFileZilla sourceforge.net

Transmit panic.com (mac)

SSHPuTTY.org (windows)

Toolswafflesoftware.com - Hex Color Picker (mac)

Pixie Color Picker (windows)

A Themer's Toolbox

CSS

Layout

Styling

Colors

Behaviors CSS3

Do Web Pages have to look the same in every browser? No.
http://dowebsitesneedtolookexactlythesameineverybrowser.com

HTML vs. XHTML vs. HTML5

HTML5Backwards-compatible

New layout elements (semantic)Section, Navigation, Header

New form elementsEmail, Search, etc.

Scripts for Legacy Browsers (IE)

DrupalCon Session - HTML5Tuesday,1:45pm, Trellon Room

PHP (for themers)

if (isset($var)): endif;

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

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

Copy/Paste PHP

What do you need to know?

HTMLCSS

jQuerysetting up a development environmentversion control - gita little more PHP?

Best Practice Theme Folder

sites/all/themes/drupalcon/css/style.cssdrupalcon.infoimages/image.pngscripts/drupalcon.jstemplate.phptemplates/node.tpl.php

Breaking down a Drupal site

HTML

Page

Region

Node

Fields

Block

Views

Menu

Panels

Forms

User

Template Nesting

Drupal 7 Theming

Template-driven (.tpl.php)HTML open and

Page Regions, Layout, Special Variables

site_name, logo, main_menu, tabs

Region Blocks, including Main Content

Block almost everything

Node on node pages, views

Field markup for each field

Clear the theme registry (cache)!

Template File Naming

page.tpl.phppage--front.tpl.php

pageviews.tpl.php

page--user--%.tpl.php

region.tpl.phpregion--header.tpl.php

node.tpl.phpnode--blog.tpl.php

node--17.tpl.php

node--%--edit.tpl.php

Template File Naming

block.tpl.phpblock--sidebar_first.tpl.php

block--aggregator.tpl.php

block--block--7.tpl.php

field.tpl.phpfield--blog.tpl.php

field--field_tags.tpl.php

More about Template Suggestions:
http://drupal.org/node/190815

Theme Hook Suggestions

theme('hook__foo__bar', $vars) 'hook__foo__bar'

'hook_foo'

'hook'

hook_theme()You can add new suggestions

http://api.drupal.org/hook_theme

Views Theming

Views 3Markup is custonEntire field

Label

Value

Classes on everything

Semantic Views

Theme: Information

Views Theme Information

Template-drivenDisplay entire view (header, footer, paging, ...)

Style how rows are laid out (rows, grid, ...)

Row how each row is laid out

Field how each field is laid out (or use UI)

Create named fileLots of control w/ naming suggestions

Copy code into theme folder

api.drupal.org
Default Theme Implementations
Functions and templates for the user interface to be implemented by themes.
http://bit.ly/d7theme

Overriding Theme Functions

http://api.drupal.org
(or use theme_developer module)

theme_user_signature($node) {...}

/sites/all/themes/drupalcon/template.php

drupalcon_user_signature($node) {...}

Clear theme registry

Overriding Template Output

Order of Operations:
http://drupal.org/node/223430 Locate the appropriate file

template_preprocess_node(&$variables) {...}

/sites/all/themes/drupalcon/template.php

drupalcon_preprocess_node(&$variables) {...}

Clear theme registry

Overriding Template Output

drupalcon_process_node(&$variables, $hook) {// Specific to 'foo'.if ($hook == 'foo') {

$variables['foo_item'] = 'foo item'; }

}

base_path() + path_to_theme()

Process runs after preprocess, go figure!

If you get the function name wrong, you get the white screen of death!

render() and hide()

New API Functions that Rock in Drupal 7:
http://bit.ly/hzXBrp