Change Thunderbird "Correspondents" colum icons?

[Elhem Enohpi]

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

[DanRaisch]

Moving to Thunderbird Support.

[Frank Lion]

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 -

https://bugzilla.mozilla.org/attachment ... 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.

[Elhem Enohpi]

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