Thunderbird 115: CSS Customization

Wisewiz · Sep 13, 2023

@das10 Tried it; didn't like it. Took it back out.

But noticed another oddity: the Selected color is the default old blue, not either of my theme colors. The hover color is fine: it's just the pale grey I use for hover in the Message pane. But the Selected color looks out-of-place. Can you try something to fix that? I don't care which of the dark/lighter colors; I can change that later if I want to. Just something other than default weak-blue?

Wisewiz · Sep 13, 2023

I futzed together a new rule based on the "selected li" rules elsewhere, and it had no effect. Not surprising. When the ignorant try to invent the wheel, it isn't well formed, and doesn't get anything anywhere. It's a good thing Thunderbird isn't harmed by malformed userChrome files. I've tried a bunch of "fixes," a few of which worked, and most of which didn't at all. Fortunately, all I have to do is put back my latest working userChrome in place of the faulty one, restart TBird, and off we go to the races, on wheels. Wheels invented by someone other than yours truly.

lafargeotte · Sep 14, 2023

If anyone wants to reduce the size of their message thread pane, add this to your userchrome file:

/* Thread pane - reduce min-height*/
#threadPane {
min-height: 150px !important;
}

das10 · Sep 14, 2023

Wisewiz; re: Selection color inside Contacts Pane.

Because the Write window is separate from the main Thunderbird window, it is proving surprisingly difficult to view & select individual elements within that particular write window using just the DevTools with the iframe inspector. And a search of the .CSS resource files isn't helping much. But I'll keep trying.

Wisewiz · Sep 14, 2023

I can’t offer you Omaha steaks for all this effort, but you have my sincere gratitude, and that of the other people who will learn from your work. Thanks, m’fren’.

das10 · Sep 14, 2023

lafargeotte; thanks for the code for the min thread pane height. As a curiosity, I had already set an experimental minimum dimension for the Classic/Wide & Vertical pane as soon as I started testing the new Tbird interface, as it was just wasting too much space on my 'relatively' small screen:

Code:

#threadPane {
  min-height: 80px !important;     /*classic view*/
  min-width:  40px !important;     /*vertical view - but overlaps into the column heading when done too small */
}

das10 · Sep 14, 2023

Wisewiz; something to try only if & when you have free time - there's no hurry.

CSS for the Write window Contacts panel.

Code:

/*         Write window Contacts - Hover color.              */
#abResultsTree  > treechildren::-moz-tree-row(hover) { 
  background-color: #6699CC         !important; 
}

/*         Write window Contacts - Selected color.           */
/* note: use a light color here (when using the default      */
/* System theme, the text color will be white when selected  */
/* & black when focus moves away from Contacts List).        */
/* - can't find a way to change text color.                  */
#abResultsTree  > treechildren::-moz-tree-row(selected) { 
  background-color: lightsteelblue  !important;
  outline:          none            !important;
}

Wisewiz · Sep 14, 2023

@das10

Hey, man! If I didn't have free time, I'd have no time at all.

I'll work it in a few and report.

Oblias · Sep 14, 2023

das10 said:
Are you using the Thunderbirds DevTools to debug your own userChrome.css "live" ?

That way you just test by deleting any rules you think are duplicates to see if it affects the Chrome elements without having to keep saving your changes, closing Thunderbird, and re-starting it again over and over.

