Mail Tweak CSS tweaks

This page documents the two Mail Tweak tweaks that are related to CSS files. The tweaks are: CSS selector and Folder icons. You can use these tweaks together or separately.

CSS files customize the appearance of Thunderbird's user interface. To use them, you need some knowledge of CSS. Mozilla's CSS tutorial is here: CSS:Getting Started You can also find many other CSS tutorials by searching the Internet. The CSS used in Mozilla user interfaces is mostly the same as the CSS used in web pages.

For information about the CSS files that you can use to customize Thunderbird, see: userChrome.css and userContent.css.

CSS Selector tweak

The CSS Selector tweak is designed to help you find selectors that apply in Thunderbird's user interface. To use it, first enable the tweak in Mail Tweak's Options dialog, in the normal way.

In any Mail & Newsgroups window, choose: Tools – CSS Selector   Mail Tweak opens the CSS Selector dialog.

Now Shift+Click an element in Thunderbird's user interface that you want to customize. The CSS Selector dialog shows you possible selectors for the element, along with other information.

Note:  Shift+Click might also perform an action in Thunderbird's user interface. To prevent this, Shift+Click near the element that you want to identify, then use the buttons in the CSS Selector dialog to navigate to the element itself. Shift+Click has no special function in the CSS Selector dialog itself.

To navigate to related elements, press the Parent, Child, Previous and Next buttons. Be careful not to navigate too far, because it is easy to get lost. To return to the element that you last Shift+Clicked, press the Home button.

When you Shift+Click an element, or navigate to an element, Mail Tweak highlights the element with an orange overlay. It is possible to navigate to elements that are not displayed, and in this case you cannot see the overlay. It is also possible to navigate to elements that are displayed but hidden below another element, and in this case you can see the overlay, even though you cannot see the element that it relates to.

To open the appropriate CSS file for the element, press the Open... button.

Some trees (heirarchical lists) are not built from elements. In this case, CSS Selector displays the pseudo-elements that make up the tree. The pseudo-elements represent rows, cells, twisties (for expanding rows in the hierarchy), images and text. A pseudo-element may have properties that you can use to modify the selector.

For a more complete view of the user interface's underlying structure, use the DOM Inspector extension.

Choosing selectors

Choosing selectors requires either skill and experience, or trial and error, or some combination of all four.

For customizing the user interface, you often choose a class selector, because elements with the same class usually have the same function in the user interface.

When you need to identify a particular element, then you usually choose an ID selector.

It is rare that you choose a type selector, because elements with the same type often have very different functions in the user interface.

Many cases require more complex selectors. For example, when a particular element that you want to select has no ID, you might press the Parent button repeatedly until you find a parent that has an ID. Then, starting from that parent, you can build a selector that specifies the element you require.


Namespaces distinguish between elements that are different, but have the same type. For example, the radio element in XUL is different from the radio element in HTML.

However, you almost never need to distinguish between elements in this way in order to customize the user interface. So you can almost always ignore namespaces.

Copying selectors

You can copy a selector from the CSS Selector dialog and paste it in the CSS file in your text editor. In most cases, the copy function copies what you see in the CSS Selector dialog. However, in two cases the copy function copies more than you can see in the dialog.

If you copy a namespace, then you get a complete rule. For example, if you copy the namespace xul, then you get:

@namespace xul url("");

You might need to remove or change the name of namespace in your CSS file.

If you copy the properties of a pseudo-element, then you get a space-separated list in parentheses. For example, if you select the properties isServer-true and serverType-none, then you get:

(isServer-true serverType-none)

Example: Signature text

To change signature text from the default gray to navy, choose: Tools – CSS Selector  

Open a plain text message that has a signature, either in a new window or in the message pane, hold down the Shift key, and click the signature.

In the CSS Selector dialog, get a context menu for the class (for example, by right-clicking it). Choose: Copy as CSS

Press the Open... button to open your userContent.css file.

Paste the selector:


and complete the rule:

.moz-txt-sig {color: navy !important;}

Repeat the process for an HTML message, adding the new selector to the rule:

