Drupal Camp Victoria
-
Upload
image-x-media -
Category
Technology
-
view
1.633 -
download
1
description
Transcript of Drupal Camp Victoria
![Page 1: Drupal Camp Victoria](https://reader033.fdocuments.in/reader033/viewer/2022061217/54b4b50a4a7959a87c8b456b/html5/thumbnails/1.jpg)
Drupal theming from design to development
Alex J. Ventpap & Tom James
![Page 2: Drupal Camp Victoria](https://reader033.fdocuments.in/reader033/viewer/2022061217/54b4b50a4a7959a87c8b456b/html5/thumbnails/2.jpg)
Starting on Photoshop
o The scary white canvas on photoshop, get logic. Collect data first o Set the size of the website, guidelines are importanto Backgrounds, keep in mind developers work
![Page 3: Drupal Camp Victoria](https://reader033.fdocuments.in/reader033/viewer/2022061217/54b4b50a4a7959a87c8b456b/html5/thumbnails/3.jpg)
Gathering information - Wireframe is the boss
Petro Value project
![Page 4: Drupal Camp Victoria](https://reader033.fdocuments.in/reader033/viewer/2022061217/54b4b50a4a7959a87c8b456b/html5/thumbnails/4.jpg)
Background & Guidelines
Petro Value project
![Page 5: Drupal Camp Victoria](https://reader033.fdocuments.in/reader033/viewer/2022061217/54b4b50a4a7959a87c8b456b/html5/thumbnails/5.jpg)
Following the wireframe
Petro Value project
![Page 6: Drupal Camp Victoria](https://reader033.fdocuments.in/reader033/viewer/2022061217/54b4b50a4a7959a87c8b456b/html5/thumbnails/6.jpg)
Layout and structure
Petro Value project
![Page 7: Drupal Camp Victoria](https://reader033.fdocuments.in/reader033/viewer/2022061217/54b4b50a4a7959a87c8b456b/html5/thumbnails/7.jpg)
Vector elements in photoshop - stretching ability
Petro Value project
![Page 8: Drupal Camp Victoria](https://reader033.fdocuments.in/reader033/viewer/2022061217/54b4b50a4a7959a87c8b456b/html5/thumbnails/8.jpg)
Fonts - websafe
o http://www.typetester.org
![Page 9: Drupal Camp Victoria](https://reader033.fdocuments.in/reader033/viewer/2022061217/54b4b50a4a7959a87c8b456b/html5/thumbnails/9.jpg)
Colors - Adobe kuler
o http://kuler.adobe.com/#links
![Page 10: Drupal Camp Victoria](https://reader033.fdocuments.in/reader033/viewer/2022061217/54b4b50a4a7959a87c8b456b/html5/thumbnails/10.jpg)
Fills, layer styles & keyboard shortcuts
Layer Styles - Gradient Overlay + Stroke
![Page 11: Drupal Camp Victoria](https://reader033.fdocuments.in/reader033/viewer/2022061217/54b4b50a4a7959a87c8b456b/html5/thumbnails/11.jpg)
Keyboard shortcuts
MAIN MENU > Edit > Keyboard Shortcuts
![Page 12: Drupal Camp Victoria](https://reader033.fdocuments.in/reader033/viewer/2022061217/54b4b50a4a7959a87c8b456b/html5/thumbnails/12.jpg)
Finishing/revisions - Color changes/end of design stage
Petro Value Project
![Page 13: Drupal Camp Victoria](https://reader033.fdocuments.in/reader033/viewer/2022061217/54b4b50a4a7959a87c8b456b/html5/thumbnails/13.jpg)
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
![Page 14: Drupal Camp Victoria](https://reader033.fdocuments.in/reader033/viewer/2022061217/54b4b50a4a7959a87c8b456b/html5/thumbnails/14.jpg)
The theming bit
![Page 15: Drupal Camp Victoria](https://reader033.fdocuments.in/reader033/viewer/2022061217/54b4b50a4a7959a87c8b456b/html5/thumbnails/15.jpg)
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
![Page 16: Drupal Camp Victoria](https://reader033.fdocuments.in/reader033/viewer/2022061217/54b4b50a4a7959a87c8b456b/html5/thumbnails/16.jpg)
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
![Page 17: Drupal Camp Victoria](https://reader033.fdocuments.in/reader033/viewer/2022061217/54b4b50a4a7959a87c8b456b/html5/thumbnails/17.jpg)
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
![Page 18: Drupal Camp Victoria](https://reader033.fdocuments.in/reader033/viewer/2022061217/54b4b50a4a7959a87c8b456b/html5/thumbnails/18.jpg)
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
![Page 19: Drupal Camp Victoria](https://reader033.fdocuments.in/reader033/viewer/2022061217/54b4b50a4a7959a87c8b456b/html5/thumbnails/19.jpg)
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
![Page 20: Drupal Camp Victoria](https://reader033.fdocuments.in/reader033/viewer/2022061217/54b4b50a4a7959a87c8b456b/html5/thumbnails/20.jpg)
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,
![Page 21: Drupal Camp Victoria](https://reader033.fdocuments.in/reader033/viewer/2022061217/54b4b50a4a7959a87c8b456b/html5/thumbnails/21.jpg)
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 :)
![Page 22: Drupal Camp Victoria](https://reader033.fdocuments.in/reader033/viewer/2022061217/54b4b50a4a7959a87c8b456b/html5/thumbnails/22.jpg)
This is the endWe 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