Thunderbird 115: CSS Customization

Quandary · Oct 5, 2023

@MarcDwonn A screenprint of your issue would help explain what you are seeing.

das10 · Oct 5, 2023

I think MarcDwonn is referring to an issue where if there are more messages in the threadPane than can fit in it, then there is no space shown after the very last thread.

If so, and if using CSS, what you might try, is to give the "bottom border" of the very "last" message in the threadPane a large value, like so?

userChrome.css

Code:

/* solid white (or any other color) border on the last message in the thread pane) */
#threadTree tr[is="thread-row"]:last-of-type td {
  border-bottom:  20px solid white  !important;  
}

nb: Selecting that extra large border will select that message also.

Hope it works.

MarcDwonn · Oct 5, 2023

@das10
Thank you so much. That's exactly the problem. Next time i'll post a screenshot.
I set my value to 10px, and now it's perfect.

Is there a reason why the new version doesn't automatically show the last received message in the message list? Instead, when i select another messages folder, it scrolls up a dozen messages above the last one. It's still selected, but i have to scroll down to see it.

MarcDwonn · Oct 5, 2023

ShamrockRig said:
Ive always seen this thread and wondered, Is this a thread for email enthusiasts?

Power users hate it when the workflow breaks without their consent. Sometimes you just work by muscle memory, to quickly reach things. Your software should work for you, not the other way around. Funnily the latter is what happens every time when Mozilla breaks things again.

das10 · Oct 5, 2023

Also, this would create a similar space at the bottom of the threadpane without that space affecting the message selection as described above with regard to the thick border.

Code:

/* increase margin at bottom of the threadpane */
#threadTree > .tree-table {
  margin-bottom: 10px !important;
}

MarcDwonn · Oct 5, 2023

Seems like the cleaner solution. And maybe i'd need to click on empty space to deselect a message, so it's nice to have the option. Much appreciated.

click click · Oct 8, 2023

das10 said:
Of course, if you are able to use the developer toolbox (not that difficult), you can check for rule breakages very quickly.

I started using this and it is much more convenient to make changes. Thanks for mentioning.

I wanted to do this with Firefox 115 ESR too, but I don't see how to access the userchrome for editing like you do for Thunderbird. Can editing personalization chrome files be edited there too to see the results when making changes and how do they get accessed?

das10 · Oct 8, 2023

Using the Developer Toolbox in Firefox requires an extra step of first going into the Web Developer Tools and enabling "Remote Debugging" & "Browser Chrome toolboxes".

Go to DevTools (Ctrl + Shift + I):

Open "Customise Developer Tools" by pressing the 3dot icon on top right of the Developer Tools & then click on the Settings Cogwheel which appears in its menu, and then tick the following boxes in the Advanced Settings page:
"Enable remote bugging"
"Enable browser chrome and add-on debugging toolboxes"

Alternatively, you may skip the above steps if you have set those two options via about:config by setting the following two preferences.
about:config:
devtools.chrome.enabled pref to true
devtools.debugger.remote-enabled pref to true

In the main Firefox AppsMenu (the 3 horizontal bar icon on the top right), click on:
More Tools > Browser Toolbox.
OR
On the Firefox Tools menu on the menubar, click on:
Tools > Browser Tools > Browser ToolBox

As soon as you click that menu item, you should get a message box asking if you want to permit a remote debugging connection. Click OK, and the Browser ToolBox should be the same/similar to what you see with Thunderbird, and you can proceed using it the same way using the Inspector tool and your own userChrome.css / userContent.css.

If you want to inspect / customise the popup menus, you can also tick the "Disable Popup Auto-Hide" option in the Broswer Toolbox; this will ensure that the menus popups stay open even if you "alt tab" away from the main browser window.

nb: To enable userChrome.css in Firefox, hopefully, you will already have set the following in about:config.
toolkit.legacyUserProfileCustomizations.stylesheets = TRUE

