Thunderbird 115: CSS Customization

eleven11 · Jul 2, 2025

@das10 : I was unable to achieve this on my own because BrowserToolbox/Inspector only lets me investigate elements down to <treechildren>:

CSS:

html#messengerWindow body vbox#messengerBody hbox#tabmail-container tabmail#tabmail.printPreviewStack tabbox#tabmail-tabbox tabpanels#tabpanelcontainer.plain vbox#calendarTabPanel.deck-selected hbox#calendarContent hbox#calendarDisplayBox vbox#calendar-task-box vbox tree#calendar-task-tree.calendar-task-tree treechildren.calendar-task-treechildren

<treechildren> is the deepest node displayed by Inspector. When hovering over <treechildren>, the entire task area lightens up.
Its subnodes are not displayed by Inspector.

I followed the instructions here to no avail:

* set devtools.chrome.enabled pref to true
* set devtools.debugger.remote-enabled pref to true
* set devtools.debugger.prompt-connection pref to false
* set devtools.inspector.showAllAnonymousContent pref to true
* set devtools.browsertoolbox.scope pref to "everything"

But despite these settings, the <treechildren> subnodes are not shown in Inspector.

eleven11 · Jul 2, 2025

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

@das10 : Thank you. Funny, we just cross-posted the same solution.
I'm wondering how you managed to find this solution ??

das10 · Jul 3, 2025

After finding no hints on SearchFox, I Googled for "moz-tree-cell-text status cancelled", and one of the sites that came up was for Mozilla Sunbird, which was one of Mozilla's standalone Calendar applications.

Oh noes!

There it showed the particular selector for Cancelled tasks.

eleven11 · Jul 3, 2025

@das10 : Awesome. Thanks a lot for sharing this helpful discovery!
Do you know how to display the subnodes of <treechildren> in Inspector (as described above) ?

das10 · Jul 3, 2025

No, it is not possible using the Inspector, because as you found out, it only selects the whole list table. Also, I 'think' that because the tree layout uses javascript together with Mozilla's own legacy CSS code (which you can tell from the "moz" abbreviations in terms such as "moz-tree-cell-status" for example) rather than standard Html type CSS, there doesn't appear to be any alternatives which we could use to de-construct the tree layout using the Inspector alone. Supernova is gradually trying to replace such legacy CSS with Html CSS, so eventually may well decide to update this tree layout as well, which may make de-constructing such items easier in future.

das10 · Jul 3, 2025

btw: @eleven; which AI tool did you use to chase this selector?

eleven11 · Jul 3, 2025

das10 said:
btw: @eleven; which AI tool did you use to chase this selector?

I used the latest reasoning model (o4-mini) on duck.ai
But I warn you: It is really not worth the effort (unless you are as obstinate as I am and willing to spend a week chatting with the bot). It's more a trial&error approach. At the end, I switched gears and let the bot talk directly to the error console (with me as an intermediary relaying their respective inputs and outputs). This way, the bot could learn about the DOM structure and adapt the selectors. But it is a long and frustrating process.

das10 said:
No, it is not possible using the Inspector, because as you found out, it only selects the whole list table. I 'think' that because the tree layout uses javascript ...

It does not matter whether javascript is used to inject content. The Firefox Inspector inspects the HTML page content (including elements injected via javascript).

Both AI and the forum.mozillazine user (link posted above) say the following prefs should reveal the hidden <treechildren>. But it does not work for me:

JavaScript:

// *trying to help Inspector expand <treechildren> and see all the anonymous <treeitem> elements.
user_pref("devtools.chrome.enabled", true);
user_pref("devtools.debugger.remote-enabled", true);
user_pref("devtools.inspector.showAllAnonymousContent", true);
user_pref("devtools.inspector.showUserAgentShadowRoots", true);
user_pref("devtools.browsertoolbox.scope", "everything");

Please let us know if you find out how to dig deeper. There must be a way to do this.

das10 · Jul 3, 2025

eleven11 said:
the following prefs should reveal the hidden <treechildren>.

I had those preferences already set up, except for "devtools.inspector.showUserAgentShadowRoots". With the Inspector, although one cannot inspect the individual task tree details directly, one can still trace the source of the details (which I assume you already did), for example, by using the filter in the Style Editor to find a suitable candidate. However, there’s no specific selector for "task-Cancelled", nor is it mentioned anywhere in SearchFox, so I don't know where else one could inspect for it.

filter in Style Editor showing calendar-task-tree.css

As for the AI tool you used, I attempted the same with Edge Copilot to test its capabilities. And after a marathon six-hour session, I eventually gave up.

