Your SlideShare is downloading. ×
Drupal Camp Victoria
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Drupal Camp Victoria


Published on

A presentation about drupal theming. From design to development stage

A presentation about drupal theming. From design to development stage

Published in: Technology, Sports

  • 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
  • 9. Colors - Adobe kuler
  • 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
    • More about photoshop + drupal
    • 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 - 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) Tom James (The other one) We are both proud to be part of ImageX Media