(I can't recall if it was you who mentioned actually using it in Ghot's "Taming the Beast (Firefox)" thread on WindowsTenForums, but that's where I first got the idea of using the DevTools to make live changes to userChrome.css).

eg: Wisewiz's userChrome.css live in use.View attachment 70584

The DevTools window showing his userChrome.css.
View attachment 70585

I'm trying to get the Developer Toolbox to start in v115.2.2 but I must be doing something wrong. I go to my Menu - Developer Tools - Developer Toolbox, but nothing at all happens when I click on that option.

Then I open the Error Console, and it gives me this message:

Could not start Browser Toolbox, you need to enable it. Launcher.sys.mjs:62:15
init resource://devtools/client/framework/browser-toolbox/Launcher.sys.mjs:62
oncommand chrome://messenger/content/messenger.xhtml:1

Would someone help me get the devtools working? I would like to use that for color change preview. Thanks!!

Update: I do remember about a week ago getting this message when I tried to start devtools, and I clicked on 'Disable'. That is probably the source of my problem, yes? But I still don't know how to go about getting it to work again.....

das10 · Sep 14, 2023

This is how I am using Developer Toolbox in Thunderbird.

SET the following preferences for the Devtools by going into:

"Advanced Preferences" (located at the bottom of the General section in Tools > Settings).
==========================================================

Code:

devtools.chrome.enabled                          set to true
devtools.debugger.remote-enabled                set to true
devtools.inspector.showAllAnonymousContent      set to true

To start the DevTools, you can either use the menu or the Shortcut "Ctrl + Shift + i".

To allow the DevTools debugging connection to the main Thunderbird window using a Local connection, you'll be asked to confirm whether you want to allow that connection.

Note that, that small confirmation dialog box may get hidden behind the main Thunderbird window, so you may require to alt+tab to it to press "OK".

Or, you can set the following preference to false in the Advanced Preferences to avoid that confirmation and let the connection through without a prompt. (You can reset it back to "True" after you are all done with the DevTools.)

Advanced Preferences.

Code:

devtools.debugger.prompt-connection             set to false

The Devtools window should appear with the above instructions.

In the 3dot configuration icon on top right of the DevTools window which opens, tick "Disable Popup AutoHide", so all the popups (eg. menus) stay open on the screen even if you move away from the main Thunderbird window.

To inspect CSS for elements use the pointer arrow on the top left of the DevTools, and click on the items of interest in the Thunedrbird window.

To debug your own userChrome.css, click on the menu labelled "{} Style Editor" on the top row of the DevTools.

You should see a list of all the Style Sheets applicable to Thunderbird, including your own css file/s.

Either scroll down the list to find your own userChrome.css (or any other user created css files), or use the filter dialog at the top of the list.

This shows your own userChrome.css and you can edit it in the right hand side panel, enabling you to view the changes "Live" in the main Thunderbird window.

(pn: You can save any changes you make by pressing the "Save" button in the list panel, but make sure you already have a backup copy of your original userChrome.css - just in case).

Wisewiz · Sep 14, 2023

@das10

I think I'm okay with the product of the rules the way I've fiddled them now. In Contacts, I have this now:

The upper is Selected; the lower, Hover. I dunno. If I could get Hover to show white text, it would be better, but it's fine with black.

For the Folder tree, I've messed around until I have this, and I'm okay with it this way:

I don't mind the fact that the Hover and the Selected are the same color; it's obvious which is which when I'm actually scanning the folder pane.

Oblias · Sep 14, 2023

@das10

Thank you VERY much for that detailed information. I'm off to give it a try, and hopefully it will fire up this time!

das10 · Sep 14, 2023

Wisewiz; I tried all the common rules for changing the color of the text in the Contacts panel for either "Selected" or "Hover", but just couldn't do it, unlike the folder pane, thread pane etc. where it is simpler.

Oblias; I am presuming that you have already set the following advanced preference

Code:

toolkit.legacyUserProfileCustomizations.stylesheets  set to true

and are already able to use userChrome.CSS ?

Wisewiz · Sep 14, 2023

All's well as is. Happy camper here.

Oblias · Sep 14, 2023

@das10

Works perfect now, after I changed those Advanced Config settings, DevTools works great. There is one thing I'd like to be able to do, and that is to change the background color of a message that I'm reading. Thing is, I do not know the technical term for that pane that I actually read the message in. I've tried changing colors in these sections, but no joy:

Code:

/* Message pane */
tr[is="thread-row"]:hover {
  background-color: #2f261d !important;
}
[is="tree-view-table-body"] > .selected {
  background-color: #2f261d !important;
}
[is="tree-view-table-body"] > .selected:hover {
  background-color: #2f261d !important;
}


/* Message Pane - Selected Message background/foreground-color */
tr.selected {
  background-color: #2f261d !important;
  color: white !important;
}


/* Message Pane - Hover Message background/foreground-color */
tr:hover {
    background-color: #2f261d !important;
  color:            white !important;
}

What is the actual name of the pane where I read a selected message? TIA!

Wisewiz · Sep 14, 2023

Okay, so here are my finals to date:
This

CSS:

* folders list background - this is for the folder tree  */
#folderPane {
   background-color: #336699 !important;
   color:            white         !important;
}

