Solved How to change hover color in New Email Windows for email address

How to change hover color in New Email Windows for email address
link for: Screenshots

Thunderbird version 128.3.1
In the new message window when I move my cursor over the email address list my Windows titlebar orange color shows up as half transparent. When I click on an address it uses my light blue color I use in the main window for hover and selected. #52aaff

Question: How to change the hover color in the new email window to match what I have in the main window?

Do you mean the Write New Message Window? If so, maybe try something like this?


Works in tbird 128 (not 115).

Thanks a lot! This works .

This is for the Write New Message Window.
I removed the border and used these colors for my hover: #66CDAA (light green) and for selected: #52aaff (light blue).
How did you find the names like:
#abResultsTree tbody tr:is(.current,.selected) and #abResultsTree tbody tr:hover ?

I have looked over here but do not know how to use.
Hamburger menu button (3 lines)> Tools> Developer Tools
or Ctrl + Shift + I > click OK button>
ctrl + F for search box.

My Contacts/address book colors.

I'll let you know the details later, time permitting.

Normally in the Browser Toolbox for Thunderbird, you can inspect the "Chrome" elements by clicking on the picker icon at the top left of that Toolbox and check the code in the Inspector Tab (on the left) & the Inspector Tab Rules Panel (on the right).



However, the Write Email Window and the Address Book Panel there, are in separate iFrames, so in this case we need to pick the Address Panel using the "iFrame selector icon" (on the top right hand side), "after" opening a Write Message Window.


In the resulting Inspector view on the left, when we hover the mouse over the various blocks of elements, it highlights the related element in the main Address Panel, and also gives us a rough idea of the element id and class names that are used there.

Copy all the Code you think might be relevant for the address rows eg. right cick the element block and select Copy Path (in other cases we can even start testing the elements properties directly in the right hand Rules panel - although I couln't see anything there for the email rows so we will test using the #abResultsTree elements).


We next need to "live" test the css in our own userChrome.css file; so close & re-open the Browser Toolbox, and this time select the Style Editor Tab and filter the list to get to our own userChrome.css file.

As soon as we enter #abResultsTree into the userChrome.css file, we see a nice helpful dropdown with all the AutoSuggest class names related to the #abResultsTree and if you follow on through a particular class it will even show you whole chains of classes. Then (for me at least) it is a matter of trial & error selecting the autosuggested names and see if we can get the address panel to respond to them using basic properties such as background-color, color etc.

As you may be aware, if the test css works, either copy it outside the Browser Toolbox to your own notes, or you can save it to your current (live) userChrome.css file using the Save button next to the name in left hand panel, but in any case always keep backups in case of an oops!


For further guidance you can always search for the codes related to the various elements in SearchFox. eg:

I am not an expert in using the Toolbox or CSS so this is only my point of view on testing.

#5 You should submit your walkthru to those running the site for a tutorial.

As I said, this is only my own methodology (with all its shortcomings) and barely touches on the capabilities/usage of either the Browser Toolbox or indeed CSS coding which plays an even more important part in getting one's own modified code to work. There are far more useful resources on the web including those from contributors on Reddit and Mozillazine.