Thunderbird 5.0 - New Features and Changes/Themes

< Thunderbird 5.0 - New Features and Changes

This article discusses the changes made to the new "aero" theme which applies to Windows 7 and Vista [1]. The other platforms only received minor updates, including the "qute" theme for Windows XP and Windows 2000, thus much of what's discussed in Thunderbird 3.0 - New Features and Changes/Themes is still applicable. Many of the aero features are also available with KDE 4 on Linux, but Thunderbird 5.0 is not using them in its "gnomestripe" default theme.

Aero Default Theme on Windows 7 and Vista

The most obvious redesign is the use of aero-style buttons and other UI elements as well as a substantial use of the "glass" effect, thus changing the window decoration and background with respect to anything that's covered by the Thunderbird window. Note that, depending on the installed version of Windows 7 or Vista, the "glass" effect may not be available or may need to be explicitly activated.

The following examples show the appearance over the center of the Windows 7 Default theme with a recognizable part of the logo, the second example shows the same window over an opened folder:

If that's too "busy" for you, switching the desktop to a non-aero theme (like the Windows 7 Basic theme shown below) should help; right-click on the Desktop and select "Personalize" from the context menu to get a list. See Themes for instructions on changing the theme in Thunderbird itself, and also have a look at Personas to get a static but nevertheless colorful application background.

The remainder of this article covers the Windows Classic theme and issues with the High Contrast themes, but may equally apply to other non-aero desktop themes as well.

Aero effects like gradients, transitions, and button glow

There are various gradients in the menu list and the toolbars, which can be removed by the following userChrome.css code. This may look better in desktop themes which usually don't employ gradients.

toolbox > toolbar:first-child,
toolbox > toolbar:last-of-type {
  background-image: none !important;
}

As part of the "aero" style, the button feature fade-in effects and also a distinct "glow" around the border. In contrast, hover effects on menus and other buttons (e.g., in Windows Classic) are visible without a fade and don't show any glow effects. The following removes both effects while leaving the blue-ish button background and border on hover intact:

.toolbarbutton-menubutton-button:not(:active):hover, .toolbarbutton-1:not(:active):hover,
toolbarbutton[type="menu-button"]:not(:active):hover > .toolbarbutton-menubutton-dropmarker,
#headers-box menulist:not(:active):hover {
  -moz-transition: background-color 0s ease-in, border-color 0s ease-in !important;
  box-shadow: none !important;
}
 

Problems when using High Contrast themes

→ related article: Bad Eyesight - Thunderbird

These themes are provided for assessibility reasons, but their black background isn't considered in the button appearance [2]. Also, the gradient in the menu bar limits visibility of the menu items.

Remove the gradient with the code in the previous section, then add the following to remove button gradients and to strengthen visibility of button borders and text. The icons remain gray though.

.toolbarbutton-menubutton-button,
.toolbarbutton-menubutton-dropmarker,
.toolbarbutton-1 {
  background: none !important;
  border-color: -moz-ButtonDefault !important;
  color: -moz-DialogText !important;
  text-shadow: none !important;
  font-weight: bold !important;
}