Thunderbird 3.0 - New Features and Changes/Themes

< Thunderbird 3.0 - New Features and Changes

This is a draft and work in progress.

• This article is inherently incomplete and subject to change until TB 3.0 is released.
• Please read the warnings on the main page on using pre-release versions.

Default Themes

This article has been split off Thunderbird 3.0 - New Features and Changes to discuss major changes in the default themes and to provide userChrome.css code to modify those (e.g., in the frequent cases of "I liked xxx better in the old version, how can I get back?").

For Thunderbird 3.0, three default themes are provided, depending on the platform:

• Windows uses the qute theme;
• Mac OSX uses the pinstripe theme;
• Linux uses the gnomestripe theme.

Notes:

1. There may be differences between Windows XP and Vista, thus far mainly intended for the icon design [1].
2. The Linux gnomestripe theme is new [2] and uses some "stock icons" directly from the operating system.
3. A "classic" theme based on the previous qute icons is available to retain the TB2 look [3].

The following sections are selected and expanded examples from forum threads on modifying the new default themes for appearance (see the main article for entries to hide or unhide control elements). These userChrome.css entries may not apply to any 3rd-party theme, and are subject to change while Thunderbird 3.0 is finalized. The general discussion in Pane and menu fonts still applies to the new version.

Message List

Examples for changing the appearance of the message/thread list and the related icons:

Remove Zebra Striping

Introduced with Thunderbird 2.0, the alternating background color caused rendering and performance issues with certain graphic cards or when access remotely. To remove them to avoid those issues (or just if you dislike the stripes), use

Windows XP:

#threadTree treechildren::-moz-tree-row(odd) {
  background-image: none !important;
}

Mac OSX and Linux:

#threadTree treechildren::-moz-tree-row(odd) {
  background-color: transparent !important;
}

#threadTree treechildren::-moz-tree-row(odd, selected) {
  background-color: Highlight !important;
}

Reduce Size of Attachment Icon

The thread-list icons have been redesigned and are now larger. If you have lots of messages with attachments, the back-to-back icons may be too dense. To use the smaller column icon instead, use Starting with 3.0 RC1, the smaller column icons are used and the following code is no longer necessary.

Windows XP:

treechildren::-moz-tree-image(attachmentCol, attach) {
  list-style-image: url("chrome://messenger/skin/icons/attachment-col.png") !important;
  -moz-padding-end: 5px !important;
  -moz-padding-start: 5px !important;
}

Linux:

treechildren::-moz-tree-image(attachmentCol, attach) {
  list-style-image: url("chrome://messenger/skin/icons/attachment-col.png") !important;
  -moz-image-region: rect(0px 12px 12px 0px) !important;
  -moz-padding-end: 5px !important;
  -moz-padding-start: 5px !important;
}

Note that the gnomestripe theme combines multiple icons in a single PNG, therefore the additional -moz-image-region override is needed in this case (and others). On Mac OSX, the two icons are almost identical, thus no code is provided for that platform.

Use Dot for Unstarred Messages instead of the Empty Star

For messages which are not starred (flagged as important), the previous "dot" icon has been replaced with an empty star now (that change hasn't been performed yet for the Mac OSX default theme). This is somewhat irritating when you have "star" and "read" columns next to each other. To use the dot also for the star column,

Windows XP:

treechildren::-moz-tree-image(flaggedCol) {
  list-style-image: url("chrome://messenger/skin/icons/readmail.png") !important;
  -moz-padding-start: 0px !important;
  -moz-margin-start: -3px !important;
}

treechildren::-moz-tree-image(flaggedCol, flagged) {
  list-style-image: url("chrome://messenger/skin/icons/flag.png") !important;
}

Linux:

treechildren::-moz-tree-image(flaggedCol) {
  -moz-image-region: rect(0px 16px 16px 0px) !important;
}

treechildren::-moz-tree-image(flaggedCol, flagged) {
  -moz-image-region: rect(80px 16px 96px 0px) !important;
}

On Windows, you can replace "flag.png" with "flag-col.png" to get a smaller star. The Linux version just changes the icon by selecting a different region from the multi-icon image file.

Folder Pane

Changing the appearance of the folder list to the left of the 3-pane main window:

Restore the Tree Lines

Those were already removed for Linux before but have now disappeared for all platforms. If you have a lot of accounts and subfolders, you may want to get those back as a visual aid.

All platforms:

#folderTree > treechildren::-moz-tree-line {
  visibility: visible !important;
}

BTW: This also works for the Account Manager, use the same construct with #accounttree to also get the treelines back in the account and settings pane selection.

Advanced Modifications

Replacing Toolbar Icons

The theme redesign introduced new icons for message list, folder pane, and the toolbars. If you dislike a specific icon and want to replace it with one from a different theme, you will first need to figure out what the identifier of that icon is and where it is located. This can be best done with the DOM Inspector (use version 2.0.3+ for Thunderbird 3.0, see discussion) or the CSS Selector of the Mail Tweak extension. Once you've found the identifier to look for, follow one of the links to the theme for your platform on top of this article, and enter it into the search bar. You may need to have some knowledge in CSS coding to derive the respective code.

As an example, you may want to replace some buttons in the composition window. After identifying "button-send" and "button-save" as the elements to be changed, those entries can be found in messengercompose.css and show that the icons are used from compose-toolbar.png.

After downloading a theme of your choice and extracting "compose-toolbar.png" from the JAR file, put it into the chrome folder and optionally rename, here to "compose-toolbar-other.png". Then add the following to userChrome.css:

#button-send {
  list-style-image: url("compose-toolbar-other.png") !important;
}

#button-save {
  list-style-image: url("compose-toolbar-other.png") !important;
}

In general, this works for all types of icons; the challenge is to identify the correct entry to tweak, getting a matching icon file from another theme, and to wire it correctly. If the downloaded PNG file had a different arrangement of these icons than the default theme's original, the -moz-image-region attribute would have needed modification as well.