Personalize your Thunderbird by changing it’s chrome
It’s been awhile since we tweaked our Firefox chrome, and it’s about time we get to hack Mozilla’s wonderful email client Thunderbird.
In this post I’ll give you the necessary tools to change the look of Thunderbird and give you some suggestions (and code, of course :) to help you along the way. First, let me give credit to Twister MC’s wonderful post that I will be using as a reference for the label coloring scripts below. OK, let’s get started!
To start off we are going to need to setup our userChrome.css file for Thunderbird. Here are the instructions for that. We just basically need to create a chrome directory in our Thunderbird profile with a userChrome.css file in it. Another note here is that you can create a Stylish script using the Stylish Add-on for Thunderbird and putting these CSS snippets in there. Does Stylish have any limitations here? Let me know in the comments if so.
Right! So open up your userChrome.css file in your favorite text editor (not Microsoft Word, I recommend jEdit) We’ll need to begin the file by defaulting to the XUL namespace:
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* set default namespace to XUL */
Then we get to the good stuff. Here are some snippets I have created for you to put in the userChrome.css file:
/* Change menu and dialog font sizes */
menupopup > * {
font-size: 12px !important
}
/* Change font-size of email list */
.tree-rows {
font-size: 10px !important;
}
/* Change all fonts to Century Gothic */
* {
font-family: "Century Gothic", sans-serif !important;
}
/* Hide status bar */
#status-bar {
display: none !important;
}
/* Get rid of the throbber */
#throbber-box {
display: none !important;
}
/* Make Sidebar header big and bold */
#folderpane-title {
font-size: 1.2em !important;
font-weight: bold !important;
}
/* Hide Menus: menu_File, menu_Edit, menu_View, messageMenu, ltnCalendarMenu, tasksMenu */
#menu_File, #menu_Edit, #menu_View {
display: none !important;
}
/* Remove disabled toolbar buttons until enabled */
toolbarbutton[disabled="true"] {
display: none !important;
}
/* Make unread messages blue and italic */
treechildren:-moz-tree-cell-text(unread) {
color: #CCCCFF !important;
font-style: italic !important;
}
/* Change background color of unread messages to slightly red */
treechildren::-moz-tree-cell(unread) {
background-color: #330000 !important;
}
treechildren::-moz-tree-cell(unread,selected) {
background-color: #660000 !important;
}
/* Change colors of replied messages */
treechildren::-moz-tree-cell(replied) {
background-color: #003300 !important;
}
treechildren::-moz-tree-cell(replied,selected) {
background-color: #006600 !important;
}
treechildren::-moz-tree-cell(replied,current) {
background-color: #009900 !important;
}
treechildren:-moz-tree-cell-text(replied,current) {
color: #FFFFFF !important;
}
/* Change color of deleted messages */
treechildren::-moz-tree-cell(imapdeleted) {
background-color: #999999 !important;
}
treechildren:-moz-tree-cell-text(imapdeleted) {
color: #FFFFFF !important;
text-decoration: line-through !important;
}
treechildren::-moz-tree-cell(imapdeleted,selected) {
background-color: #333333 !important;
}
treechildren::-moz-tree-cell(imapdeleted,current) {
background-color: #666666 !important;
}
treechildren:-moz-tree-cell-text(imapdeleted,selected) {
color: #DDDDFF !important;
}
treechildren:-moz-tree-cell-text(imapdeleted,current) {
color: #DDDDFF !important;
}
treechildren::-moz-tree-cell-text(imapdeleted, offline) {
background-color: #DDDDDD !important;
text-decoration: line-through !important;
}
/* Folder pane(color/text) and Message pane(color) */
treechildren {
background-color: #2D2D2D !important;
}
/* change Message Pane text */
treechildren:-moz-tree-cell-text(unread) {
font-size: 10px !important;
font-family: "Times New Roman" !important;
font-weight: bold !important;
color: #D50000 !important
}
treechildren:-moz-tree-cell-text(read) {
font-size: 10px !important;
font-family: "Times New Roman" !important;
font-weight: bold !important;
}
/* Set no-label (default) bottom border */
treechildren::-moz-tree-cell {
border-bottom: 1px solid #FFFFFF !important;
}
/* Default Important Label */
treechildren::-moz-tree-cell(lc-FF0000) {
border-bottom: 1px solid #FF0000 !important; background-color: #FFCCCC !important;
}
treechildren::-moz-tree-cell-text(lc-FF0000) {
color: #000000 !important;
}
treechildren::-moz-tree-cell(lc-FF0000, selected) {
background-color: #FF0000 !important;
}
treechildren::-moz-tree-cell-text(lc-FF0000, selected) {
color: #FFFFFF !important;
}
/* Default Work Label */
treechildren::-moz-tree-cell(lc-FF9900) {
border-bottom: 1px solid #FF9900 !important;
background-color: #FFCC99 !important;}
treechildren::-moz-tree-cell-text(lc-FF9900) {
color: #000000 !important;
}
treechildren::-moz-tree-cell(lc-FF9900, selected) {
background-color: #FF9900 !important;
}
treechildren::-moz-tree-cell-text(lc-FF9900, selected) {
color: #FFFFFF !important;
}
/* Default Person Label */
treechildren::-moz-tree-cell(lc-009900) {
border-bottom: 1px solid #009900 !important;
background-color: #99FF99 !important;}
treechildren::-moz-tree-cell-text(lc-009900) {
color: #000000 !important;
}
treechildren::-moz-tree-cell(lc-009900, selected) {
background-color: #009900 !important;
}
treechildren::-moz-tree-cell-text(lc-009900, selected) {
color: #FFFFFF !important;
}
/* Default Todo Label */
treechildren::-moz-tree-cell(lc-3333FF) {
border-bottom: 1px solid #3333FF !important;
background-color: #CCCCFF !important;}
treechildren::-moz-tree-cell-text(lc-3333FF) {
color: #000000 !important;
}
treechildren::-moz-tree-cell(lc-3333FF, selected) {
background-color: #3333FF !important;
}
treechildren::-moz-tree-cell-text(lc-3333FF, selected) {
color: #FFFFFF !important;
}
/* Default Later Label */
treechildren::-moz-tree-cell(lc-993399) {
border-bottom: 1px solid #993399 !important;
background-color: #FFCCFF !important;}
treechildren::-moz-tree-cell-text(lc-993399) {
color: #000000 !important;
}
treechildren::-moz-tree-cell(lc-993399, selected) {
background-color: #993399 !important;
}
treechildren::-moz-tree-cell-text(lc-993399, selected) {
color: #FFFFFF !important;
}
You can add to these easily by using the Thunderbird DOM Inspector. I know my brilliant readers have some more of these up their sleeves so let’s see what tweaks you have for Thunderbird in the comments!
Personalize your Thunderbird by changing it’s chrome
Some nice tips on customizing Thunderbird via the userChrome.css file.
THANKS! I’ve been trying to figure out how to change some of this stuff for a long time. My one question though – how do you change the label backgrounds for additional labels you have added(other than the default 5 that come with Thunderbird). Adding another similar set below the original 5 doesn’t seem to do it.
@Chuck:
This is a tricky one, but here’s how:
1) Suppose you add a tag with the color Yellow(color square 3rd row, 5th from left)
2) The userChrome.css entry in this case would be:
treechildren::-moz-tree-cell(lc-FFFF00) { background-color: #FFFF99 !important;}
treechildren::-moz-tree-cell-text(lc-FFFF00) { color: #000 !important; }
treechildren::-moz-tree-cell(lc-FFFF00, selected) { background-color:
#FFFF00 !important; }
treechildren::-moz-tree-cell-text(lc-FFFF00, selected) { color: #000
!important; }
The text (lc-FFFF00) is the trick here, you see it depends on he
color for the tag you choose. Notice in this case that FFFF00 happens to be perfect yellow. For the other colors of tags you will have to
change (lc-FFFF00) to (lc-######) depending on the hex color value of the tag.
Because this seems to be a nasty problem, I am going to write a new blog post citing your comment (if you don’t mind) with better instructions than these.
[...] ihr schon mal was geändert? Wenn ja – was? Meine Inspiration habe ich übrigens in diesem Blogbeitrag gefunden. Wer selber spielen möchte – die Farben sind hexadezimal angegeben. Eine [...]
Thanks a ton!! I could not figure out how to change the background colors on labels for the life of me, no matter how many times I tried to add a chrome file. You really made me so incredibly happy by showing the way with Styles. The only thing is that you have to simply select to insert an XUL file in the beginning, the option already being prepopulated. Otherwise, it will not recognize the code. Thank you again!!!
@Jessica:
You’re welcome! There is a full post on exactly what you are talking about at: http://eriwen.com/thunderbird/jazz-up-thunderbird-tags/
Tried Firebird, hated it, erased it. I mean it creates directory names with spaces in them. It also uses some cumbersome db format for storing stuff. Worst of all it does not understand mbox. In order to read auto generated mail from my system (cron and other dameons, security auditing tools etc.) I still had to call up mailx or mutt. So in the end I simply staid with mutt and good riddance to Firebird.
I’ve managed to do most of what I wanted to effect changes to Thunderbird, but one secret handshake I simply cannot find anywhere is how can I change the color that the spell-checker highlights (reverses) the suspicious text with? The default is a light gray, which doesn’t show up very well. I don’t trust spell checkers to make changes without checking what they want to change first — so when it finds something it wants to change I want to quickly locate the supposedly misspelled word being flagged in the text of the message I am composing and the default light gray doesn’t work well for thse old eyeballs. Any way to change that light gray reverse/highlight to something that leaps off the page like dark blue or red?
Hi, it’s me again. Thank you for that second post as well, it was really helpful understanding the html codes of the colors. The only thing I was curious about was if color coding was possible for tasks by category. Although a color for a category may be selected, according to Mozilla, Lightning still does not support coloring tasks. There is an extension called Chromatasks that purports to do this, but it doesn’t work. I feel this must be possible with the same process for the tags?
Hello this is Mike from houston, you got a nice forum here with some good topics and I hope you can help me with some tehnical problems
When I start my webbrowser, Im using internet explorer its some weird search engine. It used to be google and everytime I change
it back to google its okay. Until I start me pc again, then the wrong search engine is back. How can I get rid off this? Its getting annoying
and there hase to be a way right?
Well thats it, stupid problem and I hope that it has a nice easy solution that you can come up with, Im getting all your replays to my email
so I´ll keep an eye on the topic, take care.
This post was EXTREMELY helpful…. thank you so, so much. If I may ask, I used it on mac, setting it up for a client, but I can’t increase the font beyond a certain size (i think about 16) without the letters getting cut off and top and bottom due to the actual background cells not being tall enough. have you found a command for this height that I can add to the css?
Unfortunately, I have not. But, I do have a tutorial on how to use the DOM inspector to figure it out. http://eriwen.com/firefox/use-the-dom-inspector/ (same as Firefox).
The solution will likely not be easy, but I hope you find it :)
We’ve been anxiously awaiting Google’s web browser’s addons for forever. Up to now I’ve installed and used 5 extensions and am awed with the extensions. FF has recently had a slow reaction time & changes are welcomed.
Eric:
Your userChrome tweaks have been very helpful.
Are you aware of a comprehensive guide to userChrome settings for Thunderbird? I’ve been working with the examples that you’ve provided, but without a bit better understanding of what I’m doing, I’m having trouble figuring out how to do new things.
Thanks very much,
Patrick
Unfortunately, I am not aware of a comprehensive guide. Of course, it’s worth some searching as your Google-fu may be better than mine ;)
Eric:
From what I’ve found so far, my google-fu’s not going to get me very far. Any ideas about how I might use one set of fonts for my mailbox display and another for the left sidebar?
Thanks again,
Patrick