Drupal Theme Development - DrupalCon Chicago 2011
-
Upload
ryan-price -
Category
Technology
-
view
13.840 -
download
5
Transcript of Drupal Theme Development - DrupalCon Chicago 2011
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