Your SlideShare is downloading. ×
0
DrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme Development
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

DrupalEasy: Intro to Theme Development

5,485

Published on

Presentation for DrupalEasy's Intro to Theming workshop.

Presentation for DrupalEasy's Intro to Theming workshop.

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×