Intro to Theme Development Michael Anello, Ryan Price www.DrupalEasy.com
Who are you? Designers? Developers?
Content vs. Presentation Static HTML vs. Database-Driven Sites
Content vs. Presentation Easy Theme Switching in Drupal (example)
Alternate Title Anatomy of a Drupal Themer
Who I am not Not just a Designer
A Drupal developer Who I am (sometimes)
Designer != Themer Designers Developer $$$
The best designers and themers see the BIG picture. IMHO
<ul><li>Code Editor </li><ul><li>Mac </li><ul><li>macromates.com - TextMate
panic.com – Coda
macrabbit.com – Espresso
barebones.com - TextWrangler </li></ul><li>Windows </li><ul><li>sourceforge.net - Notepad++
UltraEdit.com
CrimsonEditor.com </li></ul></ul></ul>A Themer's Toolbox
<ul><li>Image Editor </li><ul><li>Pixelmator.com (mac)
Aviary.com (online)
GetDrawIt.com (mac) </li></ul><li>Firefox Extensions </li><ul><li>Firebug
ColorZilla
MeasureIt
Web Developer Toolbar </li></ul></ul>A Themer's Toolbox
<ul><li>CSS Editor </li><ul><li>macrabbit.com – CSSEdit (mac)
westciv.com – StyleMaster (windows) </li></ul><li>FTP </li><ul><li>FileZilla – sourceforge.net </li></ul><li>SSH </li><ul>...
CSS <ul><li>Layout
Styling </li></ul>
XTHML <ul><li>Based on XML
More strict than HTML </li><ul><li>Closing Tags </li></ul></ul>
PHP (for themers) <ul><li><?php print $var; ?>
if (isset($var)): … endif;
if (!empty($var)): … endif;
Upcoming SlideShare
Loading in...5
×

DrupalEasy: Intro to Theme Development

5,521

Published on

Presentation for DrupalEasy's Intro to Theming workshop.

Published in: Technology
1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total Views
5,521
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
265
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