update: clarification added (re #329).

click click · Oct 9, 2023

das10 said:
Using the Developer Toolbox in Firefox requires an extra step of first going into the Web Developer Tools and enabling "Remote Debugging" & "Browser Chrome toolboxes".

Go to DevTools (Ctrl + Shift + I):

Open "Customise Developer Tools" by pressing the 3dot icon on top right of the Developer Tools, and tick:
"Enable remote bugging"
"Enable browser chrome and add-on debugging toolboxes"

I don't see any of those options selecting the three dots. All I ended up doing was to set devtools.debugger.remote-enabled and then use Browser Toolbox

das10 · Oct 9, 2023

Sorry, I should have said click on the 3dot icon & then click on that Settings Cogwheel shown in your last image..

das10 · Oct 9, 2023

For those who do not want to set the debugging options through the gui, set the following preferences in about:config (for either Firefox or Thunderbird).

The main advantage of going through the gui is that you don't need to remember the precise names of all the about:config preferences.
about:config preferences:

Code:

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

This one (obviously) to enable the use of your own userChrome/userContent.
toolkit.legacyUserProfileCustomizations.stylesheets  true


This one to accept remote debugging connection without any prompt.
devtools.debugger.prompt-connection                  FALSE


Then, you can start the "Browser Toolbox" through the menu.

For Firefox, use
main Menu: Tools > Browser Tools > Browser ToolBox
For Thunderbird, use
main Menu: Tools > Developer Tools > Developer Toolbox.

When done with your customizations/inspections etc, you may if you want, reset the above about:config settings to their defaults (except the "toolkit.legacyUserProfileCustomizations.stylesheets" preference which you would need to keep using userChrome.css /userContent.css).

nb: As this thread is mainly about Thunderbird, if you want, you can find other information regarding Firefox customizations in the following Tenforums thread:

Firefox... taming the beast part 2 !! - Windows 10 Help Forums

First things first... stop Firefox from automatically updating. Simply unzip and drop this "distribution" folder into... C:\\Program Files\\Mozilla Firefox After manually updating Firefox this folder will be erased, so save a copy somewher

www.tenforums.com

RobDF · Oct 13, 2023

Good afternoon everybody,
I am pretty new there and I have seen some valuable examples on how to modify the aspect of Thunderbird 102-115 with userchrome.css.
Is there any suggestion on how to modify my confused userchrome.css to make it work with the new version of TB. It was working fine on 92 and had all the colors I needed for unread messages etc. Now unfortuantely I tried to modify it with my scarce capacity in CSS and I did not manage.
I think it does not read all the css command in the way they are compiled but unfortunately I do not know how to reconfigure them.
Thanks

------------------------------------------------------------------------------------------------------------------------------------------------------

@namespace url("Mozilla XML Namespace");

/*Background colour for message list*/
#threadTree > treechildren::-moz-tree-row {
background-color: #ffffff !important;
}

/*Alternate background color for lines */
#threadTree treechildren::-moz-tree-row(odd) {
-moz-appearance: none !important;
background-color: #dedee3 !important;
}

/* Change the color of folders with unread messages */
treechildren::-moz-tree-cell-text(hasUnreadMessages-true) {
color: #2b7307 !important;
}

/* Change the text color of unread messages to
* any color of your liking - just change the hex value shown here. */
treechildren::-moz-tree-cell-text(unread) {
color: #0d86ba !important;
}

#threadTree treechildren::-moz-tree-row(selected) {
background-color: #d3d3d3 !important;
}
#threadTree treechildren:-moz-tree-cell-text(selected) {
color: #000000 !important;
}

#threadTree treechildren::-moz-tree-row(selected, focus) {
background-color: #3388ff !important;
}
#threadTree treechildren:-moz-tree-cell-text(selected, focus) {
color: #ffffff !important;
}

-------------------------------------------------------------------------------------------------------------------------------

das10 · Oct 13, 2023

This is the closest I can get to what you want. I changed the selected message background-color slightly, otherwise the lightgrey in your original code blends in with the alternate row color.

userChrome.css (Ver 115+)

Code:

/* folders with unread messages */
.unread > .container > .name {
     color: #2b7307 !important;
}

/* Background colour for message list*/
/* nb: for System theme the default is already white */
#threadPane tr {
     background-color: #ffffff !important;
}

