Make Custom Thunderbird Labels Stand Out
If you followed the Thunderbird Labels modification I put up a few days back, you may have found out that it didn’t work for custom labels/tags. Yes, I knew that, but wanted to start off with the basic labels. Here is a quick tutorial on how to get your custom ones up and running.
What you’ll need to do is add the following lines of code to your CSS file. The code below accounts for one label/tag color, which, in this example, happens to be orange. You can see where the orange color is represented by the orange HEX colors. The lighter orange HEX number is for the background of the un-selected, labeled message.
treechildren::-moz-tree-cell(lc-FF9900) { border-bottom:1px solid #FF9900 !important; background-color: #FFCC99 !important;}
treechildren::-moz-tree-cell-text(lc-FF9900) { color: #000 !important; }
treechildren::-moz-tree-cell(lc-FF9900, selected) { background-color: #FF9900 !important; }
treechildren::-moz-tree-cell-text(lc-FF9900, selected) { color: #FFF !important; }
Of course you’d need to find the label colors before you know which HEX colors to put in. I’ve listed all of Thunderbirds colors below with the 50% opacity, lighter, colors next to them. You’ll have to pull out the colors yourself. I thought about coding all possible label/tag colors but that’d take me forever.
If you are on a Mac, you can load up the DigitalColor Meter application (inside the Utilities folder) and you’ll be able to quickly sample the color above and get it’s HEX number. Windows users can check out Color Cop and see if that works. Really, I have no idea what’s best on Windows, I just Googled something. If you have a better suggestion, post it in the comments below.
This tutorial should get you well on your way to creating custom tag/label colors with my custom style. If you code a few yourself, post the code below so we can all enjoy it.
[...] What about the labels/tags that I created? [...]
- Make Thunderbird’s Labels Stand Out » Blog on a Stick May 2nd, 2007 at 6:58 am
WordPress 2.0.4
Ok, if we all work together we can knock this out quickly. Here is the code for all the colors on the first row of the grid shown above. I will post additional code as I create it. If others create code, please post it here as well.
treechildren::-moz-tree-cell(lc-FFFFFF) { border-bottom:1px solid #FFFFFF !important; background-color: #FFFFFF !important;}
treechildren::-moz-tree-cell-text(lc-FFFFFF) { color: #000 !important; }
treechildren::-moz-tree-cell(lc-FFFFFF, selected) { background-color: #FFFFFF !important; }
treechildren::-moz-tree-cell-text(lc-FFFFFF, selected) { color: #FFF !important; }
treechildren::-moz-tree-cell(lc-FFCCCC) { border-bottom:1px solid #FFCCCC !important; background-color: #FFE6E6 !important;}
treechildren::-moz-tree-cell-text(lc-FFCCCC) { color: #000 !important; }
treechildren::-moz-tree-cell(lc-FFCCCC, selected) { background-color: #FFCCCC !important; }
treechildren::-moz-tree-cell-text(lc-FFCCCC, selected) { color: #FFF !important; }
treechildren::-moz-tree-cell(lc-FFCC99) { border-bottom:1px solid #FFCC99 !important; background-color: #FFE6CC !important;}
treechildren::-moz-tree-cell-text(lc-FFCC99) { color: #000 !important; }
treechildren::-moz-tree-cell(lc-FFCC99, selected) { background-color: #FFCC99 !important; }
treechildren::-moz-tree-cell-text(lc-FFCC99, selected) { color: #FFF !important; }
treechildren::-moz-tree-cell(lc-FFFF99) { border-bottom:1px solid #FFFF99 !important; background-color: #99FF99 !important;}
treechildren::-moz-tree-cell-text(lc-FFFF99) { color: #000 !important; }
treechildren::-moz-tree-cell(lc-FFFF99, selected) { background-color: #FFFF99 !important; }
treechildren::-moz-tree-cell-text(lc-FFFF99, selected) { color: #FFF !important; }
treechildren::-moz-tree-cell(lc-FFFFCC) { border-bottom:1px solid #FFFFCC !important; background-color: #FFFFE6 !important;}
treechildren::-moz-tree-cell-text(lc-FFFFCC) { color: #000 !important; }
treechildren::-moz-tree-cell(lc-FFFFCC, selected) { background-color: #FFFFCC !important; }
treechildren::-moz-tree-cell-text(lc-FFFFCC, selected) { color: #FFF !important; }
treechildren::-moz-tree-cell(lc-99FF99) { border-bottom:1px solid #99FF99 !important; background-color: #CCFFCC !important;}
treechildren::-moz-tree-cell-text(lc-99FF99) { color: #000 !important; }
treechildren::-moz-tree-cell(lc-99FF99, selected) { background-color: #99FF99 !important; }
treechildren::-moz-tree-cell-text(lc-99FF99, selected) { color: #FFF !important; }
treechildren::-moz-tree-cell(lc-99FFFF) { border-bottom:1px solid #99FFFF !important; background-color: #CCFFFF !important;}
treechildren::-moz-tree-cell-text(lc-99FFFF) { color: #000 !important; }
treechildren::-moz-tree-cell(lc-99FFFF, selected) { background-color: #99FFFF !important; }
treechildren::-moz-tree-cell-text(lc-99FFFF, selected) { color: #FFF !important; }
treechildren::-moz-tree-cell(lc-CCFFFF) { border-bottom:1px solid #CCFFFF !important; background-color: #FFCC99 !important;}
treechildren::-moz-tree-cell-text(lc-CCFFFF) { color: #000 !important; }
treechildren::-moz-tree-cell(lc-CCFFFF, selected) { background-color: #CCFFFF !important; }
treechildren::-moz-tree-cell-text(lc-CCFFFF, selected) { color: #FFF !important; }
treechildren::-moz-tree-cell(lc-FF9900) { border-bottom:1px solid #FF9900 !important; background-color: #E6FFFF !important;}
treechildren::-moz-tree-cell-text(lc-FF9900) { color: #000 !important; }
treechildren::-moz-tree-cell(lc-FF9900, selected) { background-color: #FF9900 !important; }
treechildren::-moz-tree-cell-text(lc-FF9900, selected) { color: #FFF !important; }
treechildren::-moz-tree-cell(lc-CCCCFF) { border-bottom:1px solid #CCCCFF !important; background-color: #E6E6FF !important;}
treechildren::-moz-tree-cell-text(lc-CCCCFF) { color: #000 !important; }
treechildren::-moz-tree-cell(lc-CCCCFF, selected) { background-color: #CCCCFF !important; }
treechildren::-moz-tree-cell-text(lc-CCCCFF, selected) { color: #FFF !important; }
treechildren::-moz-tree-cell(lc-FFCCFF) { border-bottom:1px solid #FFCCFF !important; background-color: #FFE6FF !important;}
treechildren::-moz-tree-cell-text(lc-FFCCFF) { color: #000 !important; }
treechildren::-moz-tree-cell(lc-FFCCFF, selected) { background-color: #FFCCFF !important; }
treechildren::-moz-tree-cell-text(lc-FFCCFF, selected) { color: #FFF !important; }
- Rassi May 2nd, 2007 at 8:10 am
Mozilla Firefox 2.0.0.3 - Windows XP
I think that the whole concept of how to apply this to custom tags is elusive in that it’s not clearly stated that the colors in hex that appear in the CSS shown above have to MATCH the colors of custom tags. Whichever ones match are the ones that will have the background fill applied.
Here’s an example:
1) In TB, go to Tools > Options > Tags
Replace the hex color values in the CSS you pasted in with the hex value that you got from your color picker when you made the new tag. Click “Save” to save your changes.
2) Click “Add” to make a new custom tag (or “label”)
3) Give the tag a name and select a color for it
4) When you select the color, it’s a good idea to have your color picker running (I use Iconico’s ColorPic for Windows), and remember the hex number of the color you choose. When you’re done adding the new tag, click OK to save your changes.
5) To add that new tag to Stylish, click the Stylish icon, select “Manage Styles…” and either select the style you want to add to and edit it, or make a new one by clicking “Write…”
6) If you’re making a new style, give it a name in the “Description” field, otherwise go to the next step
7) With the style you want to add to selected, click “Edit…” In the code window, add the CSS lines mentioned in the “Make Custom Thunderbird Labels Stand Out” tutorial
For each custom tag that you create, make sure to add those 4 CSS lines to your label definition in Stylish, keeping in mind that you need to match the hex values as mentioned above, otherwise the old styling of tagged messages will be in effect.
- Keith May 2nd, 2007 at 10:03 am
Mozilla Firefox 2.0.0.3 - Windows XP
Thanks for both the tutorial and the comment (Keith).
- CheGordito May 2nd, 2007 at 10:18 am
Mozilla Firefox 2.0.0.3 - Windows XP
Still no luck, All well.
- Steve May 2nd, 2007 at 10:30 am
Mozilla Firefox 2.0.0.3 - Windows Vista
I have now completed all the labels.
They can be downloaded from my website here:
http://the-daily-poll.com/wp-content/uploads/2007/05/complete_twistedmc_labels.txt
- Rassi May 2nd, 2007 at 2:39 pm
Mozilla Firefox 2.0.0.3 - Windows XP
Steve, where are you running into an issue?
Keith - Thanks for that.
I also noticed that when writing a message, you can select text color. When doing this, it’ll give you the HEX color right away. No additional tools needed.
- Thomas May 2nd, 2007 at 7:45 pm
Mozilla Firefox 2.0.0.3 - Mac OS X
Thanks Rassi!! I haven’t tried them all, but your code looks pretty good.
- Thomas May 3rd, 2007 at 5:51 am
Mozilla Firefox 2.0.0.3 - Mac OS X
Rassi, thanks a lot - that saves a great deal of time!
CheGordito, Thomas - you’re welcome =)
- Keith May 3rd, 2007 at 7:08 am
Mozilla Firefox 2.0.0.3 - Windows XP
Thanks so much to Rassi for the labels code! I’m new to Thunderbird, but installed this no problem into Stylish and it works absolutely beautifully!!!
- Lori August 27th, 2007 at 1:40 am
Internet Explorer 7.0 - Windows XP
To verify the tag color, this is what I did:
1. Browse to Options > Display > Tags
2. Take a screenshot (using PrtScn)
3. Paste it in Photoshop or Paint
4. Use the Eyedropper (color picker) tool to select the color.
Hope it help.
- Ebrahim September 2nd, 2007 at 3:03 am
Mozilla Firefox 2.0.0.6 - Windows XP
Shouldn’t it be possible to automate this with an extension? It would be awfully nice if you could add a button in TB’s Tools / Options / Display / Tags dialog that allowed you to enable the “stand out” Tag coloring and pick the colors from a color picker dialog.
I wish I knew how to do this, and had time to do it.
- Bill October 19th, 2007 at 10:47 pm
Mozilla Firefox 2.0.0.8 - Windows XP
Yes, an extension would probably be possible, but I’m not sure it’d give much more benefit than the CSS currently does.
- Thomas October 23rd, 2007 at 5:43 am
Mozilla Firefox 2.0.0.8 - Mac OS X
Hi,
how can I add a comment (if possible) to these lines of code?
As you understood I’m not a programmer and I have no idea how CSS works, I just copy and past the code and … it works fine.
It’s hard to choose the right color but this is only a matter of taste.
Thanks in advance.
- Domi December 14th, 2007 at 4:30 pm
Mozilla Firefox 2.0.0.11 - Windows XP
Another (easier) way to get your currently used hex values is to go into about:config (on TBird 2.0.0.9 go to Help > about:config, or shortcut Alt + C) and in the filter box type (w/o the quotes) “label” or type in “tag” and you will see in the list something like:
mailnews.labels.color.2 the value column will be in hex (e.g. #ff9900)
For tags you’re looking for a line like:
mailnews.tags.$label1.color the value column will be in hex (e.g. #FF0000).
That hex value is what you want!
Twister, thanks for a great tip!
J.
- Azariatech January 2nd, 2008 at 12:38 am
Mozilla Firefox 2.0.0.11 - Windows XP
[...] un nome a piacere. Nel secondo campo invece dovrete copia-incollare le quattro righe di codice CSS che trovate a questa pagina avendo cura di sostituire al codice-colore proposto nell’esempio (FF9900) quello della vostra [...]
- Mail alla grande con Thunderbird « Sudoaptget’s Weblog January 10th, 2008 at 4:23 pm
WordPress MU
AWESOME! Thank you so much for this - I just sent you a beer by Paypal.
- Chuck March 13th, 2008 at 10:11 am
Mozilla Firefox 2.0.0.12 - Windows XP
Mmmm beer. Thanks!
- Thomas March 13th, 2008 at 8:11 pm
Safari 523.15 - Mac OS X
Hey what if i want to write the data to that file directly, means i m writing a thunder bird application to archive the mail and i want if the mail has been archived then a custom tag is to be write to that mail, for that i want generate tag at runtime and apply it on the mail…..can u help me out on this one ???
thanks in advance.
- jack April 10th, 2008 at 5:57 am
Mozilla Firefox 2.0.0.3 - Ubuntu Linux
Sorry Jack, can’t help you there.
- Thomas May 2nd, 2008 at 6:53 am
Safari 525.18 - Mac OS X