We even tried JavaScript through the userChrome.JS extension in an effort to tease out the structure of that Tree, but after a lot of to-ing & fro-ing I gave up, although Copilot was willing to experiment further with different JS variations.

eleven11 · Jul 3, 2025

@das10 : yes, that's pretty much sums up what I know, too. Let's keep each other posted when we find out more. Cheers.

eleven11 · Jul 3, 2025

@das10 : One of my remaining head-scratchers: The "!" exclamation mark for high priority tasks is barely visible. I would like to bolden it. Any idea how ?

das10 · Friday at 7:17 AM

The default SVG icon used in the task tree is very thin, but SearchFox shows there is another SVG icon which is much thicker. So, we can use the alternative SVG to replace the default one.

There are two ways to do it. Make a copy of the copy of that thicker SVG, place it in the Chrome folder & call it using its path, or to make the userChrome.css all inclusive we can encode the SVG file & use it inline within userChrome.css itself.

This is the way to do it using the all-inclusive (inline) method.
Go to this address & copy the SVG code shown below the icon image. You can replace "context-fill" shown there with the actual color you want eg: "red".
The first one is the low priority one & the second one is high priority.

low-priority.svg - mozsearch

searchfox.org

priority.svg - mozsearch

searchfox.org

Then, go to this address & insert the SVG text copied from the previous step. You can then copy the "Ready for CSS" code & use it as the background-image of the default icon. This will convert the SVG for use inline in CSS files.

URL-encoder for SVG

eg: using the encoded SVG in userChrome.css for High Priority (also Low priority)

Code:

/* High priority task icon */
.calendar-task-tree > treechildren::-moz-tree-image(calendar-task-tree-col-priority, highpriority) {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg' fill='Red' fill-opacity='context-fill-opacity'%3E%3Cpath d='M8 2a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V3a1 1 0 0 1 1-1zm0 11.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z'/%3E%3C/svg%3E") !important;
  background-size:       1.5em 1.5em  !important;
  background-position:   center       !important;
  background-repeat:     no-repeat    !important;
  stroke:                transparent  !important;
}

/* Low priority task icon */
.calendar-task-tree > treechildren::-moz-tree-image(calendar-task-tree-col-priority, lowpriority) {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg' fill='Blue' fill-opacity='context-fill-opacity'%3E%3Cpath d='M8 2a1 1 0 00-1 1v8.1L5.86 9.97c-.94-.8-2.21.47-1.41 1.41l2.82 2.82h.01c.4.39 1.1.38 1.48 0l2.78-2.79a.98.98 0 000-1.41 1 1 0 00-1.41 0L9 11.07V3a1 1 0 00-1-1z'/%3E%3C/svg%3E") !important;
  background-size:       1.5em 1.5em  !important;
  background-position:   center       !important;
  background-repeat:     no-repeat    !important;
  stroke:                transparent  !important;
}

ps: You might need to make adj's to the size.

ps:
For above to work properly in Dark theme, you have take out these two :root lines from /* high priority symbol = red / low priority symbol = blue */, as you will be setting the colors in the SVG's code I have shown. If you really want to keep them in as some kind of reference, just remove the !important bits at the end, so they don't interefere with the SVG code.

remove these 2 lines, or at least remove !important from them:

Code:

:root[lwt-tree-brighttext] .calendar-task-tree > treechildren::-moz-tree-image(calendar-task-tree-col-priority, highpriority) {stroke:red!important}
:root[lwt-tree-brighttext] .calendar-task-tree > treechildren::-moz-tree-image(calendar-task-tree-col-priority, lowpriority) {stroke:blue!important}

eleven11 · Friday at 7:34 PM

@das10 : Wow! This is utterly impressive and stunning. Thank you so much! How on Earth did you find this ?

das10 · Saturday at 5:21 AM

It's all a 'slow' learning process. For example it's a combination of various methods like you can use the SearchFox site for the sources, MDN for how to use the basic CSS, and then if you use any kind of ready made themes like Aris's CustomCSSforFx, you learn how to put various bits of rules together, and of course the Browser Toolbox to see how Firefox/Thunderbird uses CSS.
eg:

Search - mozsearch

searchfox.org

CSS: Cascading Style Sheets | MDN

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.

developer.mozilla.org

GitHub - Aris-t2/CustomCSSforFx: Custom CSS tweaks for Firefox

Custom CSS tweaks for Firefox. Contribute to Aris-t2/CustomCSSforFx development by creating an account on GitHub.

github.com

eleven11 · Saturday at 4:53 PM

@das10 : Many thanks for sharing your insights and resources.