.moz-txt-sig, .moz-signature {color: navy !important;}

Example: Folder view buttons

To enlarge the icons in the folder view buttons above the folder pane, choose Tools – CSS Selector, then Shift+Click one of the buttons.

In the CSS Selector dialog, you see the toolbarbutton element. Copy its class selector and paste it in your userChrome.css file:


Press the Child button to navigate to the image element indoes the button. Copy its class selector and add it to the selector:

.folderview-cycler > .toolbarbutton-icon

Complete the rule:

.folderview-cycler > .toolbarbutton-icon {width: 12px; height: 12px;}

Example: Local folders account

To highlight your local folders account with a background color, choose Tools – CSS Selector, then Shift+Click the account.

In the CSS Selector dialog, you see the pseudo-element: treechildren::-moz-tree-cell-text

Press the Parent button to navigate to the pseudo-element: treechildren::-moz-tree-cell Copy the pseudo-element type and paste it in your userChrome.css file:


In the Properties list, select isServer-true and serverType-none. Copy and paste the modifier in your userChrome.css file:

treechildren::-moz-tree-cell(isServer-true serverType-none)

Complete the rule:

treechildren::-moz-tree-cell(isServer-true serverType-none) {background-color: palegreen;}

Example: Reset Training Data

To hide the button Reset Training Data, so that you do not reset your junk mail training data by mistake, choose: Tools – CSS Selector

Open the main Options or Preferences dialog, go to the Privacy page, and select the Junk tab.

You do not want to Shift+Click the button itself, so Shift+Click the dialog background a little to the left of the button. CSS Selector identities an hbox element.

Press Child and Next to navigate to the button. Unfortunately, it has no ID that you can use to identify it.

Press the Parent button until you find an element with an ID. This is a tabbox element. Copy the ID selector and paste it in your userChrome.css file:


Press Home, Child and Next to return to the button. Copy and paste any of the attribute selectors:

#privacyPrefs [accesskey="D"]

Complete the rule:

#privacyPrefs [accesskey="D"] {visibility: hidden;}

Folder icons tweak

The Folder icons tweak enables CSS style rules for named accounts or folders in the folders pane, allowing custom icons and other effects.

This tweak is only an enabler. It has no effect by itself. To change the appearance of accounts or folders, you must write appropriate CSS style rules in your userChrome.css file. For more information, see: userChrome.css

If you also enable the CSS Selector tweak, described above, then you can use it to see the modified properties of pseudo-elements in the folders tree.

Example 1: Here is sample code to color the account named Gmail and all its folders green:

treechildren::-moz-tree-cell-text(folderNameCol, account-Gmail)
  {color: green !important;}

Example 2: Here is sample code to color only the folder named Finance in the account named Gmail:

treechildren::-moz-tree-cell-text(folderNameCol, account-Gmail, name-Finance)
  {color: red !important;}

Example 3: Here is sample code to color all the folders named Finance in every account:

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

Example 4: Here is sample code to change the icon of the account named Gmail. The icon file is a 16×16 pixel image, stored in the same place as userChrome.css.

treechildren::-moz-tree-image(folderNameCol, account-Gmail, name-Gmail) {
  list-style-image: url("coin.png") !important;
  -moz-image-region: -moz-initial !important;}

Example 5: Here is sample code to display a different icon for the account named Gmail when it has new mail:

treechildren::-moz-tree-image(folderNameCol, account-Gmail, name-Gmail, biffState-NewMail) {
  list-style-image: url("coin-new.png") !important;
  -moz-image-region: -moz-initial !important;}

Example 6: Here is sample code to display a special icon for all the folders named Finance in every account, with a different icon for new mail:

treechildren::-moz-tree-image(folderNameCol, name-Finance) {
  list-style-image: url("coin.png") !important;
  -moz-image-region: -moz-initial !important;}
treechildren::-moz-tree-image(folderNameCol, name-Finance, newMessages-true) {
  list-style-image: url("coin-new.png") !important;
  -moz-image-region: -moz-initial !important;}