Drupal Theme Development - DrupalCon Chicago 2011

Intro to Theme Development Ryan Price, Michael Anello www.DrupalEasy.com

Who are you? Designers? Developers? Site Builders? Content Administrators? Themers.

Content vs. Presentation Static HTML vs. Server-Side Includes vs. Database-Driven Sites vs. Themable Data-Driven Sites

Content vs. Presentation Easy Theme Switching in Drupal (example)

Anatomy of a Drupal Themer Graphic Designer 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 Editor
Pixelmator.com (mac)
Aviary.com (online)
GetDrawIt.com (mac)
The GIMP
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
Transmit – panic.com (mac)
SSH
PuTTY.org (windows)
Tools
wafflesoftware.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
HTML5
Backwards-compatible
New layout elements (“semantic”)
Section, Navigation, Header
New form elements
Email, Search, etc.
Scripts for Legacy Browsers (IE)
DrupalCon Session - HTML5
Tuesday,1:45pm, Trellon Room

PHP (for themers)
<?php print $var; ?>
if ( isset ($var)): … endif;
if (! empty ($var)): … endif;
http://drupal.geek.nz/blog/tplphps-are-not-templates

Copy/Paste PHP
<?php if ($page[ 'highlight' ]): ?> <div id="highlight"> <?php print render ($page[ 'highlight' ]); ?> </div> <?php endif; ?>

What do you need to know? HTML CSS <?php print $content; ?> jQuery setting up a development environment version control - git a little more PHP?

Best Practice Theme Folder sites/all/themes/ drupalcon/ css/ style.css drupalcon.info images/ image.png scripts/ drupalcon.js template.php templates/ 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 <HTML> and <HEAD>
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.php
page--front.tpl.php
page—views.tpl.php
page--user--%.tpl.php
region.tpl.php
region--header.tpl.php
node.tpl.php
node--blog.tpl.php
node--17.tpl.php
node--%--edit.tpl.php

Template File Naming
block.tpl.php
block--sidebar_first.tpl.php
block--aggregator.tpl.php
block--block--7.tpl.php
field.tpl.php
field--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 3
Markup is custon
Entire field
Label
Value
Classes on everything
“Semantic Views”
Theme: Information

Views Theme Information
Template-driven
Display – 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 file
Lots 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
<?php
hide ($content[ 'field_image' ]);
hide ($content[ 'links' ]);
print render ($content);
// don't forget debug($variables, "field", TRUE);
print render ($content[ 'field_image' ]);
?>

Two more ways to hide elements
There are two official CSS classes to hide page elements inside of Drupal, depending on whether you would like screen readers to be able to see the elements: class=”element-hidden”
Hidden from everyone
class=”element-invisible”
Not hidden from screen readers
http://drupal.org/update/themes/6/7#element-hidden

Alter Hooks
hook_form_alter()
hook_page_alter()
hook_css_alter()
hook_js_alter()
hook_block_view_alter()
hook_block_view_aggregator_1_alter()
<?php print $classes; ?>

Add CSS and JS Libraries
drupal_add_css()
drupal_add_js()
drupal_add_library()
Add multiple CSS and JS (honors dependency)
drupal_add_feed()
drupal_add_html_head()
SEO guys love this one
drupal_add_region_content()

Conditional Styles – i.e. IE
drupal_add_css ( path_to_theme () . '/css/ie.css' , array ( 'group' => CSS_THEME, 'browsers' => array ( 'IE' => 'lte IE 7' , '!IE' => FALSE, ), 'every_page' => TRUE, ) ); or a module: http://drupal.org/project/conditional_styles

drupal.org/project/devel_themer Theme Developer Module “ Firebug for Drupal themeing.” Enable it when needed, and disable it afterwards.

Possible Examples
Static image mockup to Drupal theme
i.e. Subtheming http://drupal.org/node/225125 (D6)
Start with Zen, make subtheme
PSD to Drupal Theme http://slidesha.re/8Gl1bu
Static HTML to Drupal theme http://drupal.org/node/313510 (D6)
Open Source Web Design example

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
Omega base theme: http://www.drupal.org/project/omega
Fusion base theme: http://www.drupal.org/project/fusion
Genesis base theme: http://drupal.org/project/genesis

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/html5
http://groups.drupal.org/tnt-themes
http://design4drupal.org
Boston
Los Angeles
Prague

Helpful Links
Internet Relay Chat - IRC
http://drupal.org/irc
http://webchat.freenode.net/
Chatzilla (Firefox plugin)
Colloquy (Mac OS X) http://colloquy.info/
#drupal-support
#drupal-design
#drupal-html5
#drupal-themes

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 http://drupal.org/node/991278
POSH (Plain Old Semantic HTML) http://drupal.org/node/44072
Set the Maintenance Theme http://api.drupal.org/maintenance-page
Theme Search Results http://api.drupal.org/search-result

More Info about D6 to D7
Convert D6 themes to D7 http://drupal.org/update/themes/6/7
A peek at Drupal 7 theme system changes http://bit.ly/hMwEyp
Grok Drupal 7 Theming Slideshow http://bit.ly/hkv9rL
RDFa and Drupal http://buytaert.net/semantic-web-and-drupal-video

Where to find Themes
http://drupal.org/project/Themes
http://themegarden.org (D6)
http://d-theme.com/drupal_7
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/downloads
http://drupal.org/download
http://drupal.org/project/zen
http://drupal.org/project/zenophile
http://drupal.org/project/devel
http://drupal.org/project/devel_themer
http://drupal.org/project/block_class

http://drupaleasy.com	2634
http://alifdalya.blogspot.com	54
http://www.drupaleasy.com	7
http://translate.googleusercontent.com	6
http://localhost	4
url_unknown	3
http://www.linkedin.com	3

Drupal Theme Development - DrupalCon Chicago 2011

by Ryan Price on Mar 11, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

7 Embeds 2,711

Statistics

Drupal Theme Development - DrupalCon Chicago 2011 — Presentation Transcript