das10 said:
... and of course the Browser Toolbox to see how Firefox/Thunderbird uses CSS.

Too bad that we are basically blind flying since we cannot inspect the <treechildren>.
It would all be so easy if we could inspect them in Inspector.
Please let us know if you ever find out how to achieve this.

eleven11 · Sunday at 6:32 PM

@das10 : I credited you over at https://superuser.com/questions/1826011/thunderbird-how-to-customize-task-list

Here are my customized task styles:

Here is my userChrome.css :

CSS:

/* don't bolden folders+subfolders with unread messages */
li[is="folder-tree-row"]:is(.unread),
li[is="folder-tree-row"]:is(.unread) > div > span.name {
  font-weight: normal !important;
}

/*underline subject lines of ALL collapsed threads */
/*(regardless of whether or not they contain unread messages) */
#threadTree tbody .children.collapsed   :where(td, .subject-line) {text-decoration: underline !important}

/* menubar on top */
#toolbar-menubar {order: -1 !important;}

/* hide folder pane unread count */
.unread > .container > .unread-count { display:none !important; }

/* message row height in Table view */
tr[is="thread-row"] {height: 24px !important}

/* compact header pane */
.message-header-container {padding-top: 1px !important; padding-bottom: 2px !important;}
.message-header-container, .message-header-extra-container {row-gap: 1px !important;}


#spacesToolbar {background-color: #d2d2d2 !important}
#folderPane    {background-color: #F0F0F0 !important}

#unifiedToolbar {
  background: #F0F0F0 !important;
  max-height: 28px !important;
  margin: 0px !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important; }



/* menubar > * {background-color: yellow!important} */
/* toolbar > * {background-color: cyan!important} */

/* tabs bar */
/* scrollbox, .scrollbox-clip {background: #e2e2e2 !important;} */

/* quickfilter background*/
/* #quickFilterBarContainer {background: #ffe3f5 !important;} */

/* ----------------------------- CALENDAR ----------------------------- */
.calendar-month-day-box-day-off {background-color: #DFD!important}
.calendar-month-day-box-other-month {background-color:#DDD!important}

/* ------------------------------ TASKS ------------------------------- */
toolbarbutton#calendar-delete-task-button {visibility:0!important;opacity:0!important;display:none!important}
#task-actions-toolbox {padding-right:10mm!important}

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

/* future: before start date, not due today */
.calendar-task-tree > treechildren::-moz-tree-cell-text(future) {color:WindowText!important}

/* started tasks */
.calendar-task-tree > treechildren::-moz-tree-cell-text(status-in-process),
.calendar-task-tree > treechildren::-moz-tree-cell-text(status-in-process,selected,focus),
.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(status-needs-action) {
  color: blue !important;
  padding-bottom: 0px !important;  /* if padding-bottom is ignored, you can try a negative margin instead: margin-bottom: -1px !important; */
  background-image: repeating-linear-gradient(to right, transparent 0px, transparent 1px, red 1px, red 2px) !important; /* Dotted underline via tiny repeating gradient: */
  background-repeat: repeat-x !important;
  background-size: 100% 1px !important;                 /* height of the “line” is 1px, full width: */
  background-position: 0 calc(100% - 1px) !important;   /* Position it right under the glyphs-play with the vertical offset: */
}

/* due today, not overdue */
.calendar-task-tree > treechildren::-moz-tree-cell-text(duetoday) {background:magenta!important; color:white!important; font-weight:bolder!important}

/* overdue */
.calendar-task-tree > treechildren::-moz-tree-cell-text(overdue),
.calendar-task-tree > treechildren::-moz-tree-cell-text(overdue,selected,focus)
{color: red !important; font-weight:bold}

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

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

/* Color all items that have an alarm */
.calendar-task-tree > treechildren::-moz-tree-cell-text(alarm) {font-style:italic}


/* hover, focus, selected */
.calendar-task-tree > treechildren::-moz-tree-row(hover),
.calendar-task-tree > treechildren::-moz-tree-row(hover,focus)
{background:transparent!important; border:1px dotted black !important}

.calendar-task-tree > treechildren::-moz-tree-row(selected),
.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:#eee!important; border:1px dotted black !important; outline:1px dotted black !important}


/* green checkmark in "completed" checkbox */
.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;
}

/* low priority symbol = blue / high priority symbol = red */
.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, 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}

