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!
Popularity: 20% [?]
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.
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/