Change Thunderbird "Correspondents" colum icons?

User Help for Mozilla Thunderbird
Elhem Enohpi
Posts: 18
Joined: March 19th, 2016, 8:49 am

Post Posted March 19th, 2016, 9:09 am

How can I use userChrome.css to access the arrow icons in the new "Correspondents" column in Thunderbird? I like the idea of it, but it's too hard to tell the left and right arrows apart.

I'd like to replace them, or change the background colour of the row based on the direction, or at least just hide the left arrow. But I can't find any css selectors for them, and the DOM inspector doesn't help. I don't really know where to start looking in (or even find) the Thunderbird source code for it. Anyone? Thanks...


User avatar
Posts: 117087
Joined: September 23rd, 2004, 8:57 pm
Location: Somewhere on the right coast

Post Posted March 19th, 2016, 5:18 pm

Moving to Thunderbird Support.

Frank Lion

User avatar
Posts: 19313
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted March 19th, 2016, 6:57 pm

Elhem Enohpi wrote: But I can't find any css selectors for them, and the DOM inspector doesn't help.

Yep, DOMi gave use just 'treechildren' for the whole lot, right?

Trawl through the app code and you'll be at it forever, so with trees you have to get inventive. This one was relatively simple, as it was a new feature - Google search gives you the Bug number and then look at the Diff file for the fix - ... ction=diff

Ignore all .js, xul files and look for the .css files where they would have to style their stuff and this gives me the IDs I need. As I can see that they are using a 16x16px -moz-image-region for those arrows, then the simplest fix is just to give one of the arrows a background (for demonstration I've used an obvious red, but a subtle hex colour should be substituted in your stuff).

The fix? -

Code: Select all
/*Franks show Corr arrows clearer fix...*/
treechildren::-moz-tree-image(correspondentCol, incoming) {
   background: red !important; }

Advanced bit - (glad you spotted this btw, as it means that I need to fix this on my stuff as well.)

On my latest theme, I use a grad background there that is roughly #C5CCD3, meanwhile the arrows are a unhelpful grey. I can either go darker or lighter and to make it look neater I've done a circle instead of the square there (the border radius is always half the height of the width/height to get a circle.

So, I end up with this -

Code: Select all
/*treechildren::-moz-tree-image(correspondentCol, incoming) {
   background: #797F85 !important;
   border-radius: 8px !important;

treechildren::-moz-tree-image(correspondentCol, incoming) {
   background: #E1E6EB !important;
   border-radius: 8px !important;

...and of the two, the lighter one looks better. Job done. :)
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

Elhem Enohpi
Posts: 18
Joined: March 19th, 2016, 8:49 am

Post Posted March 20th, 2016, 7:42 am

Perfect, exactly what I was looking for! I had actually made my way to the themes folder in the source code using mxr, but didn't quite find the target - thanks for the hunting tips!

I'm aiming for a very flat look, so I didn't change the background colour. I ended up with this, seems to be much more legible than before:

Code: Select all
/* Correspondents column - hide arrow for incoming messages */
treechildren::-moz-tree-image(correspondentCol, incoming) {
   list-style-type: none !important;
   list-style-image: none !important;
/* keep arrow, make column's text italic for outgoing messages */
treechildren::-moz-tree-cell-text(correspondentCol, outgoing) {
   font-style: italic;

Return to Thunderbird Support

Who is online

Users browsing this forum: Google [Bot], Google Adsense [Bot] and 10 guests