Thunderbird 115: CSS Customization

Wisewiz · Sep 12, 2023

That brought the cursor out of hiding, and the blank works as expected. Yay! But the formerly white blank (same as Subject:) is now colored, as you see. Did you intend that? (It's actually fine with me that way; just thought I'd ask.)

You used a version of the userChrome I have discarded and replaced, but I'll fix that in a jiffy. (I had to fix the "hover-order" problem and change a color or two, but I'll integrate yours with my revised one.)

Wisewiz · Sep 12, 2023

@das10

Working on integrating, but I messed up somewhere, so I'll try again until I get it. When I get it right, the To: blank will still be colored, but I mind that not at all, 'cuz it WORKS!

EDIT: Got it! All's well, and the To: blank is behaving. Many, many, m'fren'.

das10 · Sep 12, 2023

Yes, I intended the background of the "To" box, so it that it might match the "From" box to a degree.

pn: It seems that the cursor or input text with the previous userChrome.css isn't absent as such, but for some reason,with the System theme, they are all white (I could still do a Ctrl+A and see whatever text was entered, but that's only an aside and I don't know why though).

In the previous css file, you would just need to remove:

Code:

/* The To: address box */
.address-pill  {
  background-color: #336699 !important;
  color:            White  !important;
  }

and replace with:

Code:

/* The To: email addresses */
#MsgHeadersToolbar .address-pill  {
  background-color: #336699 !important;
  color:            White   !important;
  height:           23px    !important;
}
/* The To: address "input" box (ie with cursor) */
#MsgHeadersToolbar .recipients-container input {
  border-radius:    3px     !important;
  color:            white   !important;
  background-color: #336699 !important;
  padding-inline:   2px     !important;
}
/* The To: address "container"  */
#MsgHeadersToolbar .recipients-container .address-container  { 
  background-color: white !important;
  border-color:     white    !important;
  border-width:     0px      !important;
  border-radius:    2px      !important;
  padding-left:     2px      !important;
  padding-right:    1px      !important;
  }

Wisewiz · Sep 12, 2023

das10 said:
Yes, I intended the background of the "To" box, so it that it might match the "From" box to a degree.

pn: It seems that the cursor or input text with the previous userChrome.css isn't absent as such, but for some reason,with the System theme, they are all white (I could still do a Ctrl+A and see whatever text was entered, but that's only an aside and I don't know why though).

In the previous css file, you would just need to remove:

Code:

and replace with:

Code:

Yep. Had that done before I saw your last post. It's all working great now, and I think I'm going to put it all to bed now, after I deploy the new userChrome to the other 115 and to the 118. Have a good one!

It's not hard to integrate the two versions of the file, with both open and side by side in adjacent windows. I just muffed it earlier, 'cuz I was in a hurry to see the cursor blinking again.

I've been doing a bunch of configuring, to fix minor glitches cause by configuration conflicts. E.g., the configuration box that opens from the Settings General Fonts & Colors Advanced button was missing in action for a time, until I got my display font and my outgoing-message font set up properly. Now it's back on base.

Wisewiz · Sep 12, 2023

Just a final report: This CSS file is working perfectly on 115.2.1 and on 118.0b3. This is the revised final (for now, at least). Adopters can adjust colors as they wish, of course.

CSS:

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

/* folders list HOVER color */
/* can change the background-color value to ay particular value */
#folderTree li > .container:hover {
  background-color: #6699CC    !important;
  color:            white    !important;
}

/* folder selected color - make sure icons and twisty dont get washed out */
#folderTree li.selected  > .container {
  background-color: #29116e  !important;
  color:            white    !important;
}

/* Message Pane - Hover Message background/foreground-color */
tr:hover {
  background-color: lightgrey  !important;
  color:            black  !important;
}

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

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

toolbar#toolbar-menubar {
  Order:            -1 !important;
  background-color: #336699 !important;  /* Color of menu bar */
  color:            white   !important;  /* Color of the text - if needed */
  height:           24px    !important;
  padding-top:      0px     !important;
  padding-bottom:   0px     !important;
  margin:           0px     !important;
}

