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

x11 fonts thunderbird

10,720

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

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

Solution 3

Generally, you can customise the Thunderbird’s look with the files chrome/userChrome.css (for the UI) and chrome/userContent.css (for the message display), both located in your Thunderbird profile folder. (You might have to create them.)

In order to find the relevant CSS selector, a DOM inspector might help.

Solution 4

Know this is an old post, but I just started using Thunderbird on my Mac (v52) and spent/wasted a lot of time trying to find answers on styling Thunderbird. The sample below worked for me on my Mac. In that /chrome/userChrome.css. I wanted to separately style the left folder list and the message list. The Theme Font & Size Changer add-on does work but affects all aspects. Not individual areas.

threadTree controls the message view stylings.
folderTree controls the folder view stylings.

On my Mac I noticed that the icon in the folder list was being cut off at the bottom. Overriding whatever padding is set by default made the icon look pretty again! Some references state that height can be used to set the line height but I could never get that to work for the folder view while setting a margin did.

Some more information on the tree and ways to style: https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Tutorial/Styling_a_Tree.

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* set default namespace to XUL */

/* Some Info: https://gist.github.com/AnthonyDiGirolamo/6032387 */

/* For the message list window. */
#threadTree > treechildren::-moz-tree-row {
   margin-top: 1px !important;
   margin-bottom: 3px !important;
}

/* For the folder list sidebar. */
#folderTree > treechildren::-moz-tree-row {
  /*font-family: Lucida Sans !important;*/
  font-size: 10pt !important;

  /* For line spacing */
  margin-bottom: 5px !important;

  /* To remove some style that looks to be
  cutting off the bottom of the icon on my Mac. */
  padding-bottom: 0px !important;

  /* Not working
  height: 12px !important;
  line-height: 12px !important;
  */
}

View more solutions

10,720

Hugo

Updated on September 17, 2022

Comments

Hugo over 1 year

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?
Hugo over 13 years

"you can then find the elements you are looking for and just tweak the CSS". I'm a website developer so tweaking CSS is great. I just need to know the selectors for the parts of the UI.
Blender over 13 years

Heh, nice. Basically, the layout is simple: all of the program's guts are in chrome/, inside of JAR files. I haven't tweaked Firefox or Thunderbird, but if you install Firebug or a similar extension, you can get the class of the rows.
Blender over 13 years

I found something that seems plausible: chrome/classic.jar/skin/classic/messenger/mailWindow1.css. Mozilla was nice and gave the elements really obvious names.
Hugo over 13 years

Perfect, thanks Blender! I extracted that .jar into my home directory and was able to learn the rules I needed -- see my answer.
Blender over 13 years

XUL hacking is fun, and really simple. That's how easy it is to make a Firefox extension!
Blender over 13 years

Wow, I completely forgot about those user CSS files. I always loved Mozilla for their code.
Scott - Слава Україні over 6 years

I'm not sure I understand what your answer is. Are you saying that the user should enter the above text into their chrome/userChrome.css file? Please do not respond in comments; edit your answer to make it clearer and more complete.