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...

LnzMrt · Jun 25, 2025

Now that I have TB looking just the way I need, they go and plan to release Thunderbird 140 soon.
Has anybody tried the beta and check if the CSS modifications still work?

das10 · Jun 25, 2025

CSS modifications in Thunderbird (& Firefox) ought to keep working until their Development Teams say they won't.

I just quickly tested Thunderbird 140.0b1 (Beta) portable and at first sight, all CSS seems to be working OK (although you never know when particular codelets might need modifications).

eleven11 · Jun 26, 2025

eleven11 said:
Dear CSS whizzes,
I have tried Inspector but failed to solve the problem myself:
How can I style the task items (completed, overdue, current, etc.) ?

Hello all,
With friendly assistance from @das10 helping me understand Inspector, I was finally able to solve this myself. If anyone is interested, below is my CSS code. It has these effects:

new tasks: black text
inprogress tasks: blue text
~~completed tasks: green text, line-through~~
overdue tasks: red text
mark selected row with `border:1px dotted black` instead of colored background

CSS:

/* ------------------------------ TASKS ------------------------------- */
.calendar-task-tree > treechildren::-moz-tree-cell-text(),
.calendar-task-tree > treechildren::-moz-tree-cell-text(selected,focus)
{color:black !important}

.calendar-task-tree > treechildren::-moz-tree-cell-text(inprogress),
.calendar-task-tree > treechildren::-moz-tree-cell-text(inprogress,selected,focus)
{color: blue !important}

.calendar-task-tree > treechildren::-moz-tree-cell-text(overdue),
.calendar-task-tree > treechildren::-moz-tree-cell-text(overdue,selected,focus)
{color: red !important}

.calendar-task-tree > treechildren::-moz-tree-cell-text(completed),
.calendar-task-tree > treechildren::-moz-tree-cell-text(completed,selected,focus)
{text-decoration:line-through; font-style:normal!important; color:green!important}


.calendar-task-tree > treechildren::-moz-tree-row(selected,focus),
.calendar-task-tree > treechildren::-moz-tree-row(inprogress,selected,focus),
.calendar-task-tree > treechildren::-moz-tree-row(completed,selected,focus),
.calendar-task-tree > treechildren::-moz-tree-row(overdue,selected,focus)
{background:transparent!important; border:1px dotted black !important; outline:1px dotted black !important}

.calendar-task-tree-col-completed >.treecol-icon,
.calendar-task-tree > treechildren::-moz-tree-image(calendar-task-tree-col-completed) {
  -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity;
  fill: green !important;
  stroke: black !important;
  stroke-opacity: 0;
}
/* high priority symbol = red / low priority symbol = blue */
.calendar-task-tree > treechildren::-moz-tree-image(calendar-task-tree-col-priority, selected) {stroke: var(--calendar-priority-icon-color) !important}
.calendar-task-tree > treechildren::-moz-tree-image(calendar-task-tree-col-priority, highpriority) {list-style-image: var(--icon-priority); stroke:red!important}
:root[lwt-tree-brighttext] .calendar-task-tree > treechildren::-moz-tree-image(calendar-task-tree-col-priority, highpriority) {stroke:red!important}
.calendar-task-tree > treechildren::-moz-tree-image(calendar-task-tree-col-priority, lowpriority) {list-style-image: var(--icon-priority-low); stroke:blue!important}
:root[lwt-tree-brighttext] .calendar-task-tree > treechildren::-moz-tree-image(calendar-task-tree-col-priority, lowpriority) {stroke:blue!important}

eleven11 · Jun 26, 2025

The only thing I was unable to achieve so far:
How can I style cancelled tasks ?

I would like to display them in gray color and strike-through.
I found some clues below, but I have no idea how to do this. @das10 maybe ?

calendar/base/content/calendar-task-view.js
113 statusDetails.textContent = cal.l10n.getCalString("taskDetailsStatusCancelled");

calendar/base/modules/utils/calUnifinderUtils.jsm
24 const taskStatus = ["NEEDS-ACTION", "IN-PROCESS", "COMPLETED", "CANCELLED"];