DrupalEasy: Intro to Theme Development

  1. 1. Intro to Theme Development Michael Anello, Ryan Price www.DrupalEasy.com
  2. 2. Who are you? Designers? Developers?
  3. 3. Content vs. Presentation Static HTML vs. Database-Driven Sites
  4. 4. Content vs. Presentation Easy Theme Switching in Drupal (example)
  5. 5. Alternate Title Anatomy of a Drupal Themer
  6. 6. Who I am not Not just a Designer
  7. 7. A Drupal developer Who I am (sometimes)
  8. 8. Designer != Themer Designers Developer $$$
  9. 9. The best designers and themers see the BIG picture. IMHO
  10. 10. <ul><li>Code Editor </li><ul><li>Mac </li><ul><li>macromates.com - TextMate
  11. 11. panic.com – Coda
  12. 12. macrabbit.com – Espresso
  13. 13. barebones.com - TextWrangler </li></ul><li>Windows </li><ul><li>sourceforge.net - Notepad++
  14. 14. UltraEdit.com
  15. 15. CrimsonEditor.com </li></ul></ul></ul>A Themer's Toolbox
  16. 16. <ul><li>Image Editor </li><ul><li>Pixelmator.com (mac)
  17. 17. Aviary.com (online)
  18. 18. GetDrawIt.com (mac) </li></ul><li>Firefox Extensions </li><ul><li>Firebug
  19. 19. ColorZilla
  20. 20. MeasureIt
  21. 21. Web Developer Toolbar </li></ul></ul>A Themer's Toolbox
  22. 22. <ul><li>CSS Editor </li><ul><li>macrabbit.com – CSSEdit (mac)
  23. 23. westciv.com – StyleMaster (windows) </li></ul><li>FTP </li><ul><li>FileZilla – sourceforge.net </li></ul><li>SSH </li><ul><li>PuTTY.org (windows) </li></ul><li>Tools </li><ul><li>wafflesoftware.com - Hex Color Picker (mac) </li></ul></ul>A Themer's Toolbox
  24. 24. CSS <ul><li>Layout
  25. 25. Styling </li></ul>
  26. 26. XTHML <ul><li>Based on XML
  27. 27. More strict than HTML </li><ul><li>Closing Tags </li></ul></ul>
  28. 28. PHP (for themers) <ul><li><?php print $var; ?>
  29. 29. if (isset($var)): … endif;
  30. 30. if (!empty($var)): … endif;
  31. 31. http://drupal.geek.nz/blog/tplphps-are-not-templates </li></ul>
  32. 32. What do you need to know? XHTML CSS <?php print $content; ?> jQuery setting up a development enviornment version control a little more PHP?
  33. 33. Filetypes .info template.php .tpl.php images (.jpg, .gif, .png) css javascript
  34. 34. Brass Tacks http://drupal.org/node/171194
  35. 35. Template File Naming <ul><li>page.tpl.php </li><ul><li>page-front.tpl.php </li></ul><li>node.tpl.php </li><ul><li>node-blog.tpl.php
  36. 36. node-17.tpl.php </li></ul><li>block.tpl.php </li><ul><li>block-left.tpl.php
  37. 37. block-block-3.tpl.php </li></ul><li>http://drupal.org/node/190815 </li></ul>
  38. 38. Breaking down a Drupal site <ul><li>Page
  39. 39. Region
  40. 40. Block
  41. 41. Node
  42. 42. Forms
  43. 43. Views
  44. 44. Panels </li></ul>
  45. 45. Views Theme Information <ul><li>Which part? </li><ul><li>Display
  46. 46. Style
  47. 47. Row
  48. 48. Field </li></ul><li>Create named file </li><ul><li>Lots of control </li></ul><li>Copy code into theme folder </li></ul>
  49. 49. Overriding Theme Functions <ul><li>http://api.drupal.org
  50. 50. hook _theme_function(arg1, arg2) {...}
  51. 51. /sites/all/themes/ zen /template.php
  52. 52. zen _theme_function(arg1, arg2) {...}
  53. 53. Clear theme registry </li></ul>
  54. 54. Possible Examples <ul><li>Static image mockup to Drupal theme
  55. 55. Static HTML to Drupal theme http://drupal.org/node/313510
  56. 56. Subtheming http://drupal.org/node/225125 </li></ul>
  57. 57. Helpful Things <ul><li>Devel module: http://www.drupal.org/project/devel
  58. 58. Theme Developer module: http://www.drupal.org/project/devel_themer
  59. 59. Block Class module: http://www.drupal.org/project/block_class
  60. 60. Block Theme module: http://www.drupal.org/project/blocktheme
  61. 61. Menu Attributes module: http://www.drupal.org/project/menu_attributes </li></ul>
  62. 62. Helpful Things (continued) <ul><li>Skinr module: http://www.drupal.org/project/skinr
  63. 63. Zen base theme: http://www.drupal.org/project/zen
  64. 64. Blueprint base theme: http://www.drupal.org/project/blueprint
  65. 65. NineSixty base theme: http://www.drupal.org/project/ninesixty
  66. 66. Fusion base theme: http://www.drupal.org/project/fusion </li></ul>
  67. 67. Helpful Things (even more!) <ul><li>Semantic Views module: http://www.drupal.org/project/semantic_views
  68. 68. “Getting Started with the Blueprint Theme” - http://drupaleasy.com/blueprint
  69. 69. “Getting Started with the 960 Grid System” - http://drupaleasy.com/960
  70. 70. “Front End Drupal” by Emma Jane Hogbin and Konstantin Kafer. Prentice Hall, 2009.
  71. 71. DrupalEasy Podcast Interview with Emma Jane Hogbin - http://drupaleasy.com/frontenddrupal </li></ul>
  72. 72. Helpful Links <ul><li>http://www.drupal.org/
  73. 73. http://groups.drupal.org/theme-development
  74. 74. http://groups.drupal.org/tnt-themes
  75. 75. http://design4drupal.org (June 19-20, 2010)
  76. 76. #drupal-support on IRC </li><ul><li>http://drupal.org/irc
  77. 77. http://webchat.freenode.net/
  78. 78. Chatzilla (Firefox plugin)
  79. 79. Colloquy (Mac OS X) http://colloquy.info/ </li></ul></ul>
  80. 80. Helpful Links (get on with it!) <ul><li>Structure of the Theme .info file http://drupal.org/node/171205
  81. 81. Types of Themes http://drupal.org/node/323990
  82. 82. POSH (Plain Old Semantic HTML) http://drupal.org/node/44072
  83. 83. Set the Maintenance Theme http://drupal.org/node/195435
  84. 84. Theme Search Results http://drupal.org/node/175013 </li></ul>
  85. 85. Where to find Themes <ul><li>http://drupal.org/project/Themes
  86. 86. http://themegarden.org
  87. 87. http://d-theme.com
  88. 88. http://DrupalThemes.org
  89. 89. http://groups.drupal.org/theme-development
  90. 90. http://www.csszengarden.com
  91. 91. http://oswd.org </li></ul>
  92. 92. Follow the Leader <ul>To follow along on your laptop, download: <li>http://acquia.com/download
  93. 93. http://drupal.org/project/zen
  94. 94. http://drupal.org/project/zenophile
  95. 95. http://drupal.org/project/devel
  96. 96. http://drupal.org/project/devel_themer </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×