2

I know Thunderbird UI is highly customizable through UserChrome.css.

For example, changing the color of the window bar can be done easily:

menubar, toolbar, nav-bar, #TabsToolbar > *{
  background-color: rgb(245,199,18) !important;
}

But where can I find the names of the elements that I want to change ?

For example, in the compose window, newer Thunderbird colors the whole header, the header itself and the input filed (everything is light grey).

enter image description here

Whereas, the older Thunderbird only colored the header, and left the user input field distinctly different:

(ignore the differences in color themes, ie light vs dark). The point is the distinct differentiation between the heading (ie From, To), and the actual email address typed by the user.

How can I find the name of the element, and change the color using UserChrome.css ?

I am using Thunderbird 68.3 on Debian Buster

enter image description here

5
  • i explained how and what on my answer, (i have to go) i'll add later on a solution with what you need to use in your UserChrome.css if you did not succeed to achieve it meanwhile ;)
    – intika
    Jan 5 '20 at 8:22
  • @intika - solution using UserChrome.css would be better, because it would persist when Thunderbird is upgraded. Jan 5 '20 at 9:52
  • yes sure, i agree, i just explained the whole thing in a dev perspective :) i am looking toward the proper code for UserChrome.css
    – intika
    Jan 5 '20 at 10:56
  • i added a quick answer for the UserChrome.css needed code :)
    – intika
    Jan 5 '20 at 11:27
  • i edited the answer for a more suitable code ;)
    – intika
    Jan 5 '20 at 13:53
1
+500

This can be achieved on UserChrome.css with

#msgSubject {
  background-color: -moz-field !important;
}

#msgIdentity {
  background-color: -moz-field !important;
}

.textbox-addressingWidget {
  background-color: -moz-field !important;
}

.dummy-row {
  background-color: -moz-field !important;
}

Or the alternative below... you can replace var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .4)) with the color you want (like red, blue, etc) for the dummy box at the left of the fields (cc, bcc etc.)

#msgSubject {
  background-color: -moz-field !important;
}

#msgIdentity {
  background-color: -moz-field !important;
}

.textbox-addressingWidget,
.dummy-row:not(:first-child) {
  background-color: -moz-field !important;
}

.addressingWidgetCell:first-child, 
.dummy-row-cell:first-child {
  background-color: var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .4)) !important;
}

Thunderbird v68.3.0 and v68.3.1:

Note that in a brand new installation you will need to unlock custom CSS usage with:

Settings/Options > Advanced > General > Config Editor...
toolkit.legacyUserProfileCustomizations.stylesheets > true

Then create a folder named chrome under the profile directory, then create the file userChrome.css (those are case sensitive)

Here is an updated css for TB v68.3.x using the color #e06d30...

#msgSubject {
  background-color: -moz-field !important;
}

#msgIdentity {
  background-color: -moz-field !important;
}

.textbox-addressingWidget,
.dummy-row:not(:first-child) {
  background-color: -moz-field !important;
}

.addressingWidgetCell:first-child, 
.dummy-row-cell:first-child {
  background-color: #e06d30 !important;
}

.addressingWidgetCell:nth-child(2), 
.dummy-row-cell:nth-child(2) {
  background-color: #e06d30 !important;
}
7
  • the first solution is almost perfect, but there is one problem which I was not able to solve. The other 2 address lines have the heading colro removed as well: screenshot here: ibb.co/k4qRzC8 Jan 5 '20 at 14:18
  • @MartinVegter yes i know this is why i posted the second solution which let you chose the color of the heading, you can for instance use the second solution with the color #be4b0e (captured from your screenshot) like so background-color: #be4b0e !important; i'll update the answer with the full code as example
    – intika
    Jan 5 '20 at 19:21
  • here is how it looks like. solution 2: ibb.co/G90GXwH, and example: ibb.co/Lzg8D24 Jan 6 '20 at 5:31
  • - also, after changing UserChrome.css, is there a way to reload Thunderbird, so that I don't have to restart each time ? Jan 6 '20 at 5:34
  • 1
    thank you. Everything works perfectly now. Jan 7 '20 at 4:27
2

For Thunderbird and Firefox, sources that are edited with UserChrome.css are available on /install-dir/omni.ja this file is a zipped directory (without compression) containing all the sources (javascript, xul, css etc.) of the displayed windows...

To edit/view the sources directly you can do

mkdir tmp; cd tmp;
cp ../location-of-install-dir/omni.ja .
unzip omni.ja

Edit what you want and/or get the value that you are looking for, then you can rebuild the file with

rm omni.ja #(remove the copied one)
zip -qr0XD omni.ja *

The file you are looking for is ./chrome/messenger/content/messenger/messengercompose/messengercompose.xul with its included css and xul indicated at the beginning of the file, like chrome://messenger/content/bindings.css and chrome://messenger/skin/messengercompose/messengercompose.css etc.

Chrome:// addresses permit to access files located on the omni.ja, extensions files, etc... those urls can be browsed with Thunderbird directly if you have extension like this or this unfortunately they are not yet updated to v68

Usually to identify element that you want to edit you can use the debugger (Ctrl+Shift+I) available under the menu: Tools > Developer Tools > Developer Toolbox, then use the dom object inspector top left button, but make sure to select the proper window first with the drop-down menu on the top-right (for instance messengercompose.xul for the new message window, it will be listed there if you opened a compose window).

Extension like Dom Inspector can be helpful here, but it is not yet compatible with v68

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.