You are currently viewing a snapshot of www.mozilla.org taken on April 21, 2008. Most of this content is highly out of date (some pages haven't been updated since the project began in 1998) and exists for historical purposes only. If there are any pages on this archive site that you think should be added back to www.mozilla.org, please file a bug.



Building a Thunderbird Theme

Thunderbird currently uses the mozilla classic theme. Unfortunately, the mail icons in classic have been around since the Netscape 4.0 days. They are extremely old and in dire need of a face lift. Here is a screen shot of the current theme. We want to develop a new theme for Thunderbird which matches the UI used in the default Firefox browser theme. However, deleveloping a UI for mail is much more work than it is for a browser. In particular, mail has so many more icons. For starters, we have three application windows, all with their own toolbars: mail, mail compose and the address book. Add on to that all of the little icons used in the folder and thread panes. Before you know it, years of your life have gone by, and you are still cranking out mail icons.

We desperately need contributors to help build our default Thunderbird theme (by helping generate our default icons for starters). While we are highly motivated, we just don't have the artistic talent to make this happen. But hopefully we can make the process so painless that you will want to help contribute icons for the Thunderbird theme. This document aims to walk you through the work required for building a theme. The initial focus is on icons, and not the overall UI design. Hopefully that will change once we resolve the icon crisis. In fact, if we can just get icons, we'll put them all together into the theme.

Short term goal: It would be quite a burden for one person to design all of the icons for Thunderbird. There are just to many. It would be great if we could get someone with a lot of UI experience to design the more imporant/visible icons such as the toolbar buttons for mail, address book and compose. That would help establish the look and theme for the icons. Then we could start delegating many of the smaller icons out to other designers. That way the work gets distributed and we can all help build a great theme for Thunderbird.

Update: Arvid Axelsson, the designer of the Qute Theme for Firebird has agreed to develop a matching theme for Thunderbird! We can't wait to see what he comes up with.

The following topics are ordered by priority in building a default theme for Thunderbird. Also, we aren't listing all of the icons here, just the ones we want to get done first.

Mail 3-pane

This is the most visible window in our product. The first step is to develop icons for all of the mail 3-pane toolbar buttons. Each toolbar button has four possible image values: normal, hover, hover active (when the button is pushed) and disabled. For each toolbar button, we have four variations of the image (one for each of these state). For performance reasons, we place all of these icons in one large image file instead of loading all of these little images. Here is the image file for the current classic theme. However, you should also look at the modern toolbar too, you might get more ideas about what the 3-pane toolbar icons should look like.

  • Get Mail
  • Get Mail
  • Write
  • Address Book
  • Reply
  • Reply All
  • Forward
  • Next (go to the next message)
  • File (file a message)
  • Delete
  • Stop
  • Print
Junk (mark a mesage as junk) *New, not shown in our example template*
Thunderbird Throbber (animated)

Compose Window

The mail compose window doesn't have quite as many possible toolbar buttons as the mail 3-pane. The icons are already listed in the image above (they are part of that same large image).

  • Send
  • Address (brings up an address picker)
  • Attach (add an attachment, usually some sort of paper clip)
  • Security (drop down of security information like signing the msg, encrypting it, etc.)
  • Save (save a draft of the message)
  • Spelling?? (eventually we'll have a spell checker hooked up)

Folder Pane Icons

We have a lot of little icons which show up in the folder pane. The size of these icons is important, so be sure to consult the size of the original versions before designing a new one. This table shows some of the more important ones to focus on first. Note: we aren't even claiming that these icons would necessarily change with a new theme. That would be up to the artist. Maybe we dig into the modern theme which is a little snappier than classic, copy these icons then go into paint shop and tweak them to better blend in with a Thunderbird theme.

Inbox Folder
Inbox Folder with new mail
Open Inbox Folder
Junk Folder
Trash Folder
Folder with new mail
Open folder with new mail
Open Folder
Online Mail server (i.e. imap)
Online Mail server with new mail (i.e. imap)
Local Mail server (i.e. pop)
Local Mail server with new mail (i.e. pop)
News Server
Drafts Folder
Sent Folder
Unsent Messages folder

Thread Pane Icons

We have a lot of little icons which show up in the thread pane. The size of these icons is important, so be sure to consult the size of the original versions before designing a new one. This table shows some of the more important ones to focus on first.

Mail message
Mail message with attachment
New Mail Message
Message is Junk
unthread column (one of the thread pane column icons)

Other high visibility icons

This is a catch all category for high visibility icons that aren't part of a toolbar or the thread pane/folder pane.

New Mail alert icon (part of the animated alert on your desktop when you have new mail). We currently use a modern icon here.
Address book card (shows up on the To/cc line in mail compose for each message recipient and in the address book thread pane).
Address book mailing list card (also shows up in mail compose and the address book thread pane)
windows system tray icon (16 x 16 .ico file) when the user has new mail (comes from the modern theme)

Address Book

The least important of our toolbar windows is the address book. So focus on this last.

New Card
New List
Write (address a new message to a contact)
Card Properties
Delete
Instant Message (send an instant message)