calendar/locales/en-US/chrome/calendar/calendar.properties
31 # ToDo task status: NeedsAction, InProcess, Completed, Cancelled
427 taskDetailsStatusCancelled=Canceled

das10 · Friday at 12:55 PM

I am afraid I cannot find any Selector which has any mention of 'task cancelled' for the Today Pane. There are selectors for cancelled tasks for the day/week/month Calendar Pane but they don't translate to the Today Pane.

ps: The clues which you found in the Source code, all somehow appear to relate to javascript (I don't know whether they are for the Today Pane or only for the Calendar Pane). If they relate to the Today Pane also, then probably it is possible to customize such tasks through a userChromeJS extension. However, even if it is possible, I have no experience of javascript at all.

If you do find a way through userChrome.css, please share it with us.

eleven11 · Friday at 3:58 PM

@das10 : many thanks for looking into this!

das10 said:
I cannot find any Selector which has any mention of 'task cancelled' for the Today Pane. There are selectors for cancelled tasks for the day/week/month Calendar Pane but they don't translate to the Today Pane.

I mainly use the tasks tab for my tasks. But yes, the tasks also appear in the Today Pane. Both locations use the same CSS styling. If you change the styling for 1 location, the other location looks the same.

das10 said:
probably it is possible to customize such tasks through a userChromeJS extension.

I know userChrome.js.
And I know extensions (addons).
But what is a userChromeJS extension ?

I found this here: userChromeJS addon

das10 said:
If you do find a way through userChrome.css, please share it with us.

I have given up all hope on CSS alone. I found no solution, neither did my AI chatbot. So you guys here were my last hope.

The AI chatbot said, I need javascript. Too bad, I would have preferred to solve this problem using CSS alone.

Yes, if I find any solution, of course I will post here.
Conversely, please let me know if you find a way to do this after all.
Many thanks.

das10 · Friday at 5:50 PM

Thanks for the reply. If I do find a way I'll let you know.

Regards.

eleven11 · Saturday at 5:59 PM

eleven11 said:
das10 said:
probably it is possible to customize such tasks through a userChromeJS extension.

I know userChrome.js.
And I know extensions (addons).
But what is a userChromeJS extension ?

I found this here: userChromeJS addon

@das10 : Is this what you meant ?

das10 · Saturday at 6:47 PM

Yes, that is the one. Basically one would install that and then create a userChrome.js file (in the Chrome folder) with the js code for altering the canceled/cancelled task text (if it is possible to code that). The code 'could' change the task text on the fly or on the press of a toolbar button. I think there is/are other such JS add-ons - but I haven't tried them because, as I said I have no knowledge of javascript, or, of any implications of having such extension in an email client (from a security point of view).

das10 · Monday at 5:53 PM

@eleven11
I think this appears to work for the Canceled Tasks cell text:

Code:

/* Canceled/Cancelled Tasks - in Today Panel/Tasks Tab */
.calendar-task-tree > treechildren::-moz-tree-cell-text(status-cancelled) {
  color:            grey         !important;
  text-decoration:  line-through !important;
}

eleven11 · 2025-07-02T18:42:51-0400

das10 said:
If you do find a way through userChrome.css, please share it with us.

It took me a week of AI chat sessions, but I finally found an approach that enabled the chatbot to find the right selector. The chatbot would hand me code which I enter in the error console. And in return, I would feed the console output back to the chatbot. This went back and forth countless times, but in the end, the chatbot was able to narrow down the right selector:

CSS:

#calendar-task-tree treechildren::-moz-tree-cell-text(status-cancelled)
{color:gray!important; opacity:0.6!important; text-decoration:line-through!important}

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

New member

My Computer

Well-known member

My Computer

Member

My Computer

Member

My Computer

Well-known member

My Computer

Member

My Computer

Well-known member

My Computer

Member

My Computer

Well-known member

My Computer

Well-known member

My Computer

Member

My Computer

Similar threads