Themer's roundtable


Published on

Published in: Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Themer's roundtable

  1. 1. Meg Frisch, Larry Miller,  Theresa Summa, Mason Wendell
  2. 2. What's a Theme? <ul><li>A &quot;theme&quot; is a collection of files that define the presentation layer or &quot;look and feel&quot; of a Drupal site. </li></ul>Source: &quot;About Theming&quot; in the Theming Guide
  3. 3. Workflows and Roles
  4. 4. Diff'rent Strokes for Diff'rent Themers ›   What's a Themer? <ul><ul><li>A Themer is someone who creates and/or customizes the user interface (UI) for a website in Drupal.  </li></ul></ul><ul><ul><li>We have different backgrounds: </li></ul></ul><ul><ul><ul><li>Visual Design </li></ul></ul></ul><ul><ul><ul><li>Development </li></ul></ul></ul><ul><ul><ul><li>Professional Wrestling </li></ul></ul></ul><ul><ul><ul><li>others? </li></ul></ul></ul><ul><ul><li>different skill sets: </li></ul></ul><ul><ul><ul><li>what are necessary skills? </li></ul></ul></ul><ul><ul><li>different teams... </li></ul></ul>
  5. 5. Diff'rent Strokes for Diff'rent Themers ›   A typical day in the life... <ul><ul><li>We may work with several other designers, developers, and themers on our team (a large team of 10 or more) </li></ul></ul><ul><ul><li>We may work with only a couple other players, sharing some responsibilities (a small team of under 10) </li></ul></ul><ul><ul><li>We may work on our own, managing and coordinating entire projects (soup to nuts) </li></ul></ul><ul><ul><li>We may work on a contract or for another group as a freelance themer (flying solo) </li></ul></ul>
  6. 6. Diff'rent Strokes for Diff'rent Themers ›   On a small team... <ul><ul><li>accountability / responsibility </li></ul></ul><ul><ul><li>best practices & good habits </li></ul></ul>
  7. 7. Diff'rent Strokes for Diff'rent Themers ›   On a large team... <ul><ul><li>be aware of different skill levels & </li></ul></ul><ul><ul><li>be prepared to educate </li></ul></ul><ul><ul><li>stay involved in design and development process (if not already) </li></ul></ul>
  8. 8. Diff'rent Strokes for Diff'rent Themers ›   flying solo <ul><ul><li>account for other roles / team members </li></ul></ul><ul><ul><li>stay organized!  </li></ul></ul>
  9. 9. Anatomy of a theme
  10. 10. What's in a Theme? <ul><ul><li>Required </li></ul></ul><ul><ul><ul><li> </li></ul></ul></ul><ul><ul><li>Basic </li></ul></ul><ul><ul><ul><li>template.php </li></ul></ul></ul><ul><ul><ul><li>.tpl.php files </li></ul></ul></ul><ul><ul><ul><li>CSS, JS, images </li></ul></ul></ul><ul><ul><li>Rad </li></ul></ul><ul><ul><ul><li>Pre-process, overrides & API functions </li></ul></ul></ul>
  11. 11. What's in a Theme? ›   The .info file <ul><ul><li>Necessary for Drupal to &quot;see&quot; the theme </li></ul></ul><ul><ul><li>name, description, version and other information </li></ul></ul><ul><ul><li>location of CSS & JavaScript files </li></ul></ul><ul><ul><li>specify block regions  </li></ul></ul><ul><ul><li>theme options </li></ul></ul>
  12. 13. What's in a Theme? ›   template.php <ul><ul><li>stores theme (override) functions </li></ul></ul><ul><ul><ul><li>In Drupal 6, some functions, like drupal_add_js(), can be loaded from the file instead. </li></ul></ul></ul><ul><ul><ul><li>In Drupal 7, some functions will only be available from the file.   </li></ul></ul></ul><ul><ul><li>Preprocessing: </li></ul></ul><ul><ul><ul><li>function mytheme_preprocess_node()  </li></ul></ul></ul><ul><ul><ul><li>function mytheme_preprocess_page() </li></ul></ul></ul><ul><ul><li>use this when you want to simplify your workflow and create reusable parts. </li></ul></ul>
  13. 14. What's in a Theme? ›   tpl.php files <ul><ul><li>write markup for layout </li></ul></ul><ul><ul><li>implement theme variables </li></ul></ul><ul><ul><li>exercise caution - do not build templates of doom </li></ul></ul>
  14. 16. What's in a Theme? ›   auxiliary files CSS, JS, images <ul><ul><li>create folders in your theme directory  </li></ul></ul><ul><ul><ul><li>e.g. /css, /js or /scripts, /img or /images </li></ul></ul></ul><ul><ul><li>be consistent </li></ul></ul><ul><ul><li>as a general rule, you are adding or overriding not replacing  </li></ul></ul>
  15. 17. getting started, software recommendations, essential modules & resources
  16. 18. Themer's Toolkit ›   Software recommendations <ul><ul><li>Your IDE of choice </li></ul></ul><ul><ul><ul><li>textmate (mac)  / notepad++ </li></ul></ul></ul><ul><ul><ul><li>netbeans (cross-os compatible) </li></ul></ul></ul><ul><ul><ul><li>but we're not sure it matters. </li></ul></ul></ul><ul><ul><li>Firebug + Firefox </li></ul></ul><ul><ul><li>Sass & Compass </li></ul></ul><ul><ul><li>Adobe Creative Suite or Open Source graphics program (Inkscape, Gimp) </li></ul></ul>
  17. 19. Themer's Toolkit ›   Essential Modules <ul><ul><li>Imagecache </li></ul></ul><ul><ul><li>Semantic Views </li></ul></ul><ul><ul><li>Display suite </li></ul></ul><ul><ul><li>Contexts </li></ul></ul><ul><ul><li>Panels </li></ul></ul><ul><ul><li>jQuery UI </li></ul></ul><ul><ul><li>Simplemenu </li></ul></ul><ul><ul><li>Menublock </li></ul></ul><ul><ul><li>Devel + Theme Developer </li></ul></ul><ul><ul><li>String overrides </li></ul></ul>
  18. 20. Themer's Toolkit ›   Resources <ul><ul><li> </li></ul></ul><ul><ul><li>blueprint.css / </li></ul></ul><ul><ul><ul><li>( </li></ul></ul></ul><ul><ul><ul><li>( </li></ul></ul></ul><ul><ul><li>Zen theme ( </li></ul></ul><ul><ul><ul><li>Subthemes ( </li></ul></ul></ul><ul><ul><li>Wireframe, Sketch, Plan </li></ul></ul><ul><ul><li>Lullabot's Theming Best Practices (  </li></ul></ul><ul><ul><li>When all else fails... ASK ON IRC! </li></ul></ul><ul><ul><li>( </li></ul></ul><ul><ul><li>  </li></ul></ul><ul><li>  </li></ul>
  19. 21. › Happy Theming! Meg Frisch Twitter: @megfrisch [email_address]   Larry Miller Twitter: @ldpm [email_address] Theresa Summa Twitter: @theresaanna Mason Wendell Twitter: @canarymason