/* Menu Bar captions - the hover effect                        */
/* Change the backgroun / foreground to match what you require */

menubar > menu:hover {
     background-color:  #29116e   !important;  
     color:             white       !important;
}

table[is="tree-view-table"] td {
 border-bottom: solid 1px black !important;
}

toolbar#tabs-toolbar {
 background-color: #336699 !important;
 color:            white   !important;
 height:           fit-content !important;
 max-height:       24px    !important;    
 padding-top:      2px     !important;
 padding-bottom:   3px     !important;
 align-items:      center  !important;
}

/* Whole Header Box with From & To Subject Cc etc. b-ground & text */
#MsgHeadersToolbar {
  background-color: #336699     !important;
  height:           min-content !important;
  color:            White       !important;
  padding-block:    0px         !important;
}

/* The To: email addresses */
#MsgHeadersToolbar .address-pill  {
  background-color: #336699 !important;
  color:            White   !important;
  height:           23px    !important;
}
/* The To: address "input" box (ie with cursor) */
#MsgHeadersToolbar .recipients-container input {
  border-radius:    3px     !important;
  color:            white   !important;
  background-color: #336699 !important;
  padding-inline:   2px     !important;
}
/* The To: address "container"  */
#MsgHeadersToolbar .recipients-container .address-container  {
  background-color: white !important;
  border-color:     white    !important;
  border-width:     0px      !important;
  border-radius:    2px      !important;
  padding-left:     2px      !important;
  padding-right:    1px      !important;
  }

/* The From: address box */
#msgIdentity {
  background-color: #336699   !important;
  color:            White     !important;
  border-color:     White       !important;
  border:           3px  groove !important;
  }

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

/* The whole of From To Subject Cc etc  toolbar */
#compose-toolbox toolbar {
  background-color: #29116e      !important;
  height:           min-content  !important;
  padding-block:    0px          !important;
  margin-block:     0px          !important;
  color:            white        !important;
}

/*               to do                   */
#compose-toolbox menubar menu {
  color: lightgray !important;
}

#compose-toolbox menubar menu:hover {
  background-color: #336699    !important;
  color:            lightgray  !important;
}

/* Format toolbar */
#FormatToolbox,
#FormatToolbar > menulist  {
  background-color: #29116e !important;
  color:            white   !important;
}

Wisewiz · Sep 12, 2023

115.2.1 this morning; 115.2.2 this afternoon. Quick like a bunny. And 118.0b3 this morning, too. No b4 on the horizon yet.

Edwin · Sep 12, 2023

I'm on Thunderbird Daily 119.0a1, no problems here.

Wisewiz · Sep 13, 2023

@das10 and @Edwin and interested others:

I've noticed an odd thing in the Write window Menu bar for both 115 and 118: Some of the items, e.g., the top two in View, appear to be greyed out, but hovering over them brings them up with the fly-out each item has. The shots show the View menu item before hovering and after, with its fly-out.

Any ideas in your dev reference libraries about that?

das10 · Sep 13, 2023

Oh dear! That is part of an unfinished bit of the rule (located near the end of your CSS file) under:

Code:

/*               to do                   */
#compose-toolbox menubar menu {
  color: lightgray !important;
}

I was supposed to check that when I had time, and I completely overlooked it! For the time being, you could remove that rule to at least get the proper menus.

Wisewiz · Sep 13, 2023

Gonna do 'er right now and report back in a few. No sweat, and it doesn't affect the performance at all.

das10 · Sep 13, 2023

Better yet, for the time being, change that rule as follows:

Code:

/*               to do                   */
#compose-toolbox > menubar menu {
  color: lightgray !important;
}

Wisewiz · Sep 13, 2023

I had already taken that rule out in 115, and I thought 115 was working well without it.

Now I've added in your new rule, and it's working perfectly!

I think I'll give at a day or two, and test the new userChrome in 118 as well, and then I'll post the whole revised file for seekers who come here from Google.

I notice you've changed your forum settings to let the server report your presence here. I'm glad to see that. It makes a difference to know that you're here, and not just hiding under "... and 1 more". Thanks.

