Thunderbird 5.0 - New Features and Changes/Themes: Difference between revisions

From MozillaZine Knowledge Base
Jump to navigationJump to search
Line 7: Line 7:
==Aero Default Theme on Windows 7 and Vista==
==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 available desktop themes, as well as graphics card and driver capabilities [http://www.howtogeek.com/howto/windows-vista/understanding-windows-vista-aero-glass-requirements/], the "glass" effect may not be available or may need to be explicitly activated.
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 [http://www.howtogeek.com/howto/windows-vista/understanding-windows-vista-aero-glass-requirements/], 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:
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:
Line 19: Line 19:
<center>[[Image:Tb50basicDefaultWin7.png|TB 5.0 used with Windows 7 basic desktop theme]]</center>
<center>[[Image:Tb50basicDefaultWin7.png|TB 5.0 used with Windows 7 basic desktop theme]]</center>


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.
The remainder of this article covers the Windows Classic theme and issues with the High Contrast themes, but may equally be applied to other non-aero desktop themes as well.


==Aero effects like gradients, transitions, and button glow==
==Aero effects like gradients, transitions, and button glow==

Revision as of 21:34, 6 June 2011

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

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.

TB 5.0 used with Windows 7 basic desktop theme

The remainder of this article covers the Windows Classic theme and issues with the High Contrast themes, but may equally be applied 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 [3]. 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;
}