/* folders list HOVER color */
#folderTree li > .container:hover {
  background-color:  #4080BF    !important;
  color:            white    !important;
}

/* folder selected color */
#folderTree li.selected  > .container {
  background-color: #29116e  !important;
  color:            white    !important;
}

gives me this:

And this:

CSS:

/* Message Pane - Hover Message background/foreground-color */
tr:hover {
  background-color: #4080BF  !important;
  color:           white  !important;
}

/* Message Pane - Selected Message background/foreground-color */
tr.selected {
  background-color: #29116e  !important;
  color: white !important;
}

gives me this:

and finally, this:

Code:

/* Contacts - Side panel */
#abContactsPanel,
#contactsSidebar .sidebar-header {
  background-color: #336699 !important; 
  color:            white !important;
}

/*         Write window Contacts - Hover color.              */
#abResultsTree  > treechildren::-moz-tree-row(hover) {
  background-color: #4080BF         !important;
}

/*         Write window Contacts - Selected color.           */
/* note: use a light color here (when using the default      */
/* System theme, the text color will be white when selected  */
/* & black when focus moves away from Contacts List).        */
#abResultsTree  > treechildren::-moz-tree-row(selected) {
  background-color: #29116e  !important;
  color:         white  !important;
  outline:          none            !important;
}

gives me this:

And that, as Forrest said, is all I have to say about that.

Huge thanks to @das10 for the research, testing, and posting of all the helpful answers.

das10 · Sep 14, 2023

Oblias;
I don't think the message pane (or message box?) will be customizable through userChrome.css.

For the background of the message pane, I personally have only come across the following method which only works for viewing messsages as either "Plain Text" or "Simple Html view" and which can be set by going to:

Settings > General > Fonts & Colors - Select the Colors Button and then in the popup dialog box, untick "Use System Colors" and click on the "Background" button to select a different color.

I don't know if there is any method to change the color when viewing html messages as "Original Html", although there very well might be (probably using userContent.css).

Oblias · Sep 14, 2023

das10 said:
Oblias;
I don't think the message pane will be customizable through userChrome.css.

For the background of the message pane, I personally have only come across the following method which only works for viewing messsages as either "Plain Text" or "Simple Html view" and which can be set by going to:

Settings > General > Fonts & Colors - Select the Colors Button and then in the popup dialog box, untick "Use System Colors" and click on the "Background" button to select a different color.

I don't know if there is any method to change the color when viewing html messages as "Original Html", although there very well might be (probably using userContent.css).

Alright then, I'll go searching where you suggested, and others if need be. If I find the setting, I'll post back with the solution. Thank you for all your help!

Edwin · Sep 14, 2023

On Thunderbird 119.0a1, if I use Windows System Theme, things are a bit messed up!
With Dark Theme everything looks okay except the Min/Max/Close buttons...

Oblias · Sep 14, 2023

Edwin said:
On Thunderbird 119.0a1, if I use Windows System Theme, things are a bit messed up!
With Dark Theme everything looks okay except the Min/Max/Close buttons...

View attachment 71087

Same here, but then since I'm basing everything off of the .css you were kind enough to share with me, that would make sense.