How can I customize the look of Thunderbird's mailbox list, message list, and headers?

Question

Mozilla Thunderbird's message list, mailbox list, and headers use a font size that is so large, I can barely see any content in the message preview pane. I'd like to reduce these to 10px, and reduce the headers to 8px or less. How can I do this?

Answer 1

Thunderbird is written is XUL. It's Mozilla's markup language, and it's powered by XULRunner. Basically, it's GUI-oriented XML.

The thing that styles the whole application is actually just a simple .css file. If you find it, you can then find the elements you are looking for and just tweak the CSS. I'll post back the required path to the file and the rules to be tweaked.

Answer 2

Blender's answer pointed me in the right direction. I didn't actually modify those files, but what I did instead was created a file ~/.mozilla-thunderbird/iddbnhwr.default/chrome/userChrome.css and I put my changes in there. I made mine look like this:

#threadTree {
    font-family: Verdana, Arial, Calibri !important;
    font-size: 10px !important;
}

#msgHeaderView {
    font-family: Verdana, Arial, Calibri !important;
    font-size: 10px !important;
    height: 100px !important;
    overflow: auto !important;
}

#folderTree {
    font-family: Verdana, Arial, Calibri !important;
    font-size: 10px !important;
}

Analyzing the files from Blender's answer showed me that the following are the CSS selectors I wanted:

• #folderTree - The list of folders on the left hand side
• #threadTree - The list of messages on the top right.
• #msgHeaderView - The header pane at the top of every message preview / viewer window

There's a lot more interesting stuff in those files:

• #mailContent - Looks like the body of mail messages?
• #folderUnreadCol, #folderTotalCol, #folderSizeCol, #folderNameCol - Self explanatory
• treecol.flagColumnHeader - Looks like you could change the flag icon to something else... Maybe an upvote icon? ;-)
• treecol.junkStatusHeader - Same for junk icon. Just change the list-style-image: url(...) rule.