Let's Zen! (Stop Theming From Scratch)
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


Let's Zen! (Stop Theming From Scratch)



Points about the Zen theme project for Drupal.

Points about the Zen theme project for Drupal.



Total Views
Views on SlideShare
Embed Views



5 Embeds 14

http://www.slideshare.net 7
http://www.linkedin.com 3
https://www.linkedin.com 2
http://localhost 1
http://www.health.medicbd.com 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Let's Zen! (Stop Theming From Scratch) Presentation Transcript

  • 1. Stop Theming From Scratch... Let's Zen! Chris Charlton www.chrischarlton.us
  • 2. Who am I? What am I? Chris Charlton – I teach, I write, I code.  LA Drupal Manager – groups.drupal.org/LA  LA AIR Adobe Group Manager – laair.org  Drupal Training – drupaltrainer.com and  drupallearning.com for info and dates.
  • 3. What Unicorns Planned For Us Today: General overview of Drupal Themes.  Parts of a Drupal Theme.  How time consuming “from scratch” really is.  Zen Theme: Vanilla for your sprinkles! 
  • 4. Drupal 6 Themes General Overview Themes can be installed/uninstalled at will.  Site users can pick any theme you install.  There are free themes, commercial themes,  and any can be tweaked or sub-themed. Themes are made up of CSS and PHP files.  Themes override core and module rendering. 
  • 5. Parts of a Drupal Theme (Terms) Page = the “shell” markup   <head>  <body>  <div id=”header”>  <div id=”content”>  <div id=”custom-regions”> Region = area where blocks/content live  Header  Content  Sidebar Left  Sidebar Right  Footer  Node = a piece of content 
  • 6. Parts of a Drupal Theme (Files) Folder & files:   .infofile = theme description/manifest  style.css = the common name for main stylesheet  template.php = powerful file; custom theme logic TPL (PHP/XHTML files; PHP Template)   page.tpl.php  node.tpl.php  block.tpl.php  comment.tpl.php  ... and many, many more.
  • 7. Theme Cost Graph – fake, but real. A = a free/core theme  B = a budget theme  C = a contrib theme  D = a budgetted theme Price  D B Themes take more C A than one pass, and themes always evolve. Quality
  • 8. Spend $$$ on your theme Good themes keep sites out of the passive  “Oh, just another Drupal site” stigma. Good themes grow with a site & don't smell.  Theme code overrides rendering logic from  core and module defaults. Your theme has final “say” on how anything should look. Modules provide theme “hooks” to override. 
  • 9. Save $$$ on your theme Join a theme framework project, like Zen!   Others out there: Blueprint, The 950 Theme, Basic, ...  Reduce or eliminate “from scratch” foundation work. Zen contains pre-declared CSS selectors:   Tags: h1, h2, h3, h4, h5, h6, p, a, a:hover, a:visited, ...  Common Drupal regions (IDs): #header, #footer, #content, ...  Common Drupal styles (Classes): .node, .form-field, .block, ...
  • 10. Where to read more about Zen http://drupal.org/project/zen  Drupal Planet & Drupal Talk (blogs/feeds)  Themer Group –  http://groups.drupal.org/theme-development *Dreamweaver fans visit http://xtnd.us