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
    Commented Jan 5, 2020 at 8:22
  • @intika - solution using UserChrome.css would be better, because it would persist when Thunderbird is upgraded. Commented Jan 5, 2020 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
    Commented Jan 5, 2020 at 10:56
  • i added a quick answer for the UserChrome.css needed code :)
    – intika
    Commented Jan 5, 2020 at 11:27
  • i edited the answer for a more suitable code ;)
    – intika
    Commented Jan 5, 2020 at 13:53

2 Answers 2

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

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 Commented Jan 5, 2020 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
    Commented Jan 5, 2020 at 19:21
  • here is how it looks like. solution 2: ibb.co/G90GXwH, and example: ibb.co/Lzg8D24 Commented Jan 6, 2020 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 ? Commented Jan 6, 2020 at 5:34
  • 1
    thank you. Everything works perfectly now. Commented Jan 7, 2020 at 4:27

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .