Theming Drupal: Introduction Drupal is a sophisticated content management system. Creating themes for Drupal may seem hard initially, but as you learn how things fit together, theming can be quick and (relatively) painless. This handout is relevant to both sessions: Basic Design for Drupal and Advanced Design for Drupal.
Top Ten Mistakes People Make When Theming Drupal 1. Assuming that Drupal can (or cannot) look a certain way. 2. Designing Web pages instead of focusing on Drupal's building blocks. 3. Theming by module instead of by user experience. 4. Starting every design fresh and assuming no component will ever be re-used. 5. Ignoring SEO optimizations that can be made at the theme layer. 6. Not using a base theme and or a CSS grid framework. 7. Altering all HTML output to clean it up for the sake of being different and overriding every single CSS class and ID Drupal provides and then ignoring classes provided by Drupal (such status messages, active sections, front page, and logged in users). 8. Not uploading themes to the appropriate sub-directory of the Drupal sites folder. 9. Ignoring the Administrative area in developing a theme and not installing an admin theme. 10. Not using version control.
Themers' Toolkit •
Modules referenced in this talk: views, cck, devel, themer, imagefield, imagecache, panels, fusion, skinr. URL: www.drupal.org/project/modulename
•
Admin themes (Admin Menu Module, Admin Module, RootCandy Theme)
•
Firebug www.getfirebug.com
•
Zotero (save whole web pages to create a design library) www.zotero.com
•
CSS Grid Framework (960.gs, Blueprint, etc)
•
Browser testing (www.browsershots.org, www.browsercam.com)
•
Version control (Bazaar, Git, CVS)
Emma Jane Hogbin
Design to Theme
www.designtotheme.com
Theming Drupal at CMS Expo
2 of 6
Theming in Five Easy Steps 1. Analyze your design to find page elements and their related Drupal tpl.php files. 2. Set up the base theme: Choose a base theme. Create info file. Implement version control. 3. Create page.tpl.php and design according to the design framework/PSD file. 4. Launch the Minimum Viable Theme: Upload theme folder to the /sites/all/themes directory. Enable the theme, use personal themes if relevant www.designtotheme.com/tutorials/personal-themes-drupal.
5. Theme what's left by user experience, not by module or tpl.php.
Drupal Page Elements
Emma Jane Hogbin
Design to Theme
www.designtotheme.com
Theming Drupal at CMS Expo
3 of 6
Theme Files The following files are typically found in a theme: themename.info, *.tpl.php, screenshot.php, and *.css. Your theme may also have: *.js, template.php, theme settings.php.
themename.info name = My First Theme description = Featuring multiple ponyfriendly regions. core = 6.x engine = phptemplate base theme = ninesixty ; Add ponyfriendly regions, CSS and Javascript files regions[shetland] = Left sidebar, column 1 stylesheets[all][] = my_theme_styles.css scripts[] = myscript.js
tpl.php files •
Page variables http://api.drupal.org/api/drupal/modules--system--page.tpl.php/6
•
Default page.tpl.php http://api.drupal.org/api/drupal/modules--system--page.tpl.php/6/source
•
All template files http://drupal.org/node/190815
Popular Base Themes •
Zen http://drupal.org/project/zen
•
NineSixty http://drupal.org/project/ninesixty
•
BeginningW2 http://drupal.org/project/beginningw2
•
Fusion http://drupal.org/project/fusion
•
Skinr module http://drupal.org/project/skinr
Distributing Your Theme Putting your theme on Drupal.org http://drupal.org/handbook/cvs/projects
Emma Jane Hogbin
Design to Theme
www.designtotheme.com
Theming Drupal at CMS Expo
4 of 6
Advanced Layout Techniques The resources at the end of this handout give URLs for doing theming with codey bits. This presentations covers advanced PHP-free techniques. The modules (Panels and Skinr) described in this section offer additional in-line help. You must install the Advanced Help module to view this help (http://drupal.org/project/advanced_help).
Fusion A base theme that can be controlled from the UI using the Skinr module. Sample layout showing the default regions that have been adjusted by Skinr:
http://fusiondrupalthemes.com/support/documentation/
Emma Jane Hogbin
Design to Theme
www.designtotheme.com
Theming Drupal at CMS Expo
5 of 6
Panels “The Panels module allows a site administrator to create customized layouts for multiple uses. At its core it is a drag and drop content manager that lets you visually design a layout and place content within that layout.” http://drupal.org/project/panels
Multi-part Regions and Content Areas Using the module Panels you may easily sub-divide the content area of your page as placed by the variable $content in the template file page.tpl.php.
Using mini panels you may sub-divide any region in your page. For example: look under the hood at: www.fusiondrupalthemes.com/what-fusion
Context-sensitive Content: Contexts and Arguments
“Contexts” is the compilation of all the data needed to build the page. It usually relies on the URL of a page (or the “arguments”). Based on the URL you can change the content of your panel. You may also pass the arguments to any views (lists of content) embedded in your panes to refine the content that is displayed. This can reduce the number of views and panels you need to create for your Web site.
Emma Jane Hogbin
Design to Theme
www.designtotheme.com
Theming Drupal at CMS Expo
6 of 6
Resources Generally speaking Google + keywords = your friend. Here are some additional resources if you're not sure what those keywords ought to be.
Theming Handbook •
The Theming Handbook http://drupal.org/theme-guide
•
Overview of a theme's files http://drupal.org/node/171194
•
All template files provided by Drupal http://drupal.org/node/190815
•
Quick list of theme “recipes” and snippets http://drupal.org/node/22803
•
Best practices http://drupal.org/node/341707
•
Theme settings intro http://drupal.org/node/221905
•
Creating your own administrative settings http://drupal.org/node/177868
•
Creating and using regions http://drupal.org/node/171224
•
Intro to creating variables with preprocess functions http://drupal.org/node/223430
Design to Theme Resources •
Front End Drupal by Emma Jane Hogbin and Konstantin Käfer ◦ Free Chapter www.informit.com/articles/article.aspx?p=1336146 ◦ Buy print copy from Amazon www.tinyurl.com/frontenddrupal ◦ Buy PDF ebook www.informit.com/store/product.aspx?isbn=0137136692 ◦ or win a copy at CMS Expo for free
•
Design to Theme Tutorials (www.designtotheme.com/tutorials)
•
Theming Drupal: a first timer's guide (ebook and online class)
•
PHP for Drupal Designers (ebook and online class)
•
Advanced Layout Techniques (online class)
•
Videos (www.emmajane.net/events) and slides (www.slideshare.net/emmajane) from my other presentations
Emma Jane Hogbin
Design to Theme
www.designtotheme.com