Thunderbird 115: CSS Customization

Edwin · Sep 9, 2023

Darn near perfect!
Thanks guys!

Wisewiz · Sep 9, 2023

@das10 and @Edwin

Everything works, but a small glitch happens in the message list pane with the hover setting included in the userChrome: the selected color only comes on when the mouse is moved; the click on the message doesn't make it the selected color until the mouse is moved off the selected message. I found that removing the hover code lines brings back the instant coloring action of clicking the message; the mouse doesn't have to move away. That brings back the default hover color, but as I said in a post above, I don't mind that greyish-blue.

EDIT: Actually, I've just discovered that the behavior of the select click in the folder pane is the same with the hover setting in place. You have to move the mouse to see the select color. Take out the hover setting, and the select color works immediately upon clicking. Hmmm.

If I could have both my custom hover color AND the instant selected color, I'd rejoice. Until then, I'm a very happy camper!

Thank you, @das10 and @Edwin for sticking it out through all of this evolution process.

Edwin · Sep 9, 2023

Wisewiz said:
... the selected color only comes on when the mouse is moved; the click on the message doesn't make it the selected color until the mouse is moved off the selected message.

I don't have that...,

however, my hover and selected color is the same!

Wisewiz · Sep 9, 2023

Edwin said:
I don't have that..., however, my hover and selected color is the same!

Yeah, that would do it. When you hover, you get the hover color instantly; when you select, the hover color is already there, so you don't notice that the color change didn't happen. It didn't. Same danged color.

das10 · Sep 9, 2023

Wisewiz, could you try swapping the order of the two rules around, so that the whole "message hover rule" is above the "message selected rule"? If that doesn't work, maybe you post your full CSS file?

Make it so - hover rule above selected rule:

Code:

/* Message Pane - Hover Message background/foreground-color */
tr:hover {
    background-color: rgba(255,0,0,0.45) !important;
  color:            white !important;
}

/* Message Pane - Selected Message background/foreground-color */
tr.selected {
  background-color: rgb(8,148,148) !important;
  color: white !important;
}

Edwin · Sep 9, 2023

Wisewiz said:
Same danged color.

My entire OS is made up of dual inversions of one color, sort of..., plus the standard black.
Windows Mica

ruins everything though!!!

Wisewiz · Sep 9, 2023

@das10

Will do. Gotta join the missus for dinner just now. Back after Jeopardy! if it's not a rerun. Tx.

das10 · Sep 9, 2023

If that works, do the same swap arounds with the "folder selected / hover" rules (so hover rule above the selected rule).

There's no hurry, it's getting late here as well.

Wisewiz · Sep 9, 2023

das10,
I'm back, but haven't done the switches yet. Tell me what part of the globe you live in, please. East side or West side of the Atlantic pond?

Wisewiz · Sep 9, 2023

@das10

It worked. I am posting the whole enchilada, because I'd appreciate your having a look to see whether it's all in order. Thank you, sir.

CSS:

/* folders list HOVER color */
/* can change the background-color value to ay particular value */
#folderTree li > .container:hover {
  background-color: #0D4D92    !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;
}

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

/* Message Pane - Hover Message background/foreground-color */
tr:hover {
    background-color: #4080BF  !important;
  color:            white !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;
}

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: address box */
.address-pill  {
  background-color: #336699 !important;
  color:            White  !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;
}

das10 · Sep 10, 2023

I am glad it worked for you. Apparently, with CSS, if two rules are acting on an element at the same time, then the one which comes last wins. I recall Ghot also mentioning it in his "Taming the beast (Firefox)" thread on TenForums, and this is a nice example of it.

So in your case, whilst the mouse has both "selected" the message and it is "hovering" over it at the same time, you want the "select" rule after the hover rule.

Thank you for posting your userChrome.css file; I have tried it, and on the whole it looks quite nice. And, as long as you are happy with it, that's all that matters.

Edwin · Sep 10, 2023

das10 said:
Thank you for posting your userChrome.css file...

Mine's a mess but, the rules seem to be in the right order!

I've even got a couple double entries!

das10 · Sep 10, 2023

Are you using the Thunderbirds DevTools to debug your own userChrome.css "live" ?

That way you just test by deleting any rules you think are duplicates to see if it affects the Chrome elements without having to keep saving your changes, closing Thunderbird, and re-starting it again over and over.

(I can't recall if it was you who mentioned actually using it in Ghot's "Taming the Beast (Firefox)" thread on WindowsTenForums, but that's where I first got the idea of using the DevTools to make live changes to userChrome.css).

eg: Wisewiz's userChrome.css live in use.

The DevTools window showing his userChrome.css.

Edwin · Sep 10, 2023

das10 said:
Are you using the Thunderbirds DevTools to debug your own userChrome.css "live" ?

No..., good idea though!

Oblias · Sep 10, 2023

Edwin said:
Darn near perfect!
Thanks guys!

View attachment 70515

Any chance of getting a copy of your hard, but most beautiful work? Or is it considered 'bad form' to ask here on the forum?

Edwin · Sep 10, 2023

Oblias said:
Any chance of getting a copy of your hard, but most beautiful work? Or is it considered 'bad form' to ask here on the forum?

Naw..., have at 'er, chief, but, as I posted earlier, it might be a little screwed up!!!

Code:

menubar, toolbar, nav-bar, #TabsToolbar > *{
background-color:#544434 !important;
}


table[is="tree-view-table"]{
  background: #544434 !important;
}


#threadPane > tree-view {
  -moz-context-properties: fill;
  fill: currentColor;
  background-color: #544434 !important;
  color: var(--tree-view-color);
}


#folderPane {
  background-color: #2f261d !important;
}


#unifiedToolbar {
  background: #544434 !important;
}


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


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


/* Message pane */
tr[is="thread-row"]:hover {
  background-color: #2f261d !important;
}
[is="tree-view-table-body"] > .selected {
  background-color: #2f261d !important;
}
[is="tree-view-table-body"] > .selected:hover {
  background-color: #2f261d !important;
}


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


/* Message Pane - Hover Message background/foreground-color */
tr:hover {
    background-color: #2f261d !important;
  color:            white !important;
}

Oblias · Sep 10, 2023

Edwin said:
Naw..., have at 'er, chief, but, as I posted earlier, it might be a little screwed up!!!

Many thanks!! I think the color combination is outstanding, and I can now follow along with the progress you are making. I can't code at all, so having this is really great!! I assume I just put it in the default profile/chrome folder, yes? I think I at least know that much..

Edwin · Sep 10, 2023

Oblias said:
I just put it in the default profile/chrome folder, yes?

Yup.
There's quite a few settings you have to customize on your own though, like toolbar, menu and folder layouts..., changing the folder pane icons to the same color, etc...

Edwin · Sep 10, 2023

Oblias said:
Many thanks!!

The thanks belongs to @das10 !

He knows the language and guides us along!

Oblias · Sep 10, 2023

Edwin said:
Yup.
There's quite a few settings you have to customize on your own though, like toolbar, menu and folder layouts..., changing the folder pane icons to the same color, etc...

Alright, then, I best get at it. Yes, I thank all the others who share their experience and knowledge also!