MozillaZine

Thunderbird 5.0 - New Features and Changes/Themes

From MozillaZine Knowledge Base

< 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.

Contents

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 as if it was transparent. Note that, depending on the installed version of Windows 7 or Vista, the available desktop themes, as well as graphics card and driver capabilities [2], 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:

TB 5.0 aero theme over default desktop background
TB 5.0 aero theme over folder content in small-icons view

Non-glass alternatives

The "glass" effect causes substantial issues on dark desktop themes, or it may be just 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.

TB 5.0 used with Windows 7 basic desktop theme
also see #Switching to 3.1-style or XP Qute themes instead below.

Switching off the Glass effect while using Aero themes

One way to disable it while retaining an aero-style desktop theme is to install the NoGlass addon [3]. The same can be achieved by adding the following userChrome.css code [4]:

window, page, dialog, wizard, prefwindow {
  background-color: -moz-Dialog !important;
}

#toolbar-menubar {
  -moz-appearance: -moz-win-browsertabbar-toolbox !important;
}

Adding color to the toolbar icons

The lack of color in the redesigned toolbar buttons has been criticized [5]. The NoGlass add-on referred to above allows to switch the "Use Small Icons" checkbox in the "Customize..." right-click dialogs to select colorized icons as proposed in the bug report. That set is not complete at the time of writing, but it is also possible to colorize the icons yourself as desired by userChrome.css overrides and a graphics tool like GIMP [6].

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, .tabmail-tabs {
  background-image: none !important;
}
Image:Tb50winClassicButton.png

As part of the "aero" style, the button feature fade-in effects and also a distinct "glow" around the border. In non-aero desktop themes, 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

Image:Tb50winHighCon1.png
related article: Bad Eyesight - Thunderbird

These themes are provided for accessibility reasons, but their black background isn't considered in the button appearance [7]. 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 borders and text in buttons and tabs. The icons remain gray though unless colorized as mentioned above.

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

.tabmail-tab {
  color: -moz-dialogText !important;
}

Switching to 3.1-style or XP Qute themes instead

The IgnoreAero theme offers the appearance of the TB 3.1 Windows 7/Vista default theme as a replacement the redesinged theme [8]. If you don't like the aero theme at all, you can force Thunderbird to use the theme for Windows XP/2000 contained in the same installation. The easiest way is to just run Thunderbird in XP-compatibility mode [9]. Other approaches require hacking the omni.jar file to change the OS-version threshold in the manifest [10], which is recommended for experienced users only.