Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Introductory Drupal Theme
      Development
         by Sheena Donnelly

       DrupalCamp Atlanta
       September 18, 20...
Introductions
I am…                          You are…
I. Graphic Designer & Front-   I. Front End Developer
   End Develop...
Part I

Introduction to the Drupal
       Theme Layer
What is a Drupal Theme?
I. HTML, CSS and PHP
II..info File
    • Basic Settings of
      Theme
III. .tpl.php Files
    • T...
Where the Theme Lives
.info
I. Holds basic information
   about the theme.
   • Name
   • Drupal Version and
     Theme Engine
   • Declares bas...
Regions
I. Main page-layout
   elements
II.Blocks are Placed into
   Regions
   • Blocks are pieces of
     content genera...
CSS Files
I. Declared in the .info file or added
   by drupal_add_css()
    • Drupal core organizes the
      cascade of CS...
Javascript Files
I. Declared in the .info file or
   added by drupal_add_js()
   • Drupal can compress
     javascript for ...
page.tpl.php
I.     HTML template for all
       pages
II.    Receives and displays
       content from Node,
       Regio...
Other Templates
I. node.tpl.php
   • Becomes the $content
     variable on node pages
   • Specificity:
     node-type.tpl....
Theme Settings Page
I. Toggle use of certain
   variables
  • Customizable per
    theme
II.Toggle use of post
   informat...
Site Information Page
I. Input site information
  • $site_name
  • $site_slogan
  • $mission
  • $footer_message
II.Set wh...
Part II

PSD to Page.tpl.php
Basic Page Variables
I. Regions                     III. Important System
   • $header, $left, $right,        Variables
  ...
Additional Page Variables
I. Utility Variables
   • Let you check for some
     state of the current page
   • Ex. - $is_f...
Relating Elements of a Design to
Page Variables
I. Isolate elements that   III. Create new regions
   are unique to each  ...
Isolating Elements - PSD Comp
Isolating Elements   Regions and other Variables
Isolating Elements   Blocks within Regions

PSD Comp             Blocks Admin Page
Using Variables in page.tpl.php
Part III

 Tools, Tips and
Recommendations
Popular Base Themes
I. Zen - http://drupal.org/
  project/zen
    • The best “starter”
      theme.
    • Very well
      ...
Popular Base Themes
II.       Blueprint - http://drupal.org/
          project/blueprint

      •        More advanced bas...
Popular Base Themes
III.       NineSixty - http://drupal.org/
           project/ninesixty

       •       Based on Popula...
Ready-to-Use Themes
I.   www.drupal.org/project/Themes
II. www.topnotchthemes.com
III. www.adaptivethemes.com

IV. www.the...
Essential Modules
I. Admin/Development   III. Taxonomy
   • Admin Menu           • Taxonomy Image
   • Devel              ...
Getting More Help
I. drupal.org theming guide
    • http://drupal.org/theme-guide
II.irc.freenode.net
    • #drupal-themes...
Thank You!
I. Check these sites for slides, links and more
   information later today!
  • www.coalmarch.com
  • www.sheen...
Nächste SlideShare
Wird geladen in …5
×

PSD to Drupal - Introductory Drupal Theming

9.421 Aufrufe

Veröffentlicht am

Presentation on Sept 19, 2009 at Drupal Camp Atlanta

Veröffentlicht in: Technologie, Business

