MozillaZine

Thunderbird 3.0 - New Features and Changes/Themes

From MozillaZine Knowledge Base

< Thunderbird 3.0 - New Features and Changes


Contents

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:

Notes:

  1. There may be differences between Windows XP/2000 and Vista/Windows 7, 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:

#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;
}

These snippets work with the default theme and some other themes. If it doesn't work see the Zebra striping article (which hasn't been updated for 3.0 yet) and try the snippet it suggests for removing zebra striping with the Noia Extreme, CrossOver, or Cobalt theme. You need to do that for the Nuvola theme for example.

Image:Tb3msgListIcons.png

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:

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

Image:Tb3folders.png

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

Color for New Mail

Previously, new messages in a folder were indicated by an orange star and the folder turning bold. In the default theme, the star has been replaced by the folder name changing color. Unfortunately, this color is picked from the desktop theme, and may result in awkward combinations. To set the color to something more suitable, use the following entry:

Windows and Linux:

treechildren::-moz-tree-cell-text(folderNameCol, newMessages-true) {
  color: red !important;
}

This will change the color for all states. You can have different colors, e.g., when the folder is selected (omit the focus part below), and when it has focus:

treechildren::-moz-tree-cell-text(folderNameCol, newMessages-true, selected, focus) {
  color: orange !important;
}

Using the two entries above, the new-mail indication results in a red folder name if it isn't focused, and turns orange if it has focus (in which case the background color should be blue with the Windows Classic desktop theme, thus giving a nice contrast). You can specify any color as #rrggbb with 2-digit hexadecimal values 00-FF for red, green, and blue.

Add Back Asterisk on Folder Icons

In Thunderbird 2.0, folders with new mail also had an asterisk at their icon to highlight them. While they were removed during the theme redesign, the qute theme still contains the respective icons, thus the following code allows to add back the asterisks as new-mail indication. Used with the above code to define "black" for new messages and "white" for selected, this restores the previous new-mail indication.

Windows:

treechildren::-moz-tree-image(folderNameCol, newMessages-true) {
  -moz-image-region: rect(16px 16px 32px 0) !important;
}

treechildren::-moz-tree-image(folderNameCol, selected, open, newMessages-true) {
  -moz-image-region: rect(16px 32px 32px 16px) !important;
}

treechildren::-moz-tree-image(folderNameCol, specialFolder-Inbox, newMessages-true) {
  -moz-image-region: rect(16px 48px 32px 32px) !important;
}

treechildren::-moz-tree-image(folderNameCol, specialFolder-Virtual, newMessages-true) {
  -moz-image-region: rect(16px 176px 32px 160px) !important;
}

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

Image:Tb3iconSwitch.png

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.

Application Icon

Image:Tb3oldIcon.png

If you don't like the new application icon on your desktop, which has now a pale envelope and redesigned feathers, you can replace it with the old icon used previously for Thunderbird 2.0 and early 3.0 beta releases. The mechanism differs from platform to platform:

Windows:

  1. Download a ZIP version of Thunderbird 2.0.0.x, e.g., from here (note that only the unsigned candidate builds will do, signed releases don't offer ZIP versions).
  2. Open the download file with the ZIP tool of your choice and extract the "thunderbird.exe" file (you will not actually execute this, it is only needed to provide the application icon).
  3. Right-click on the Thunderbird shortcut on your desktop and select Properties, go into the Shortcut tab.
  4. Click on Change Icon, then Browse.
  5. Point the source file from the original executable to the 2.0 executable you've extracted before.
  6. Close the shortcut properties once you see that the application icon has changed.

Unfortunately, Windows doesn't allow you to use a simple PNG file for the shortcut icon, and the application icons are tied to the executable, therefore this somewhat indirect approach is necessary.

Linux:

  1. Download the XPM version of the application icon from here (right-click on "Raw file" link and save the link target to disk).
  2. Copy or move it as /usr/share/pixmap/thunderbird.xpm
  3. In /usr/share/applications/thunderbird.desktop, add a line Icon=thunderbird

This procedure may also depend on the distribution used, or KDE vs. Gnome desktop.