Drupal 6 Theming
using the Zen Theme
DrupalCamp Athens, 14/3/2009
DrupalCamp Athens, 14/3/2009
Sunday, March 15, 2009

Drupal Theming Basics
Don't hack the core
✤
Don't hack the modules
✤
Don't hack Zen Theme
✤
Intercept and override instead!
✤
Sunday, March 15, 2009

Sunday, March 15, 2009

Theme Basic Elements
.info file
✤
Template files (.tpl.php)
✤
Template.php
✤
Css files
✤
Sunday, March 15, 2009

.info file
Name
✤
Description
✤
Core engine
✤
Base Theme
✤
Stylesheets
✤
Scripts
✤
Regions
✤
Settings
✤
Sunday, March 15, 2009

Template files
page.tpl.php
✤
page-front-tpl.php
✤
page-node-234.tpl.php
✤
node.tpl.php
✤
node-story.tpl.php
✤
node-view-VIEWNAME-tpl.php
✤
Sunday, March 15, 2009

Template PHP
Custom Functions
✤
Override Theme Functions
✤
Sunday, March 15, 2009

css files
One or many
✤
Create new stylesheets
✤
Override stylesheets
✤
from core or modules
Sunday, March 15, 2009

Drupal Themer Tools
Firebug
✤
www.getfirebug.com
Theme developer (Devel project)
✤
http://www.drupal.org/project/devel
Text editor ex.Coda
✤
http://www.panic.com/coda
Sunday, March 15, 2009

Firebug
Sunday, March 15, 2009

Theme Developer
Sunday, March 15, 2009

Theme Developer with Views
Sunday, March 15, 2009

Theming in 4 stages
Override Stylesheets in mytheme.css files
✤
Use Javascript and jquery
✤
Override template files (.tpl.php files)
✤
Override themable functions in
✤
Template.php
Sunday, March 15, 2009

Zen Theme Advantages
Fluid and Fixed Layout
✤
3 column collapsible layout
✤
Useful body classes ex.
✤
body class=\"not-front not-logged-in no-sidebars page-taxonomy-term-20 section-
taxonomy lightbox-processed\"
Block Editing
✤
A Theming Framework, not just a Theme
✤
Great Documentation
✤
Sunday, March 15, 2009

Workflow #1
Copy STARTERKIT folder to sites/all/themes
✤
Rename folder to MYTHEME
✤
Rename STARTERKIT.info to MYTHEME.info
✤
Rename all STARTERKIT instances to MYTHEME in .info file
✤
Sunday, March 15, 2009

Workflow #2
Rename all STARTERKIT instances to MYTHEME in template.php file
✤
Rename all STARTERKIT instances to MYTHEME in
✤
theme-settings.php file
Create .css files
✤
Sunday, March 15, 2009

Workflow #3
Declare regions, stylesheets and scripts in .info file
✤
Edit .css files
✤
Create template files
✤
Themable functions in template.php
✤
Done!
✤
Sunday, March 15, 2009

Links
Drupal 6 theme guide
✤
http://drupal.org/theme-guide/6
Zen Theme
✤
http://drupal.org/project/zen
Zen Task Force
✤
http://groups.drupal.org/zen-task-force
Sunday, March 15, 2009

Books
Front End Drupal
✤
http://drontenddrupal.com
Drupal 6 Themes
✤
http://www.packtub.com/drupal-6-themes/book
Pro Drupal Development
✤
http://www.drupalbook.com
Sunday, March 15, 2009

Thanks
http://www.infowonders.gr
✤
http://www.georgepapadongonas.com
✤
george@infowonders.gr
✤
Twitter: infowonders
✤
LinkedIn: infowonders
✤
Sunday, March 15, 2009