:root[lwt-tree-brighttext] .calendar-task-tree > treechildren::-moz-tree-image(calendar-task-tree-col-priority, highpriority),
:root[lwt-tree-brighttext] .calendar-task-tree > treechildren::-moz-tree-cell-text(calendar-task-tree-col-priority, highpriority),
.calendar-task-tree > treechildren::-moz-tree-image(calendar-task-tree-col-priority, highpriority),
.calendar-task-tree > treechildren::-moz-tree-cell-text(calendar-task-tree-col-priority, highpriority) {
list-style-type: "'!'" !important;
color: red             !important;
font-weight: bolder    !important;
font-style: italic     !important;
stroke: red            !important;
background: yellow     !important;
border: 1px solid red !important;
}

/* High priority task icon */
.calendar-task-tree > treechildren::-moz-tree-image(calendar-task-tree-col-priority, highpriority) {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg' fill='Red' fill-opacity='context-fill-opacity'%3E%3Cpath d='M8 2a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V3a1 1 0 0 1 1-1zm0 11.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z'/%3E%3C/svg%3E") !important;
  background-size:       1.5em 1.5em  !important;
  background-position:   center       !important;
  background-repeat:     no-repeat    !important;
  stroke:                transparent  !important;
}

/* Low priority task icon */
.calendar-task-tree > treechildren::-moz-tree-image(calendar-task-tree-col-priority, lowpriority) {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg' fill='Blue' fill-opacity='context-fill-opacity'%3E%3Cpath d='M8 2a1 1 0 00-1 1v8.1L5.86 9.97c-.94-.8-2.21.47-1.41 1.41l2.82 2.82h.01c.4.39 1.1.38 1.48 0l2.78-2.79a.98.98 0 000-1.41 1 1 0 00-1.41 0L9 11.07V3a1 1 0 00-1-1z'/%3E%3C/svg%3E") !important;
  background-size:       1.5em 1.5em  !important;
  background-position:   center       !important;
  background-repeat:     no-repeat    !important;
  stroke:                transparent  !important;
}

eleven11 · Sunday at 7:07 PM

@das10 : I found a few more useful selectors here: https://bug202360.bmoattachments.org/attachment.cgi?id=319766

I find these two selectors particularly useful:

CSS:

/* style all items that have an alarm */
.calendar-task-tree > treechildren::-moz-tree-cell-text(alarm) {}

/* style all items in the "birthday" category */
.calendar-task-tree > treechildren::-moz-tree-cell-text(category-birthday) {}

It would be awesome to be able to add category styles.
Alas, I couldn't get the category selector to work. None of these selectors worked for me:

CSS:

/* [categories~="birthday"] */
.calendar-task-tree > treechildren::-moz-tree-cell-text(category-birthday),
.calendar-task-tree > treechildren::-moz-tree-cell-text[categories~="birthday"],
.calendar-task-tree > treechildren::-moz-tree-row(category-birthday),
.calendar-task-tree > treechildren::-moz-tree-row[categories~="birthday"]
{font-style:italic; background:#cbf0ff}

Can you get this to work ?

And as far as the alarm selector is concerned: This one works!

It would be helpful to prepend the task title with an alarm symbol

.
This could be easily achieved with ::before {content='⏰'} .
Unfortunately .calendar-task-tree > treechildren::-moz-tree-cell-text(alarm)::before {} does not work.
Probably because we are not allowed to use two pseudo-elements (::) in one selector simultaneously.

Alternatively, AI suggested a solution without ::before, namely using an SVG image as background:

CSS:

/* style all items that have an alarm */
.calendar-task-tree > treechildren >::-moz-tree-cell-text(alarm){
  display: inline-block;
  vertical-align: text-bottom;

  /* 2) Replace this SVG however you like */
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>\
  <text x='0' y='14' font-size='16' font-family='sans-serif' fill='red'>⏰</text>\
</svg>");

  /* 3) Control its size & spacing */
  width: 1ch;
  height: 1em;       /* same as line height */
  background-repeat: no-repeat;
  background-size: contain;

  /* space between icon and text */
  margin-inline-end: 0.5ch;
  padding-inline-start: 1.2em;
}

This displays a

symbol.
2 problems though:

The symbol is displayed in every cell of the row. Do you know how to restrict the effect to the title column cell only ?
The symbol is displayed behind the start of the text. Do you know how I can push the text to the right? (margin-left and padding-left move both the text and the icon to the right, so that the problem persists).

I have an idea that could solve both problems at the same time: Display the

symbol in the high/low priority column (instead of the high/low priority symbols).
I tried to achieve this with
.calendar-task-tree > treechildren::-moz-tree-image(calendar-task-tree-col-priority, alarm) {}
but it doesn't work either.

das10 · Monday at 1:47 PM

I can't find any way to style just the Column text for any Category. But, anyway, re: the font icon placement, you could try something like this (though I couldn't get it to work for .calendar-task-tree > treechildren >::-moz-tree-cell-text(alarm) wich you have described?

Code:

/* "Alarms" - new Custom Category created in Calendar Settings */
/* style all cell-text that have a category of Alarms */
.calendar-task-tree > treechildren::-moz-tree-cell-text(alarms) {
  display: inline-block !important;

/* background-image using font with size "16" (& viewbox with width 18) */  
background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'>\
<text x='0' y='14' font-size='16' font-family='sans-serif' fill='red'>⏰</text>\
</svg>")                          !important;

  background-size:      contain   !important;
  background-repeat:    no-repeat !important;
  margin-inline-end:    0em       !important;
  padding-inline-start: 1.65em    !important;
}
/* ps: !important required to over-ride the backgroun-image used in "Needs Action" in your userChrome */

eleven11 · Monday at 5:54 PM

@das10 :

das10 said:
re: the font icon placement, you could try something like this

Awesome! I'm really happy you gave this a shot and succeeded.

On my end, your font settings produce icons that are too big.
Here are the font settings that work for me (in case someone needs it):

CSS:

.calendar-task-tree > treechildren::-moz-tree-cell-text(alarm) {
  text-decoration:underline !important;
  display: inline-block !important;

/* background-image using font with size 13 & viewbox with width 18 */
background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'>\
<text x='0' y='12' font-size='13' font-family='sans-serif' fill='red'>⏰</text>\
</svg>")                          !important;

  background-size:      contain   !important;
  background-repeat:    no-repeat !important;
  margin-inline-end:    0         !important;
  padding-inline-start: 1.7em    !important;
}
/* ps: !important required to over-ride the background-image used for "needs-action" */

Now all cells in the row are prepended with the alarm icon.
Any idea how to apply the style only to certain columns ?

das10 said:
(though I couldn't get it to work for .calendar-task-tree > treechildren >::-moz-tree-cell-text(alarm) wich you have described?

Judging from your code as well as your screensshot, it seems you added a custom category "alarms" and used the category name as selector. I don't know why "alarm" (without "s"!) does not work for you ... Are you sure you tried without "s" ?
In my Thunderbird 115 .calendar-task-tree > treechildren::-moz-tree-cell-text(alarm) {text-decoration:underline!important} underlines all tasks for which an alarm is set.

But I just realize you found out how to style categories!!!

It's not ...

CSS:

.calendar-task-tree > treechildren::-moz-tree-cell-text(category-birthday) {}
.calendar-task-tree > treechildren::-moz-tree-cell-text[categories~="birthday"] {}

... but you simply use the category name without "category-" string prepended:
.calendar-task-tree > treechildren::-moz-tree-cell-text(birthday) {background-color:yellow!important}
This highlights all birthday tasks with yellow background.

Great job!

das10 said:
I can't find any way to style just the Column text for any Category.

Do you mean you can't find any way to style categories (we just found out how) or any way to restrict the styles to only 1 column ?
I would love to find out the latter, too ... (it's not ideal to have the alarm icon in every cell).

By the way, there is something else which either doesn't work or I am not using correctly:

CSS:

/* future: before start date, not due today */
/* doesn't work. Affects all not-started-items, not just those with due date */
.calendar-task-tree > treechildren::-moz-tree-cell-text(future) {color:orange!important}

I think this is supposed to style all tasks with a due-date in the the future.
But in my tests, this styles all "unstarted" tasks with or without due-date.

Bottom line questions:

I would love to style tasks with a due date differently from tasks without due-date. Any idea how to do this ?
Are you capable of limiting styles to only 1 column (instead of the entire row) ?

das10 · Monday at 6:39 PM

Bottom line answers:
"to style tasks with a due date differently from tasks without due-date" I'll have a look tomorrow when I have time to see if it is possible or not.
Limiting styling to only 1 column instead of entire row: As far as I can tell, it doesn't appear to be possible using CSS.

Are you using Thunderbird Version 115, or was it a typo?

das10 · Tuesday at 2:58 PM

Re: "to style tasks with a due date differently from tasks without due-date" - Unfortunately couldn't make this work either.

Thunderbird is not exposing any more details about the pseudo classes in the task tree than we already know about from various sources, and the usual methods of using pseudo :is :not etc. is not an option either

Thunderbird 115: CSS Customization

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

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

Member

My Computer

Member

My Computer

Well-known member

My Computer

Member

My Computer

Well-known member

My Computer

Well-known member

My Computer

Similar threads