/* Alternate messages rows with different background color -zebra stripes-  - may need all these sets -otherwise on selection, font color becomes white */
/* can apply to table also                                                                                              */
#threadPane tr:nth-of-type(odd) {
     background-color: #dedee3 !important;
} 
/* messages hover color  */
#threadPane tr:hover {
     background-color: #bfbfbf !important;
}

/* message selected colors */
#threadPane tr.selected {
  background-color: #909090 !important;
  color: #ffffff !important;
}

/* star icons and other icons in "selected" messages */ 
[is="tree-view-table-body"] > .selected button > * {
     stroke: white !important;
}

/* Unread messages color */
:root {
    --thread-pane-unread-color: #0d86ba !important; 
}

Hopefully, it might give you more ideas on what you need.
btw: Welcome to ElevenForum.

(Upated slightly).

Wisewiz · Oct 29, 2023

@das10 G'morning! I noticed you were here, so I thought I'd impose again. Here goes: (I am so pleased with the 115 version I have and the customizations you discovered and devised for 115 that anything I ask about from here on in is going to be relatively trivial.) In the folder pane, I use a dark background and white icons, and that works for me. But the two main icons (<email account name> and Local Folders) insist on being the default washed-out blue when they aren't selected (which is almost always). See pic.

Anything you've seen that will let me make them white all the time?

das10 · Oct 29, 2023

This is what shows up in the Dev Tools.

Code:

/* change main local folder colors in folder pane */
/* choose color eg. white                                  */
#folderTree li[data-server-type] > .container > .icon {
  --icon-color:  white !important;
}

Wisewiz · Oct 29, 2023

@das10: Thank you, my friend. That did it.

Wisewiz · Oct 31, 2023

@das10 Okay, back to the salt mines! I have a sudden OCD kind of wish to interfere with the Unified Toolbar, to make the menu item turn a different color when hovered over, probably white, with my dark color for the lettering. Doable?

das10 · Oct 31, 2023

Use the following code to set the colors you want.

Code:

/* UnifiedToolBar BUTTONS - the hover effect  */
/* change colors as req'd.                    */

#unifiedToolbar .button:is(.toolbar-button, .unified-toolbar-button):hover {
     background: white     !important;   /* color of background */
     color:      black     !important;   /* color of text/icons */
}

pn: It appears to work for all text/icons except the twisty next to the "Move To" button (can't figure that out at the moment).

updated code (this now enables the twisty icon next to "Move to" button to show when the whole button is hovered).

Code:

#unifiedToolbar .button:is(.toolbar-button, .unified-toolbar-button):hover {
     padding-block:    1px          !important;   /* this for Wisewiz only */
     background-color: white        !important;   /* color of background */
     color:            #29116e      !important;   /* color of text/icons */
}

Wisewiz · Oct 31, 2023

That worked perfectly, but not until I re-ordered the Unified Toolbar entries:

CSS:

#unifiedToolbar .button:is(.toolbar-button, .unified-toolbar-button):hover {
     background: white     !important;   /* color of background */
     color:      #29116e     !important;   /* color of text/icons */
}

#unifiedToolbar {
  height:  24px  !important;
  padding-block:   1px  !important;
  margin-block:    0px  !important;
  background:  #29116e  !important;
  color: white  !important;
}

works, but the other order didn't. (???)

BTW, you have those cute little rounded corners on your highlights. How'd you get those? Mine are square. Really square.

das10 · Oct 31, 2023

I don't know why, as I tested this (I think) using the same userChrome.css you posted a while back.

Anyway, you might try increasing the padding block you just posted to say 2px to see if it nudges the rounded corners into the inside of the Unified toolbar.

If that doesn't work, then, as a test, try this code to see if you can see the border radii.

Code:

/* UnifiedToolBar BUTTONS - the hover effect  */
/* change colors as req'd.                    */

#unifiedToolbar .button:is(.toolbar-button, .unified-toolbar-button):hover {
     border-radius: 4px             !important;
     border:        1px solid white !important;
     background:    white           !important;   /* color of background */
     color:         #29116e         !important;   /* color of text/icons */
}