drupalcamp atlanta 2010 design-to-theme
TRANSCRIPT
![Page 1: Drupalcamp Atlanta 2010 Design-to-Theme](https://reader036.vdocuments.mx/reader036/viewer/2022062820/58a7e7bd1a28abd7248b55b7/html5/thumbnails/1.jpg)
Design To Theme:A Beginners Guide
By Danté R. TaylorMediacurrent Senior Drupal Designer
Drupal Camp AtlantaOctober 2, 2010
![Page 2: Drupalcamp Atlanta 2010 Design-to-Theme](https://reader036.vdocuments.mx/reader036/viewer/2022062820/58a7e7bd1a28abd7248b55b7/html5/thumbnails/2.jpg)
About Me• Bachelor of Fine Arts (BFA) from Savannah College of
Art and Design• Worked as a Designer for the past 10 years• Have worked with Drupal since version 4.7 release• Biggest project in Drupal is savannahnow.com• Favorite project in Drupal is ymib.com
![Page 3: Drupalcamp Atlanta 2010 Design-to-Theme](https://reader036.vdocuments.mx/reader036/viewer/2022062820/58a7e7bd1a28abd7248b55b7/html5/thumbnails/3.jpg)
Who this presentation is for
`• If you are new to Drupal and need a basic idea
of where to begin• If you want to understand the process of turning
a design into a Drupal theme • If you want to make improvements to an existing
theme or design
![Page 4: Drupalcamp Atlanta 2010 Design-to-Theme](https://reader036.vdocuments.mx/reader036/viewer/2022062820/58a7e7bd1a28abd7248b55b7/html5/thumbnails/4.jpg)
What we will cover
• Common tools to use to turn your design files into a Drupal theme
• How to look at a design the Drupal way• Common theme techniques and practices
![Page 5: Drupalcamp Atlanta 2010 Design-to-Theme](https://reader036.vdocuments.mx/reader036/viewer/2022062820/58a7e7bd1a28abd7248b55b7/html5/thumbnails/5.jpg)
Presentation Format
• Topic 1: Use The Right Tools• Topic 2: Design-to-Theme Concepts• Topic 3: Common Theme Techniques
![Page 6: Drupalcamp Atlanta 2010 Design-to-Theme](https://reader036.vdocuments.mx/reader036/viewer/2022062820/58a7e7bd1a28abd7248b55b7/html5/thumbnails/6.jpg)
Topic 1:
`Use The Right Tools
![Page 7: Drupalcamp Atlanta 2010 Design-to-Theme](https://reader036.vdocuments.mx/reader036/viewer/2022062820/58a7e7bd1a28abd7248b55b7/html5/thumbnails/7.jpg)
The right tools
` Photoshop Illustrator Fireworks Gimp Firefox Chrome Safari Internet Explorer MAMP
Staging Site Colorzilla (Firefox Plug-in)
DigitalColor Meter FireBug (Firefox Plug-in)
Web Developer (Firefox Plug-in)
Text Editor (Dreamweaver, BBEdit, gEdit, notepad, etc)
Theme Developer Module
![Page 8: Drupalcamp Atlanta 2010 Design-to-Theme](https://reader036.vdocuments.mx/reader036/viewer/2022062820/58a7e7bd1a28abd7248b55b7/html5/thumbnails/8.jpg)
Photoshop• Advanced Image/photo manipulation tool• Can be used for web design layout• Used to create bitmap and vector artwork• Basic image slicing functionality • Most designers will deliver finial creative
files in a Photoshop format• Industry standard software
![Page 9: Drupalcamp Atlanta 2010 Design-to-Theme](https://reader036.vdocuments.mx/reader036/viewer/2022062820/58a7e7bd1a28abd7248b55b7/html5/thumbnails/9.jpg)
Fireworks• Advanced Image/photo manipulation tool for
web design• Built-in features for web design professionals• Advanced image slicing functionality • Firework is not as commonly used tool for non-
web designers & publishers• Industry standard software for web designers• Fireworks works well with Photoshop
![Page 10: Drupalcamp Atlanta 2010 Design-to-Theme](https://reader036.vdocuments.mx/reader036/viewer/2022062820/58a7e7bd1a28abd7248b55b7/html5/thumbnails/10.jpg)
The GIMP• Its Open Source and powerful!• Advanced Image/photo manipulation tool• Basic image slicing functionality • Most designers will not deliver final
creative files in a GIMP format• Not an industry standard software• Some Photoshop transparencies and
filters will cause issues when working between tools
• Major differences in UI compared to Photoshop and Fireworks
![Page 11: Drupalcamp Atlanta 2010 Design-to-Theme](https://reader036.vdocuments.mx/reader036/viewer/2022062820/58a7e7bd1a28abd7248b55b7/html5/thumbnails/11.jpg)
Illustrator• Used primary to create vector based
artwork • Basic image slicing features• Good for logo and line artwork• Use this tool for typography work• Most designers will not deliver final
artwork in an illustrator format. • This tool is ideally used for custom icon
work and site background artwork
![Page 12: Drupalcamp Atlanta 2010 Design-to-Theme](https://reader036.vdocuments.mx/reader036/viewer/2022062820/58a7e7bd1a28abd7248b55b7/html5/thumbnails/12.jpg)
Firebug• Powerful tool and a must have for
anyone building web sites• Inspect HTML structure• Dynamically alter site CSS & HTML
inside web browser • Debug Javascript code• Easy determine layout (padding,
margin, border and positioning)• Determine DOM hierarchy
![Page 13: Drupalcamp Atlanta 2010 Design-to-Theme](https://reader036.vdocuments.mx/reader036/viewer/2022062820/58a7e7bd1a28abd7248b55b7/html5/thumbnails/13.jpg)
![Page 14: Drupalcamp Atlanta 2010 Design-to-Theme](https://reader036.vdocuments.mx/reader036/viewer/2022062820/58a7e7bd1a28abd7248b55b7/html5/thumbnails/14.jpg)
Web Developer• This is a Firefox plug-in that is
a very powerful way to debug your themes
• This tool has validation tool that will warn you when your code does not validate
• Can set tool to resize browser based on common browser resolutions
![Page 15: Drupalcamp Atlanta 2010 Design-to-Theme](https://reader036.vdocuments.mx/reader036/viewer/2022062820/58a7e7bd1a28abd7248b55b7/html5/thumbnails/15.jpg)
Popular Browsers• Firefox, Safari, Internet Explorer, and
Chrome are the top four major browser operating on the Internet
• Learn the quarks and bugs associated with all major browsers
• All four browsers have some from of web development toolkit packaged with browser
• Know your audience and their common browser of choice
![Page 16: Drupalcamp Atlanta 2010 Design-to-Theme](https://reader036.vdocuments.mx/reader036/viewer/2022062820/58a7e7bd1a28abd7248b55b7/html5/thumbnails/16.jpg)
Color Pickers
`• ColorZilla is a Firefox plug-in that will allow you to
pick colors right from a website• DigitalColor Meter will allow you to pick colors from
anywhere on your OS (This is a Mac app)• These tools come in handy when you need to
quickly grab colors from a web site design and don’t have time to open Photoshop or search through a style sheet
![Page 17: Drupalcamp Atlanta 2010 Design-to-Theme](https://reader036.vdocuments.mx/reader036/viewer/2022062820/58a7e7bd1a28abd7248b55b7/html5/thumbnails/17.jpg)
Theme Developer Module• This is contributed module that is
used with Drupal to help developers and themers identify Drupal core code variables, functions, and templates
• This is a great tool that will help you save time
![Page 18: Drupalcamp Atlanta 2010 Design-to-Theme](https://reader036.vdocuments.mx/reader036/viewer/2022062820/58a7e7bd1a28abd7248b55b7/html5/thumbnails/18.jpg)
The Staging Site (MAMP)• This tool will allow you to work locally on
your machine and is set up just like a common web server
• Use this tool to set up local Drupal sites to test module functionality
• Use WAMP if you are on a PC
![Page 19: Drupalcamp Atlanta 2010 Design-to-Theme](https://reader036.vdocuments.mx/reader036/viewer/2022062820/58a7e7bd1a28abd7248b55b7/html5/thumbnails/19.jpg)
Topic 2:
`Design-to-Theme Concepts
![Page 20: Drupalcamp Atlanta 2010 Design-to-Theme](https://reader036.vdocuments.mx/reader036/viewer/2022062820/58a7e7bd1a28abd7248b55b7/html5/thumbnails/20.jpg)
Drupal Theme Terms
• Hooks• Preprocess Functions• Theme Functions• Template Files• Regions• Nodes• Blocks
`• Content Types• Taxonomy• Settings.php• Template.php• Views• CCK • Menu System
![Page 21: Drupalcamp Atlanta 2010 Design-to-Theme](https://reader036.vdocuments.mx/reader036/viewer/2022062820/58a7e7bd1a28abd7248b55b7/html5/thumbnails/21.jpg)
Drupal Theme Anatomy 101
`
![Page 22: Drupalcamp Atlanta 2010 Design-to-Theme](https://reader036.vdocuments.mx/reader036/viewer/2022062820/58a7e7bd1a28abd7248b55b7/html5/thumbnails/22.jpg)
Garland Theme
`
![Page 23: Drupalcamp Atlanta 2010 Design-to-Theme](https://reader036.vdocuments.mx/reader036/viewer/2022062820/58a7e7bd1a28abd7248b55b7/html5/thumbnails/23.jpg)
Drupal Theme: AutoTrader
`
![Page 24: Drupalcamp Atlanta 2010 Design-to-Theme](https://reader036.vdocuments.mx/reader036/viewer/2022062820/58a7e7bd1a28abd7248b55b7/html5/thumbnails/24.jpg)
Drupal Theme: University of Georgia:
`
![Page 25: Drupalcamp Atlanta 2010 Design-to-Theme](https://reader036.vdocuments.mx/reader036/viewer/2022062820/58a7e7bd1a28abd7248b55b7/html5/thumbnails/25.jpg)
Drupal Theme: AdGiants
![Page 26: Drupalcamp Atlanta 2010 Design-to-Theme](https://reader036.vdocuments.mx/reader036/viewer/2022062820/58a7e7bd1a28abd7248b55b7/html5/thumbnails/26.jpg)
How to Design For Drupal?• Install Drupal to experiment and learn how modules UI
functions work together, before you begin your design project.
• Use built-in features of Drupal and modules to achieve Design objectives. (Try not to reinvent)
• Think in terms of how your Design elements can be reused or repeated throughout Web site.
• Work closely with specialist in Drupal Design or Development to save on time and budget as you plan your Drupal project.
`
![Page 27: Drupalcamp Atlanta 2010 Design-to-Theme](https://reader036.vdocuments.mx/reader036/viewer/2022062820/58a7e7bd1a28abd7248b55b7/html5/thumbnails/27.jpg)
Main considerations in a Drupal design?
`• What HTML/CSS does Drupal produce by natively• Consider the code that contributed modules will produce
and how that code will interface with your design goals• Look for repeating elements in your design that can be
reused in your CSS file.
![Page 28: Drupalcamp Atlanta 2010 Design-to-Theme](https://reader036.vdocuments.mx/reader036/viewer/2022062820/58a7e7bd1a28abd7248b55b7/html5/thumbnails/28.jpg)
See it the Drupal way• Break the design up into pieces• Where are elements repeating• What Drupal modules will
produce the ideal results with theme work applied
• What will have to be custom built on this page
• How heavy is this page in terms of imagery and how can I optimize it
![Page 29: Drupalcamp Atlanta 2010 Design-to-Theme](https://reader036.vdocuments.mx/reader036/viewer/2022062820/58a7e7bd1a28abd7248b55b7/html5/thumbnails/29.jpg)
Create a Drupal Theme the easy way
1. Create Theme Name directory (mytheme) inside “/sites/all/themes/” (create new directories if they do not exists)
2. Copy Garland theme from “/themes” and move it to “/sites/all/themes/”, then rename it to mytheme directory.
3. Change the garland.info file to mytheme.info. Open new mytheme.info file and change all names with garland to mytheme.
4. Change the screenshot.png file to match your new theme.
5. Clear system cache. (/admin/settings/performance)
6. Go to Themes list page and select mytheme, to start using or editing your new theme. (/admin/build/themes)
`
![Page 30: Drupalcamp Atlanta 2010 Design-to-Theme](https://reader036.vdocuments.mx/reader036/viewer/2022062820/58a7e7bd1a28abd7248b55b7/html5/thumbnails/30.jpg)
Image Preparationtype-location-element-(state).file-type
• Type: Describe how the image is being used in HTML or CSS. Examples: bg (background image), icon, button, inline, etc
• Location: Communicates where image is located within HTMLExamples: header, body, content, sidebar, footer, etc
• Element: Describe what the image object is in the HTMLExamples: gradient, shadow, search, book, etc
• State: (Optional) Describe the condition the image object is being used as in the HTMLExamples: rest, active, focus, etc
![Page 31: Drupalcamp Atlanta 2010 Design-to-Theme](https://reader036.vdocuments.mx/reader036/viewer/2022062820/58a7e7bd1a28abd7248b55b7/html5/thumbnails/31.jpg)
Good Image Name
bg-header-trim-active.png
![Page 32: Drupalcamp Atlanta 2010 Design-to-Theme](https://reader036.vdocuments.mx/reader036/viewer/2022062820/58a7e7bd1a28abd7248b55b7/html5/thumbnails/32.jpg)
Bad Image Name
header_trim.png
![Page 33: Drupalcamp Atlanta 2010 Design-to-Theme](https://reader036.vdocuments.mx/reader036/viewer/2022062820/58a7e7bd1a28abd7248b55b7/html5/thumbnails/33.jpg)
Ugly Image Name
headerTrim_01.png
![Page 34: Drupalcamp Atlanta 2010 Design-to-Theme](https://reader036.vdocuments.mx/reader036/viewer/2022062820/58a7e7bd1a28abd7248b55b7/html5/thumbnails/34.jpg)
Theme Considerations• Comment where HTML code starts and ends• Use a prefix for class and id selectors to reduce possible namespace conflicts• Structure HTML so that elements can be reused (naming conventions)• Think about what could go wrong and what the next person may need to add later
to support the project• Use correct Doctype• Wrap conditional statements around all HTML not just variables, especially for
regions and blocks. • Use CSS to manage alternate page layouts when possible• Use transparent (gif/png) for inline images and position images with CSS• Only use inline CSS with dynamic scripts (jQuery, Javascript, LightBox, etc)
![Page 35: Drupalcamp Atlanta 2010 Design-to-Theme](https://reader036.vdocuments.mx/reader036/viewer/2022062820/58a7e7bd1a28abd7248b55b7/html5/thumbnails/35.jpg)
CSS Considerations• CSS should be indented like any other programming language• Your file should be organized in same workflow of the page that it
corresponds to. • Each group of declaration blocks should have a brief comment or
description to described the section/page it belongs to• Files should be named with project prefix • Use “em” over “px” and “pt” for fonts and spacing• Set fonts, link colors and shared elements once at top of CSS document• Always use shorthand and alphabetize CSS attributes
![Page 36: Drupalcamp Atlanta 2010 Design-to-Theme](https://reader036.vdocuments.mx/reader036/viewer/2022062820/58a7e7bd1a28abd7248b55b7/html5/thumbnails/36.jpg)
CSS Considerationsprefix-(location)-element-(state) {
– Rarely place on one line– Always use shorthand– Always indent code– Place in alphabetical order
}
![Page 37: Drupalcamp Atlanta 2010 Design-to-Theme](https://reader036.vdocuments.mx/reader036/viewer/2022062820/58a7e7bd1a28abd7248b55b7/html5/thumbnails/37.jpg)
Good CSS
![Page 38: Drupalcamp Atlanta 2010 Design-to-Theme](https://reader036.vdocuments.mx/reader036/viewer/2022062820/58a7e7bd1a28abd7248b55b7/html5/thumbnails/38.jpg)
Bad CSS
![Page 39: Drupalcamp Atlanta 2010 Design-to-Theme](https://reader036.vdocuments.mx/reader036/viewer/2022062820/58a7e7bd1a28abd7248b55b7/html5/thumbnails/39.jpg)
Ugly CSS
![Page 40: Drupalcamp Atlanta 2010 Design-to-Theme](https://reader036.vdocuments.mx/reader036/viewer/2022062820/58a7e7bd1a28abd7248b55b7/html5/thumbnails/40.jpg)
Topic 3:
Common Theme Techniques
![Page 41: Drupalcamp Atlanta 2010 Design-to-Theme](https://reader036.vdocuments.mx/reader036/viewer/2022062820/58a7e7bd1a28abd7248b55b7/html5/thumbnails/41.jpg)
CSS Reset• This set all containers and html
attributes to basic standard• This helps standardize you html/css
across all browsers• Takeout the vertical-align: baseline
(cause some issues with type)
Reference: http://meyerweb.com/eric/tools/css/reset
![Page 42: Drupalcamp Atlanta 2010 Design-to-Theme](https://reader036.vdocuments.mx/reader036/viewer/2022062820/58a7e7bd1a28abd7248b55b7/html5/thumbnails/42.jpg)
Sliding Door Method
Reference: http://www.alistapart.com/articles/slidingdoors
• Drupal produces rectangular tabs by default
• To add rounded corners use the <li> and <a> tags to apply left and right rounded background images to each respectively. Make the left background image much longer than you make the right cap piece
• Use CSS to position them in place with padding and line height
• This technique can be used for block headers and form button graphics as well
![Page 43: Drupalcamp Atlanta 2010 Design-to-Theme](https://reader036.vdocuments.mx/reader036/viewer/2022062820/58a7e7bd1a28abd7248b55b7/html5/thumbnails/43.jpg)
Load Menu Last• SEO is a very important consideration
in any site development• Robots crawl your site from top to
bottom and by placing the primary navigation code at bottom you can insure that the meta rich content gets crawled first before the repetitive menu content
• Place menu html in the code near footer but absolutely position it at the top of the page using CSS
• Support.com is a good example. Take a look at the source code. The menu is at bottom but appears to viewer at top
![Page 44: Drupalcamp Atlanta 2010 Design-to-Theme](https://reader036.vdocuments.mx/reader036/viewer/2022062820/58a7e7bd1a28abd7248b55b7/html5/thumbnails/44.jpg)
Where to Find Help?• Mediacurrent.com/blogs• Drupal.org• Api.drupal.org• Drupal.org/project/Themes• AListApart.com• Lynda.com • Drupal.org/node/39451• Drupal.org/books
`
![Page 45: Drupalcamp Atlanta 2010 Design-to-Theme](https://reader036.vdocuments.mx/reader036/viewer/2022062820/58a7e7bd1a28abd7248b55b7/html5/thumbnails/45.jpg)
Thank you!