Thunderbird 115: CSS Customization

das10 · Feb 24, 2025

Do you mean the thin lightgrey Vertical line (splitter) ? If so try:

Code:

/* change color of the folderPane splitter */
#folderPaneSplitter {
border-color:  var(--sidebar-background) !important;   
}

Use either the variable var(--sidebar-background) or any specific color which you want.

For the Composition Window, try changing the background in Settings > Composition HTML style as shown (untick "Use reader's default colours") and set your own color by clicking on the "Background Color" button:

click click · Feb 24, 2025

Sorry, I forgot about the color in settings. I'm getting old.

Not the splitter, the threads pane background which is white.

das10 · Feb 24, 2025

Try:

Code:

/* message pane background */
#threadPane > tree-view {
  background-color: var(--sidebar-background) !important;
}

(Again use either the variable as shown or use a specific color that you want there).

In Cards view, the empty portion of the pane below the messages will work with the above CSS. If you want to set the background 'around' the cards as well try:

Code:

/* messages pane background (cards layout , table layout) */
#threadTree[rows="thread-card"] .card-layout td,
#threadPane > tree-view {
  background-color: var(--sidebar-background) !important;     /* use either the variable as shown or use a specific color*/
}

click click · Feb 24, 2025

As a quick test I tried the code below, but nothing changes and the background behind the threads is still white . Don' know what cards view is or howto, so I probaly don't use it.

/* message pane background */
#threadPane > tree-view {
background-color: orange !important;
}

das10 · Feb 24, 2025

This is what the code for the threadpane you tested shows.

Make a backup of your userChrome.css file, and create a new one with just the code you posted, to see if it works. If it does, then there could be an error in your original file (eg. if it is being over-ridden by some other code, or if a section of code is incomplete).

If you want, you can post your userChrome.css here so we can check it. Or, you can paste your code in the following site to see if it shows anything obvious (It might not be 100% accurate, but it may point out something you might have missed).

The W3C CSS Validation Service

click click · Feb 24, 2025

The problem was caused by a section that I commented out. Not sure why it was causing the problem
/*-----------------------------------------
Thread list spacing
/* Below reduced the size which changed the font. You */
/* can play with the size or rem it to use default */
/* :root { --list-item-min-height: 10px !important; } */

tr[is="thread-row"] {
height: 17.8px !important;
}
-----------------------------------------*/

FrancoDT · Feb 24, 2025

Do you guys try using themes instead of recoding stuff?

das10 · Feb 25, 2025

@click click;
The comment section started at Line 1 got closed off at the end of line 3, not 10, leaving a hanging "*/" at the end of line 10.
....the first instance of "*/" that follows an instance of "/*" closes the comment.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_syntax/Comments

click click · Feb 25, 2025

das10 said:
@click click;
The comment section started at Line 1 got closed off at the end of line 3, not 10, leaving a hanging "*/" at the end of line 10.
....the first instance of "*/" that follows an instance of "/*" closes the comment.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_syntax/Comments

I did not realize that. Will keep that in mind. Thanks for the pointer. Always something new to learn...

Thunderbird 115: CSS Customization

Well-known member

My Computer

Active member

My Computer

Well-known member

My Computer

Active member

My Computer

Well-known member

My Computer

Active member

My Computer

Well-known member

Attachments

My Computers

Well-known member

My Computer

Active member

My Computer

Similar threads