design to theme @ cmsexpo
DESCRIPTION
TRANSCRIPT
![Page 2: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/2.jpg)
Agenda
● A short, analogy-filled, treatise on designing for Drupal.
● <your questions />● Anatomy of a Theme● <your questions />● Base <your questions /> Themes● Making Themes● <your questions><my answers /></your
questions>
![Page 3: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/3.jpg)
Pre-requisites to Theming Drupal
● Get the handout.● Understand that you will make mistakes and
that it’s ok to make mistakes.● Have a toolkit.
![Page 4: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/4.jpg)
Overview ofDrupal’s Theming System
![Page 5: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/5.jpg)
Theming WordPressA “pull” system
http://www.f l ickr .com/photos/13879801@N00/96609354/
![Page 6: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/6.jpg)
Theming DrupalA prep and “push” system
Source : http://www.f l ickr .com/photos/sebbisuperstar/2470560831
![Page 7: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/7.jpg)
Flow of Themed Content
![Page 8: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/8.jpg)
![Page 9: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/9.jpg)
ANSIs: Areas of Natural and Scientific Interest
Source : http://www.bsc-eoc .org/organizat ion/giswork.html
High priority
Low priority
![Page 10: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/10.jpg)
Tree Spotting
![Page 11: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/11.jpg)
Rendered PageLogo
Primary Links
Search Block
View (block)
Login block
Navigation menu
![Page 12: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/12.jpg)
Rendered Page
Region
Node
Node
Node
Primary Links
Logo: Site information
Pager
Menu or Secondary Links
Menu
Footer: Site information
Block
Block
● page.tpl.php● $primary_links● $secondary_links● $logo● $footer_message
● node.tpl.php● block.tpl.php
![Page 13: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/13.jpg)
Which means...
● Drupal uses Theme Engines to style available content independently of the module layer.
● The most commonly used engine is PHPtemplate which is a “prepare and push” system, this differs from WordPress’s “pull” system.
● Complete Web pages of rendered HTML are compiled from different sources in the theme.
● Design for individual Drupal page elements, not the whole page.
![Page 14: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/14.jpg)
Creating Your First Theme
![Page 15: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/15.jpg)
My Steps for Creating a Theme
0.Wireframes with Balsamiq + specs.
1.Colour palate + grid + imagination + GiMP.
2.Base theme, text files, version control.
3.Rebuild the PSD in Drupal(or slice + convert).
4.Launch MVT.
5.Theme by UX, not by module or tpl.php.
![Page 16: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/16.jpg)
Step 0: Wireframes + Specs
![Page 17: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/17.jpg)
![Page 18: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/18.jpg)
Creating Front Page Shapes
![Page 19: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/19.jpg)
Creating Content Page Shapes
![Page 20: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/20.jpg)
Drupal Components for BalsamiqCreated by Top Notch Themes
Available from:http://mockupstogo.net/drupal-cms-components
![Page 21: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/21.jpg)
Step 1: Grid + colour palate + imagination + GiMP.
![Page 22: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/22.jpg)
Establish the Framework
1.Grid layout: 960.gs templates
2.Colour palate: colourlovers.com, colorschemedesigner.com
3.Page elements: see wireframes and site specs
![Page 23: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/23.jpg)
![Page 24: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/24.jpg)
![Page 25: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/25.jpg)
![Page 26: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/26.jpg)
Creating a Basic Design
1.Background: texture, image, colour
2.Place page elements: see wireframes and specs
3.Decorate: texture, flourishes, illustration, photography
4.Typography and font selection
5.Edges and borders: page, block
6.Lists: indents, margins, padding
7.Actions: default, hover, active, .active
![Page 27: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/27.jpg)
Decorating and Designing
If that last slide offended you go watch
http://sf2010.drupal.org/conference/sessions/stop-decorating-and-start-designing
while I carry on with my decorator lesson for those of us who don’t poop designs for breakfast.
![Page 28: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/28.jpg)
Background with Texture
![Page 29: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/29.jpg)
Grid and Blocks
![Page 30: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/30.jpg)
Page Elements
![Page 31: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/31.jpg)
Change Palate
![Page 32: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/32.jpg)
Change Palate (again)
![Page 33: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/33.jpg)
http://www.scribb leoneverything .com/prints/type-o-f i le/-preorder-so-you-need-a-typeface-poster/prod_260.html
![Page 34: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/34.jpg)
Fill in the Blanks
![Page 35: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/35.jpg)
Regions+
Variables
AcquiaSlate
http://fusiondrupalthemes.com/theme/acquia-slate
![Page 36: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/36.jpg)
Optimize your Design Files
● Theme by element: node, teaser, blocks, breadcrumbs, pager, site name, shopping cart.
● Sort layers into element-related folders.● Use Web fonts in your design.● Use the 960.gs grid templates.● Create colour palates.● Use a style guide.
![Page 37: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/37.jpg)
Step 2: Base theme, text files, version control.
![Page 38: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/38.jpg)
Base Themes
● A base theme is a collection of defaults that you can adjust in your own theme. It is not meant to be used as-is. It is meant to be a foundation of adjustable assumptions.
● Elements to inspect: SEO, accessibility, additional functions, documentation, CSS grid framework.
![Page 39: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/39.jpg)
(Some of) My Fave Base Themes
● Lazy: 960.gs● Super lazy: Fusion● Ultra powerful: Zen
![Page 40: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/40.jpg)
How to use a Base theme
● Download the base theme and read its documentation.
● Create a new theme which references your chosen base theme in the .info file.
● Choose which properties need to be adjusted with custom tpl.php files and other stuff we won’t get to today.
![Page 41: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/41.jpg)
Create Your Theme
1.Make a new folder (start with letters).
2.Add to it a text file named foldername.info
3.Copy the sample settings from the handout into your .info file.
![Page 42: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/42.jpg)
Your Theme’s .info filename = My First Themedescription = Featuring multiple ponyfriendly regions.core = 6.xengine = phptemplatebase theme = ninesixty
; Add ponyfriendly regions, CSS and Javascript filesregions[shetland] = Left sidebar, column 1stylesheets[all][] = my_theme_styles.cssscripts[] = myscript.js
![Page 43: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/43.jpg)
Step 3: Rebuild the PSD in Drupal (or slice + convert).
![Page 44: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/44.jpg)
<html goes here>
Copy the page.tpl.php from your base theme and/or use:http://api.drupal.org/api/drupal/modules--system--page.tpl.php/6/source
Repeat for page-front.tpl.php
![Page 45: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/45.jpg)
It s too hard.’Show me how!
Pink sherbert photography http ://www.f l ickr .com/photos/pinksherbet/3372060864/
![Page 46: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/46.jpg)
Step 4: Launch Your MVT
![Page 47: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/47.jpg)
Uploading your Theme
● Base theme: /sites/all/themes
● Your theme: /sites/domainname.com/themes
● Enabling the theme: ?q=/admin/build/themes
● When in doubt: clear Drupal’s cache
![Page 48: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/48.jpg)
Step 5: Theme the Rest by UX
![Page 49: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/49.jpg)
Themer Module
![Page 50: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/50.jpg)
$node object
$node>nid$node>body$node>content['body'][#value]
![Page 51: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/51.jpg)
node.tpl.php (theme: fusion)<?php// $Id: node.tpl.php,v 1.1.2.2 2009/11/11 05:26:25 sociotech Exp $?>
<div id="node<?php print $node>nid; ?>" class="node <?php print $node_classes; ?>"> <div class="inner"> <?php print $picture ?> <?php if ($page == 0): ?> <h2 class="title"><a href="<?php print $node_url ?>" title="<?php print $title ?>"><?php print $title ?></a></h2> <?php endif; ?> <?php if ($submitted): ?> <div class="meta"> <span class="submitted"><?php print $submitted ?></span> </div> <?php endif; ?> <?php if ($node_top && !$teaser): ?> <div id="nodetop" class="nodetop row nested"> <div id="nodetopinner" class="nodetopinner inner"> <?php print $node_top; ?> </div><! /nodetopinner > </div><! /nodetop > <?php endif; ?>
<div class="content clearfix"> <?php print $content ?> </div> <?php if ($terms): ?> <div class="terms"> <?php print $terms; ?> </div> <?php endif;?> <?php if ($links): ?> <div class="links"> <?php print $links; ?> </div> <?php endif; ?> </div><! /inner >
<?php if ($node_bottom && !$teaser): ?> <div id="nodebottom" class="nodebottom row nested"> <div id="nodebottominner" class="nodebottominner inner"> <?php print $node_bottom; ?> </div><! /nodebottominner > </div><! /nodebottom > <?php endif; ?></div><! /node<?php print $node>nid; ?> >
![Page 52: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/52.jpg)
tpl.php files to override styles
● Individual template files make up a whole page (see the handout).
● tpl.php files include: page.tpl.php, node.tpl.php, node-contenttype.tpl.php, comment.tpl.php
● Look at the source of a tpl.php file to find variables that can be moved and altered.
● Use the Devel + Themer Modules● Alter variable contents with
http://drupal.org/node/223430● See also: api.drupal.org
![Page 53: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/53.jpg)
You’re a Themer!
http://www.f l ickr .com/photos/14150482@N02/2526889807/
![Page 54: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/54.jpg)
My 5 Steps for Creating a Theme
0.Wireframes the specs.
1.Colour palate + grid + imagination + GiMP.
2.Base theme, text files, version control.
3.Rebuild the PSD in Drupal(or slice + convert).
4.Launch MVT.
5.Theme by UX, not by module or tpl.php.
![Page 55: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/55.jpg)
Sharing Your Designs
● Licensing: GPL the “codey bits.”● Creating a project on drupal.org (and also
http://themegarden.org/drupal6/)● Selling your themes
(www.topnotchthemes.com)
![Page 56: Design to Theme @ CMSExpo](https://reader034.vdocument.in/reader034/viewer/2022051613/54c82a074a795974298b458d/html5/thumbnails/56.jpg)
And that was...Basically How You Theme Drupal
Emma Jane Hogbin@emmajanedotnet
Remind me I have one Balsamiq license to give away.Also: online classes start next week.