das10 · Sep 13, 2023

Re: Server presence. I remember going into my Alert preferences, but can't recall changing anything. I always assumed that my presence was always showing! But anyway, re: the userChrome.css, I am glad that the small change has brought those particular menu items back.

Wisewiz · Sep 13, 2023

Yeah, that "small change" made a huge difference. That top menu in my post #248 above rattled me a bit, even though the menu itself worked just fine. Now, no rattles, and still fine. Finer.

No, you showed up only as "... and one more" for all of your last hundred visits. Now you're here. Maybe the forum goblins did it. They're a mischievous bunch! Anyway, now you're clearly here when you're here.

Wisewiz · Sep 13, 2023

Note, BTW, that at the time of my shot, the guests outnumbered us 4 to 3. I've seen it 30+ to 3 or 4 a bunch of times. Seekers see the ads on the site, and those ads make the site possible.

(Small edit of content above. Don't want to offend anybody, esp. our beloved mods.)

Wisewiz · Sep 13, 2023

@das10

I think I saw that you were doing something in the Contacts window. Is this the finished product, or is it possible to color the white list-panel to match the rest of a theme?

P.S.: See what I mean?

Wisewiz · Sep 13, 2023

@das10

P.P.S. to the last above: In case I was unclear, I'm perfectly happy with that Contacts window/panel as is. No es problemo.

I was just wondering whether you were still looking for stuff on that panel. Please don't spend any time on it on my account.

Phil_C · Sep 13, 2023

Going back to the info on changing mail folder colors, the properties dialog applies only to that specific folder -- without a way to change ALL Inbox folders or ALL sent folders en masse. I have six email accounts plus local folders on each of two computers.

I found these helpful links:

Folder Colors

Colors

It took me some time to figure out what to do because I know nothing about CSS. But I did succeed in accomplishing my task, which was to intensify the mail folder existing colors for System (Dark) Mode. It worked like this:

Code:

/* The following folder colors are increased by 10 over this table:
    --folder-color-inbox: var(--color-blue-30);
    --folder-color-draft: var(--color-purple-30);
    --folder-color-sent: var(--color-green-30);
    --folder-color-archive: var(--color-brown-30);
    --folder-color-spam: var(--color-red-30);
    --folder-color-trash: var(--color-ink-30);
    --folder-color-template: var(--color-gray-10);
    --folder-color-newsletter: var(--color-gray-10);
    --folder-color-rss: var(--color-orange-30);
    --folder-color-outbox: var(--color-teal-30);
    --folder-color-folder: var(--color-yellow-10);
    --folder-color-folder-filter: var(--color-magenta-30);
    --folder-color-folder-rss: var(--color-orange-30);
    See:
    https://searchfox.org/comm-esr115/source/mail/themes/shared/mail/colors.css */
*|*:root {
    --folder-color-inbox: #4cb1f9 !important;
    --folder-color-draft: #c084fc !important;
    --folder-color-sent: #4ade80 !important;
    --folder-color-archive: #d7bc96 !important;
    --folder-color-spam: #f87171 !important;
    --folder-color-trash: #9b9ec2 !important;
    --folder-color-template: #e4e4e7 !important;
    --folder-color-newsletter: #e4e4e7 !important;
    --folder-color-rss: #fb923c !important;
    --folder-color-outbox: #27d3d6 !important;
    --folder-color-folder: #fef08a !important);
    --folder-color-folder-filter: #ee75d7 !important);
    --folder-color-folder-rss: #fb923c !important;
  }

The only unexpected oddity so far is that the properties dialog for some mail folders now show black as the color. But I don't need to mess around with that anyway.

das10 · Sep 13, 2023

Wisewiz; I did try the following rule for the Contacts Panel. But it also affected the "Calendar Search" events tree, and I don't know what other "Trees" (if any) it might affect. If you like, you can check to see if it affects any other Trees adversely, in which case it might be best left alone.

Code:

/* Contacts (& Calendar events) trees and any other Trees? */
tree > treechildren {
  color:            white   !important;
  background-color: #336699 !important;
}