Thunderbird 5.0 - New Features and Changes/Themes

From MozillaZine Knowledge Base
Revision as of 18:08, 4 June 2011 by Rsx11m (talk | contribs) (Split this off the main article due to lots of code samples)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigationJump to search

< 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. 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. 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, either switching the desktop to a non-aero desktop (right-click on the Desktop and select "Personalize" from the context menu) or changing the theme in Thunderbird itself should help. See Themes for instructions, 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 glowing

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