Thunderbird 115: CSS Customization

Wisewiz · Oct 31, 2023

Aaaand, if I hover over the columns bar (it's not the Message Header bar; I've hidden that), it shows the default washed-out gray with white lettering, and it's kinda ugly that way.

A fix that would fit?

Wisewiz · Oct 31, 2023

@das10 Nope. The 2-pixel fix did zilch. Gonna try the new one now. Back in a min.

Wisewiz · Oct 31, 2023

@das10 Nope again. The "as a test" code didn't round 'em either. Dinna worry about it. It's all good enough.

das10 · Oct 31, 2023

re: the border radii - Test when you have time with a border radius of 100px to see how far it is getting cut off.

re: The hover color for the thread pane "column headers" can be modified using:

Code:

/* messages list column headers - hover effect */
/* select colors as req'd                                                       */
#threadTree button:not(#threadTree tbody button):hover {
     background-color: lightgrey     !important;
     color:            black         !important;    
}

I don't know why the hover effect doesn't work on your System, as it works on mine even when using your userChrome file. (Perhaps you could post your whole userChrome.css again - maybe something's off/missing there ?).

Wisewiz · Oct 31, 2023

OK, that works great for the "column header" line. I'll adjust that as needed later. Gonna try the "100px"-fix now, and I'll post the whole enchilada in a bit.

Wisewiz · Oct 31, 2023

100px-fix result:

Wisewiz · Oct 31, 2023

Enchilada follows.

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:  #4080BF    !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;
}

#folderTree li[data-server-type] > .container > .icon {
  --icon-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;
}

#folderTree li[data-folder-type="outbox"]  { display: None !important; }


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

#unifiedToolbar .button:is(.toolbar-button, .unified-toolbar-button):hover {
     border-radius: 100px             !important;
     border:        1px solid white !important;
     background:    white           !important;   /* color of background */
     color:         #29116e         !important;   /* color of text/icons */
}

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 background / 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 2px black !important;
}

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

#tabs-toolbar:not([brighttext]) button.tab-close-button:hover {
  background-color: #29116e !important;
  color:            White  !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;
}

/*         Write window Contacts - Hover color.              */
#abResultsTree  > treechildren::-moz-tree-row(hover) {
  background-color: #4080BF         !important;
}

/*         Write window Contacts - Selected color.           */
/* note: use a light color here (when using the default      */
/* System theme, the text color will be white when selected  */
/* & black when focus moves away from Contacts List).        */
/* - can't find a way to change text color.                  */
#abResultsTree  > treechildren::-moz-tree-row(selected) {
  background-color: #29116e  !important;
  color:         white  !important;
  outline:          none            !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 · Oct 31, 2023

Sorry: that one didn't include the "column header" thing, which worked a treat.

das10 · Oct 31, 2023

Wisewiz:
There may be no need to include the column headers code (unless you wish to alter the default hover color (~lightgrey). I have now adjusted your code for the message hover and selection (which was the cause of that headers issue). The new selectors are based on the source code variables.

As for the borders around the hovered Unified Toolbar buttons ; I still can't figure out why it might not be working for you - perhaps other users could try the full userChrome.css and figure it out.

Your updated userChrome.css
-only lines 27 and 33 modified.
-showing result with 8px radii on Unified Toolbar buttons hover.

Code:

/* 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:  #4080BF    !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;
}

#folderTree li[data-server-type] > .container > .icon {
  --icon-color: white !important;
}

/* Message Pane - Hover Message background/foreground-color */
[is="tree-view-table-body"] > *:hover {
  background-color: #4080BF  !important;
  color: white  !important;
}

/* Message Pane - Selected Message background/foreground-color */
[is="tree-view-table-body"] >.selected {
  background-color: #29116e  !important;
  color: white !important;
}

#folderTree li[data-folder-type="outbox"]  { display: None !important; }


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

#unifiedToolbar .button:is(.toolbar-button, .unified-toolbar-button):hover {
     border-radius: 100px             !important;
     border:        1px solid white !important;
     background:    white           !important;   /* color of background */
     color:         #29116e         !important;   /* color of text/icons */
}

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 background / 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 2px black !important;
}

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

#tabs-toolbar:not([brighttext]) button.tab-close-button:hover {
  background-color: #29116e !important;
  color:            White  !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;
}

/*         Write window Contacts - Hover color.              */
#abResultsTree  > treechildren::-moz-tree-row(hover) {
  background-color: #4080BF         !important;
}

/*         Write window Contacts - Selected color.           */
/* note: use a light color here (when using the default      */
/* System theme, the text color will be white when selected  */
/* & black when focus moves away from Contacts List).        */
/* - can't find a way to change text color.                  */
#abResultsTree  > treechildren::-moz-tree-row(selected) {
  background-color: #29116e  !important;
  color:         white  !important;
  outline:          none            !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 · Oct 31, 2023

Making the padding-block even larger in the Unified Toolbar ( as per your code in #339 ) would I think most probably bring the button borders into view for you - of course that would make your Unified toolbar taller. Although I am still interested to find out why your CSS works for me and not you. When I have time, I'll compare the code to my experimental WIP (although it is still a bit buggy).

Wisewiz · Oct 31, 2023

@das10 Please do.

Wisewiz · Oct 31, 2023

I'm okay with this. Works. The only thing missing is the rounded hover items thing. Fuggeddaboudit. I'd like to see others try this code as userChrome.css.

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:  #4080BF    !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;
}

