Drupal Camp Victoria

Uploaded on

A presentation about drupal theming. From design to development stage

A presentation about drupal theming. From design to development stage

More in: Technology , Sports
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Drupal theming from design to development Alex J. Ventpap & Tom James
  • 2. Starting on Photoshop
        • The scary white canvas on photoshop, get logic. Collect data first
        • Set the size of the website, guidelines are important
        • Backgrounds, keep in mind developers work
  • 3. Gathering information - Wireframe is the boss Petro Value project
  • 4. Background & Guidelines Petro Value project
  • 5. Following the wireframe Petro Value project
  • 6. Layout and structure Petro Value project
  • 7. Vector elements in photoshop - stretching ability Petro Value project
  • 8. Fonts - websafe
        • http://www.typetester.org
  • 9. Colors - Adobe kuler
        • http://kuler.adobe.com/#links
  • 10. Fills, layer styles & keyboard shortcuts Layer Styles - Gradient Overlay + Stroke
  • 11.   Keyboard shortcuts MAIN MENU > Edit > Keyboard Shortcuts
  • 12. Finishing/revisions - Color changes/end of design stage Petro Value Project
  • 13. Useful links
    • More photoshop tricks
      •   http://all-x.ca/blog/?p=176
    • More about photoshop + drupal
      •   http://imagexmedia.com/blog
    • Designing for Drupal: Photoshop Best Practices
  • 14. The theming bit
  • 15. Intro
      • Who’s a developer/themer?
      • What is a Drupal theme?
      • Theming isn’t rocket science Relies on strong CSS/HTML skills rather than PHP
      • Theming is powerful & flexible - Module theme overriding (functions & templates) - No need to alter module code
      • Every developer has a different approach - Find methods that work for you
  • 16. Planning the theme
      • Shouldn’t be any major surprises in the design by this stage
      • Developers with a tight budget hate surprises
      • Highlights need for design & development overlap
      • Designers & Developers can & should get along
  • 17. Review the design
      • Ideally you review the final design before it’s sent to the client for review
      • Layout sizing & structure
      • Review potential block regions needed  
      • Look for possible frontpage variations  
      • Any possible module overrides ie. search form, login block, node type styles
  • 18. Getting Started
      • SVN set up
      • SVN benefits? (rollbacks, easy deployment)
      • Drupal & Localhost set up to begin with (quicker)(Acquia or Aegir)
      • Create the basic theme structure - Copy a theme from Drupal.org - Make you own template/skeleton theme - Start out with a CSS/HTML layout if needs be
  • 19. Building out
      • Start with the basic common structure ie. Header, content, columns and footer
      • Then build out any frontpage variations - drupal_is_front_page function (page.tpl.php) - custom body_class function (PHP & CSS) - Only use 1 page.tpl.php file for easier upgrading
      • Next focus on key features & details to theme out ie. Menu style, block styles, search block styling
      • Consider the theming of individual node types & Views lists
  • 20. Principles to consider
      • Refer back to your brief & mocks to make sure you don’t miss anything, remember we hate surprises.
      • Avoid hard coding anything into your theme ie. Menus should the menu system, column content should be in blocks or modules if complex
      • Try not to fill your template.php file with custom code, use a module instead or include files
      • Use as fewer .tpl files as possible & keep them free of big chunks of code (use functions).
      • Browser check your work on a regular basic Mac & PC, IE6-8, Firefox, Safari
      • Make your theme flexible, look ahead but not too far ahead,
  • 21. Finalizing
      • Review the mock ups again, yes again. Attention to detail is important
      • Browser check again
      • Check all theme functionality like menu drop downs & any Javascript is working, check the error log and Firefox console
      • Get QA (Quality Assurance) done by someone else
      • Send to client for review :)
  • 22. This is the end We were: Alex J Ventpap (The Designer) http://all-x.ca Tom James (The other one) http://tomswebstuff.com http://drupalsn.com We are both proud to be part of ImageX Media http://imagexmedia.com