DrupalEasy: Intro to Theme Development

  • 5,327 views
Uploaded on

Presentation for DrupalEasy's Intro to Theming workshop.

Presentation for DrupalEasy's Intro to Theming workshop.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
5,327
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
264
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.
    • Code Editor
      • Mac
        • macromates.com - TextMate
        • 11. panic.com – Coda
        • 12. macrabbit.com – Espresso
        • 13. barebones.com - TextWrangler
      • Windows
        • sourceforge.net - Notepad++
        • 14. UltraEdit.com
        • 15. CrimsonEditor.com
    A Themer's Toolbox
  • 16.
    • Image Editor
      • Pixelmator.com (mac)
      • 17. Aviary.com (online)
      • 18. GetDrawIt.com (mac)
    • Firefox Extensions
    A Themer's Toolbox
  • 22.
    • CSS Editor
      • macrabbit.com – CSSEdit (mac)
      • 23. westciv.com – StyleMaster (windows)
    • FTP
      • FileZilla – sourceforge.net
    • SSH
      • PuTTY.org (windows)
    • Tools
      • wafflesoftware.com - Hex Color Picker (mac)
    A Themer's Toolbox
  • 24. CSS
  • 26. XTHML
    • Based on XML
    • 27. More strict than HTML
      • Closing Tags
  • 28. PHP (for themers)
    • <?php print $var; ?>
    • 29. if (isset($var)): … endif;
    • 30. if (!empty($var)): … endif;
    • 31. http://drupal.geek.nz/blog/tplphps-are-not-templates
  • 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
    • page.tpl.php
      • page-front.tpl.php
    • node.tpl.php
      • node-blog.tpl.php
      • 36. node-17.tpl.php
    • block.tpl.php
      • block-left.tpl.php
      • 37. block-block-3.tpl.php
    • http://drupal.org/node/190815
  • 38. Breaking down a Drupal site
  • 45. Views Theme Information
    • Which part?
    • Create named file
      • Lots of control
    • Copy code into theme folder
  • 49. Overriding Theme Functions
    • 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
  • 54. Possible Examples
    • Static image mockup to Drupal theme
    • 55. Static HTML to Drupal theme http://drupal.org/node/313510
    • 56. Subtheming http://drupal.org/node/225125
  • 57. Helpful Things
    • 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
  • 62. Helpful Things (continued)
    • 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
  • 67. Helpful Things (even more!)
    • 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
  • 72. Helpful Links
    • 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
      • http://drupal.org/irc
      • 77. http://webchat.freenode.net/
      • 78. Chatzilla (Firefox plugin)
      • 79. Colloquy (Mac OS X) http://colloquy.info/
  • 80. Helpful Links (get on with it!)
    • 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
  • 85. Where to find Themes
    • 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
  • 92. Follow the Leader
      To follow along on your laptop, download:
    • 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