#folderTree li[data-server-type] > .container > .icon {
  --icon-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;
}

#folderTree li[data-folder-type="outbox"]  { display: None !important; }

#unifiedToolbar .button:is(.toolbar-button, .unified-toolbar-button):hover {
     background: white     !important;   /* color of background */
     color:      #29116e     !important;   /* color of text/icons */
}

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

#unifiedToolbar .button:is(.toolbar-button, .unified-toolbar-button):hover {
     border:        1px solid white !important;
     background:    white           !important;   /* color of background */
     color:         #29116e         !important;   /* color of text/icons */
}


/* messages list header buttons background hover effect */
/* select colors as req'd                                                       */
#threadTree button:not(#threadTree tbody button):hover {
     background-color: lightgrey     !important;
     color:            black         !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 background / 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 2px black !important;
}

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

#tabs-toolbar:not([brighttext]) button.tab-close-button:hover {
  background-color: #29116e !important;
  color:            White  !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;
}

/*         Write window Contacts - Hover color.              */
#abResultsTree  > treechildren::-moz-tree-row(hover) {
  background-color: #4080BF         !important;
}

/*         Write window Contacts - Selected color.           */
/* note: use a light color here (when using the default      */
/* System theme, the text color will be white when selected  */
/* & black when focus moves away from Contacts List).        */
/* - can't find a way to change text color.                  */
#abResultsTree  > treechildren::-moz-tree-row(selected) {
  background-color: #29116e  !important;
  color:         white  !important;
  outline:          none            !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 · Nov 1, 2023

Wisewiz, I have removed two duplicate rules from your userChrome.css (re: the message hover/selected rules mentioned in #349) which are still showing in the css file you have just posted.
userChrome.css

Code:

/* 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:  #4080BF    !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;
}

#folderTree li[data-server-type] > .container > .icon {
  --icon-color: white !important;
}

/* Message Pane - Hover Message background/foreground-color */
[is="tree-view-table-body"] > *:hover {
  background-color: #4080BF  !important;
  color: white  !important;
}

/* Message Pane - Selected Message background/foreground-color */
[is="tree-view-table-body"] >.selected {
  background-color: #29116e  !important;
  color: white !important;
}

#folderTree li[data-folder-type="outbox"]  { display: None !important; }


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

#unifiedToolbar .button:is(.toolbar-button, .unified-toolbar-button):hover {
     padding-block: 1px             !important;
     background:    white           !important;   /* color of background */
     color:         #29116e         !important;   /* color of text/icons */
}

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 background / 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 2px black !important;
}

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

#tabs-toolbar:not([brighttext]) button.tab-close-button:hover {
  background-color: #29116e !important;
  color:            White  !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;
}

/*         Write window Contacts - Hover color.              */
#abResultsTree  > treechildren::-moz-tree-row(hover) {
  background-color: #4080BF         !important;
}

/*         Write window Contacts - Selected color.           */
/* note: use a light color here (when using the default      */
/* System theme, the text color will be white when selected  */
/* & black when focus moves away from Contacts List).        */
/* - can't find a way to change text color.                  */
#abResultsTree  > treechildren::-moz-tree-row(selected) {
  background-color: #29116e  !important;
  color:         white  !important;
  outline:          none            !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;
}

(pn: btw, what settings do you use for "Density" and "Font" size ?)

Wisewiz · Nov 1, 2023

@das10
Got it; looks great; got roundeds in UTB (not in others, but no big deal).
Default density and Verdana 17.
Many thanks for reviewing and correcting my file.
Dan

Wisewiz · Nov 1, 2023

@das10
Your question got me thinking: maybe if I add a pixel here and there, there'll be more room for my large font, and for the rounded bubbles. It's been a busy day, with grocery shopping, a dentist visit for a cleaning (don'tcha just LUV those?), so I haven't had the time to play, but maybe later.

Wow! Your shot in #350 is impressive!

das10 · Nov 1, 2023

Yes, it certainly might be possible to try and fix the Unified Toolbar height to a variable height (instead of using a fixed value of 26ps). It may be better to get it to a smaller size by only adjusting all the padding and margins in that Toolbar; this could also enable the use of "Icons above Text" in settings (should one ever wish:). Although it would mean making the Toolbar slightly taller.

Wisewiz · Nov 1, 2023

Tx. Gonna fiddle around, first time I get the chance.

Wisewiz · Nov 2, 2023

@das10 re: #60 above, and the artefact. I'm using a thicker line now, and that artefact is really big as a result. Seen anything that'll work to get rid of that tiny glitch?

das10 · Nov 2, 2023

Yes; this by Morat, one of the Gurus at Mozillazine (I modified it slightly to include both Cards View and Table View").
Lines between messages in Cards View and Table View.

Code:

/* Lines between messages in Cards View and Table View */
table[is="tree-view-table"],
table[is="thread-card-table"] {
     border-collapse: collapse      !important;
}
tr[is="thread-row"],
tr[is="thread-card"] {
  border-bottom: 2px solid black !important;  
}