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

I realized that this is probably more common than one might think. So I’m going to share my answer with all of you.

This customization goes back to Personalizing Thunderbird’s chrome, but note that you can also do this with the Stylish Add-on for Thunderbird. In this case it’s not necessary to dig into your userChrome.css file, but if you want to than here are instructions.

First you need to create some new tags in Thunderbird by going to Edit > Preferences > Display > Tags (Linux & Solaris) or Tools > Options > Display > Tags (Windows) and adding them.

Pay close attention to which color you picked so that you can find out the color value you need by hovering over this image –>

Open up userChrome.css or your New Stylish Script dialog and copy this code in there once for each tag you create.

/* Change these styles to make messages with your new tag shine */
/* Normal message row */
treechildren::-moz-tree-cell(lc-******) {
    border-bottom: 1px solid #FF0000 !important;
    background-color: #FFCCCC !important;
}
/* Message row text */
treechildren::-moz-tree-cell-text(lc-******) {
    color: #000000 !important;
}
/* Message row background when selected */
treechildren::-moz-tree-cell(lc-******, selected) {
    background-color: #FF0000 !important;
}
/* Message row text when selected */
treechildren::-moz-tree-cell-text(lc-******, selected) {
    color: #FFFFFF !important;
}

Now, we are going to need to replace ****** with hexadecimal (0-F) characters representing the color you chose. These colors are in the form RRGGBB with each hexadecimal pair representing the intensity of Red, Green, and Blue respectively. You can also completely customize the color, border and whatever else for this tag by changing the CSS within each selector in the code above.

You can also use Twister MC’s label colors (thank you Twister MC) but it’s good to know how to customize it however YOU want, because the customizations don’t stop there.

How have you tweaked the look of your tags in Thunderbird? Share in the comments!

Related posts:

1. Personalize your Thunderbird by changing it’s chrome
2. How to use the DOM Inspector to hack your Firefox UI
3. Early Adopters: Your Firefox 3 chrome tweaks are HERE

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;
}

I’ve also created a snippet for pretty labels on GitHub. Enjoy!

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!

Related posts:

1. Jazz up your new Thunderbird tags
2. Early Adopters: Your Firefox 3 chrome tweaks are HERE
3. Tweak chrome for a cleaner Firefox