PSD to Drupal - Introductory Drupal Theming

  1. 1. Introductory Drupal Theme Development by Sheena Donnelly DrupalCamp Atlanta September 18, 2009
  2. 2. Introductions I am… You are… I. Graphic Designer & Front- I. Front End Developer End Developer II.Intermediate-level II.10+ mos. Drupal HTML/CSS skills Experience III.Basic Familiarity with PHP III.Co-organizer of triDUG IV.Bonus Points: Familiar IV.Lead Web Designer with Drupal Admin at Coalmarch
  3. 3. Part I Introduction to the Drupal Theme Layer
  4. 4. What is a Drupal Theme? I. HTML, CSS and PHP II..info File • Basic Settings of Theme III. .tpl.php Files • Templates IV. .css and .js files • For spice and everything nice V.Template.php • For advanced stuff
  5. 5. Where the Theme Lives
  6. 6. .info I. Holds basic information about the theme. • Name • Drupal Version and Theme Engine • Declares base theme (if applicable) • Declares Regions • Declares CSS files • Declares JS files
  7. 7. Regions I. Main page-layout elements II.Blocks are Placed into Regions • Blocks are pieces of content generated by various modules III.Provides a variable of the same name in the page.tpl.php file IV.Use fewest Regions needed to avoid performance issues
  8. 8. CSS Files I. Declared in the .info file or added by drupal_add_css() • Drupal core organizes the cascade of CSS files • Drupal can compress CSS for faster load II. Style.css automatically declared for every theme III.Conditional Stylesheets can be added w/ help from Conditional Stylesheets module • Some themes support this feature natively
  9. 9. Javascript Files I. Declared in the .info file or added by drupal_add_js() • Drupal can compress javascript for faster load II.Drupal Core includes JQuery III. script.js automatically decalred for all themes
  10. 10. page.tpl.php I. HTML template for all pages II. Receives and displays content from Node, Regions and some modules III. Requires a basic understanding of PHP to read
  11. 11. Other Templates I. node.tpl.php • Becomes the $content variable on node pages • Specificity: node-type.tpl.php II.block.tpl.php, comment.tpl.php, etc. III.Copy any .tpl.php file from a module into your theme to customize the HTML output of the module
  12. 12. Theme Settings Page I. Toggle use of certain variables • Customizable per theme II.Toggle use of post information by node type • Global Only III.Upload $site_logo and favicon images
  13. 13. Site Information Page I. Input site information • $site_name • $site_slogan • $mission • $footer_message II.Set which node is displayed as the Homepage
  14. 14. Part II PSD to Page.tpl.php
  15. 15. Basic Page Variables I. Regions III. Important System • $header, $left, $right, Variables $content, $footer • $head, $head_title, II. Theme Settings Variables $styles, $scripts, $title, $tabs, • $site_name, $messages, $site_slogan, $logo, $feed_icons, $primary_links, $closure $secondary_links, $mission, IV. Most of these variables $footer_message, are HTML strings $search_box
  16. 16. Additional Page Variables I. Utility Variables • Let you check for some state of the current page • Ex. - $is_front is used to check if the current page is the homepage. II.Metadata Variables • Ex. - $body_classes sets classes on the <body> like is_front, page_node, node_type_blog, etc.
  17. 17. Relating Elements of a Design to Page Variables I. Isolate elements that III. Create new regions are unique to each in .info file if page from elements necessary that will be shared between pages IV. Finally, format the HTML layout of II.Determine which elements in shared elements will page.tpl.php to be blocks and which reflect your site blocks share a region design
  18. 18. Isolating Elements - PSD Comp
  19. 19. Isolating Elements Regions and other Variables
  20. 20. Isolating Elements Blocks within Regions PSD Comp Blocks Admin Page
  21. 21. Using Variables in page.tpl.php
  22. 22. Part III Tools, Tips and Recommendations
  23. 23. Popular Base Themes I. Zen - http://drupal.org/ project/zen • The best “starter” theme. • Very well documented and supported • Fluid and Fixed layout options • Development Options
  24. 24. Popular Base Themes II. Blueprint - http://drupal.org/ project/blueprint • More advanced base theme • 24-column grid system • Widths of various regions can changed based on other regions • Those settings contained in template.php
  25. 25. Popular Base Themes III. NineSixty - http://drupal.org/ project/ninesixty • Based on Popular 960.gs grid system. • 12 or 16 column layout • Widths of various regions can changed based on other regions • Uses ns() function in page.tpl.php to acomplish this
  26. 26. Ready-to-Use Themes I. www.drupal.org/project/Themes II. www.topnotchthemes.com III. www.adaptivethemes.com IV. www.themeforest.com V. www.templatemoster.com
  27. 27. Essential Modules I. Admin/Development III. Taxonomy • Admin Menu • Taxonomy Image • Devel • Taxonomy Menu • Conditional IV. Images Stylesheets • Imagecache II. Menu Help • Imagecache Crop • Menu Icons • Galleria • Menu Block • Thickbox • Menu Trails V. Other • Pathauto • Block Class • Nice Menus • Dynamic Rendering
  28. 28. Getting More Help I. drupal.org theming guide • http://drupal.org/theme-guide II.irc.freenode.net • #drupal-themes • #drupal-design • #drupal-support • #drupal-nc III. http://mustardseedmedia.com/podcast IV. http://boston.design4drupal.org/sessions
  29. 29. Thank You! I. Check these sites for slides, links and more information later today! • www.coalmarch.com • www.sheenadonnelly.net

×