Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Drupal 6 Theming using the Zen Theme

How to Theme Drupal using the Zen Theme as a framework

  • Login to see the comments

Drupal 6 Theming using the Zen Theme

  1. 1. Drupal 6 Theming using the Zen Theme DrupalCamp Athens, 14/3/2009 DrupalCamp Athens, 14/3/2009 Sunday, March 15, 2009
  2. 2. 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
  3. 3. Sunday, March 15, 2009
  4. 4. Theme Basic Elements .info file ✤ Template files (.tpl.php) ✤ Template.php ✤ Css files ✤ Sunday, March 15, 2009
  5. 5. .info file Name ✤ Description ✤ Core engine ✤ Base Theme ✤ Stylesheets ✤ Scripts ✤ Regions ✤ Settings ✤ Sunday, March 15, 2009
  6. 6. 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
  7. 7. Template PHP Custom Functions ✤ Override Theme Functions ✤ Sunday, March 15, 2009
  8. 8. css files One or many ✤ Create new stylesheets ✤ Override stylesheets ✤ from core or modules Sunday, March 15, 2009
  9. 9. 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
  10. 10. Firebug Sunday, March 15, 2009
  11. 11. Theme Developer Sunday, March 15, 2009
  12. 12. Theme Developer with Views Sunday, March 15, 2009
  13. 13. 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
  14. 14. Zen Theme Advantages Fluid and Fixed Layout ✤ 3 column collapsible layout ✤ Useful body classes ex. ✤ body class=quot;not-front not-logged-in no-sidebars page-taxonomy-term-20 section- taxonomy lightbox-processedquot; Block Editing ✤ A Theming Framework, not just a Theme ✤ Great Documentation ✤ Sunday, March 15, 2009
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. Thanks http://www.infowonders.gr ✤ http://www.georgepapadongonas.com ✤ george@infowonders.gr ✤ Twitter: infowonders ✤ LinkedIn: infowonders ✤ Sunday, March 15, 2009

×