DrupalEasy: Intro to Theme Development
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

DrupalEasy: Intro to Theme Development

  • 6,493 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
6,493
On Slideshare
6,469
From Embeds
24
Number of Embeds
2

Actions

Shares
Downloads
259
Comments
1
Likes
6

Embeds 24

http://www.slideshare.net 23
http://localhost 1

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