Steps to Building a Theme for Drupal 5.x

A. Design layout in Photoshop and produce .psd file
B. Convert .psd to css/xhtml
C. Choose a starting theme to modify or code a new theme from scratch.
D. Katy's notes

A. Design layout in Photoshop and produce .psd file
1. If your design skills are limited, there are many open source templates you can choose from. http://www.oswd.org

B. Convert .psd to css/xhtml
1. Convert .psd to .jpg and slice up using Imageready (available in Adobe Photoshop).

2. Build your webpage using xhtml/css. Start with the Docctype Declaration. You can use a pre-made css layout. See http://www.code-sucks.com

3. Here's an excellent tutorial that I found helpful. It explains all the div tags that wrap around the sections of the webpage. Go through the Step by Step Tutorial: http://css.maxdesign.com.au/selectutorial/tutorial_intro.htm

4. The tutorial on how to use css to display images in a paragraph of text was very helpful as well.
http://css.maxdesign.com.au/floatutorial/index.htm

5. There are many different styles of menus to choose from. Horizontal menus, or vertical menus, using image rollovers or drop down menus.

Max Design has many css menus made using lists:
http://css.maxdesign.com.au/listamatic/

For menus with image rollovers: www.monkeyflash.com/css/image-rollover-navbar/

C. Choose a starting theme to modify or code a new theme from scratch.
1. After you have built your page with css/xhtml, you can convert it to work with Drupal. Modify page.tpl.php and style.css

Drupal 5 Themes by Ric Shreves covers the basics of Drupal Theming.

See also http://drupaldojo.net/lesson/theming-like-a-pro

Other resources:
http://css-tricks.com/videos/

Pro Drupal Development has a free chapter on theming. It's a free download at
Chapter 8 of Pro Drupal Development on the Theme System

D. Katy's Notes

My favourite theme to customize is My Golden Hour available at http://www.drupal.org/project/golden_hour. It has a large photo in the header and a horizontal menu underneath the photo. I used this theme for this blog, mydrupal.ca.

I added the rotating photo header from Drupal 5.x Marinelli theme. When you press the refresh button on your browser, you can see the new photo. There's a small bug. The photo should change when you click on each menu button. This feature works properly in Drupal 5.10 so I guess I need to upgrade :-)

I look forward to your comments and links to other helpful tutorials, screencasts and videos on the topic of Drupal 5 Theming.

Bookmark/Search this post with:

Digg  |  del.icio.us  |  Google  |  Yahoo  |  Facebook  |  Twitter