The Themer’s Toolkit

Abstract The tools available to Drupal 6 themers are amazing! Come learn about base themes, must-have modules, browser-based tools you can't live without and get a gentle introduction on how to convert Drupal 5 themes to Drupal 6. Woo! PS This talk was based on chapter 2 and chapter 3 of Front End Drupal – a brand new book on theming Drupal. More information is available at www.frontenddrupal.com

The tools available to Drupal 6 themers are amazing! Come learn about base themes, must-have modules, browser-based tools you can't live without and get a gentle introduction on how to convert Drupal 5 themes to Drupal 6. Woo!

PS This talk was based on chapter 2 and chapter 3 of Front End Drupal – a brand new book on theming Drupal. More information is available at www.frontenddrupal.com

April 2009

The .info file name = Venus description = The most beautiful theme evah. Screenshot = screenshot.png core = 6.x engine = phptemplate

name = Venus

description = The most beautiful theme evah.

Screenshot = screenshot.png

core = 6.x

engine = phptemplate

A .tpl.php file <div id=&quot;block&quot;><div class=&quot;block-inner&quot;> <?php if ($block->subject): ?> <h2 class=&quot;title&quot;><?php print $block->subject; ?></h2> <?php endif; ?> <div class=&quot;content&quot;> <?php print $block->content; ?> </div> </div></div>

<div id=&quot;block&quot;><div class=&quot;block-inner&quot;>

<?php if ($block->subject): ?>

<h2 class=&quot;title&quot;><?php print $block->subject; ?></h2>

<?php endif; ?>

<div class=&quot;content&quot;>

<?php print $block->content; ?>

</div>

</div></div>

The template.php file

Starter Themes

The .info file name = Venus description = The most beautiful theme evah. Screenshot = screenshot.png core = 6.x engine = phptemplat base theme = zen

name = Venus

description = The most beautiful theme evah.

Screenshot = screenshot.png

core = 6.x

engine = phptemplat

base theme = zen

Converting from Drupal 5x

The .info file stylesheets[all][] = regions.css stylesheets[print][] = print.css regions[above_header] = above header regions[navbar] = navigation bar

stylesheets[all][] = regions.css

stylesheets[print][] = print.css

regions[above_header] = above header

regions[navbar] = navigation bar

5 tools you need to use too 1. Firebug 2. Screen shot + testing services 3. Devel module 4. Design library (Zotero) 5. CSS Grids

1. Firebug

2. Screen shot + testing services

3. Devel module

4. Design library (Zotero)

5. CSS Grids

www.getfirebug.com

www.browsershots.com

www.zotero.com

+ 1

More information at: http://bazaar-vcs.org/BazaarUploadForWebDev

More information at:

http://bazaar-vcs.org/BazaarUploadForWebDev

Share your toolkit.

Blog your toolkit.

Resources www.drupal.org www.frontenddrupal.com

www.drupal.org

www.frontenddrupal.com