Drupal Camp Victoria

Drupal theming from design to development Alex J. Ventpap & Tom James

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

Gathering information - Wireframe is the boss Petro Value project

Background & Guidelines Petro Value project

Following the wireframe Petro Value project

Layout and structure Petro Value project

Vector elements in photoshop - stretching ability Petro Value project

Fonts - websafe
http://www.typetester.org

Colors - Adobe kuler
http://kuler.adobe.com/#links

Fills, layer styles & keyboard shortcuts Layer Styles - Gradient Overlay + Stroke

Keyboard shortcuts MAIN MENU > Edit > Keyboard Shortcuts

Finishing/revisions - Color changes/end of design stage Petro Value Project

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

The theming bit

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

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

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

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

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

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,

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 :)

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

Drupal Camp Victoria

by Image X Media on Sep 16, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 1

Statistics

Drupal Camp Victoria — Presentation Transcript