For more than a decade, Thunderbird has been my e-mail client of choice. It provides flexibility and customization via plugins and configuration files that helps me to adapt it specifically to my needs. Over the years, I’ve compiled my very own configuration set and selection of plugins which I’m sharing with my fellow readers, hoping that some of these customizations also make your e-mail life easier, especially when you have to deal with a huge amount of messages.

In a first posting, I’ve shared my favorite plugins with you, and showed you how to adapt the configuration to your very own needs in a subsequent posting. Today, I’d like to show you how you can improve the program’s appearance by tweaking some Thunderbird CSS files.

A word of warning

Changes via plugins and in the configuration files can lead to problems if done wrong. Before trying out the add-ons and tweaks from this article, I strongly recommend making a backup of your profile folder. In general, you should only continue if you know what you’re doing.

Where to start

The userContent.css file we edit resides in the chrome subfolder of Thunderbird’s profile folder, the location depends on the operating system. Some general insight how the user profiles work can be found in this MozillaZine article.

To apply the layout settings, you need to edit the file userContent.css (see above) in a regular text editor. Note the lower-case “u” and the upper-case “C” in the file name.

Be advised that several configuration options and plugins will not become effective until Thunderbird has been restarted.

Customizing Thunderbird CSS files

blockquote[type=cite] {
   color: navy !important;
   background-color: RGB(235,235,235) !important; 
   border-color: navy !important;
   border-left: 3px solid !important;
   border-right: 3px solid !important;
}
blockquote[type=cite] blockquote {
   color: maroon !important;
   background-color: RGB(225,225,225) !important;
   border-color: maroon !important;
   border-left: 3px solid !important;
   border-right: 3px solid !important;
}

The following sets the colors for quoted text in the message reader, and makes it more visible than in Thunderbird’s default setting. The first quote level is displayed in blue, with a gray background, the second quote level is displayed in red with a dark gray background, both with a colored border on both sides. You can also configure further quote levels, by adding the respective amount of blockquote statements, like

blockquote[type=cite] blockquote blockquote blockquote blockquote {

for the fifth quoting level.

---

span[_moz_quote=true] {
color: navy !important;
background-color: RGB(235,235,235) !important;
display: block;
width: 82ch !important;
}

Likewise, you can configure the quoting colors when composing a message – unfortunately, it seems, only in general, and not depending on the quote level. The above sets the quoting color to blue, applies a background color, up to a width of 82 characters per line.

---

There’s more…

The above shows only a few samples of the Thunderbird CSS customizations possible. There’s also another file called userChrome.css, which can be used to, amongst many other things, adjust the colors of the message list.

By plugins, themes, configuration tweaks and CSS edits, Thunderbird can be easily adjusted to suit your needs.