Thunderbird 115: CSS Customization

Wisewiz · Aug 14, 2023

The current, somewhat evolved, but not so much:

ltsnow · Aug 14, 2023

Wisewiz said:
@das10

As always, you’ve shown me what I was missing. I’m going to play with it some more today. And yes, reconfiguring things is always a WIP for me, too.

Sincere thanks for all your support. Again.

I’m running 117.0b3 this morning, and expecting b4 to be posted today or tomorrow. The bug-reporting community has become amazingly large and active. I’m amazed at how much attention a mail client has drawn.

Yes sir, this is fun and I really appreciate your starting this thread. I really enjoy playing with css code and when 115 came out I was skeptical that I would be able to get it the way I like it. But with the css code that you have posted here and the new compatible releases of Compact Headers and Start with Inbox I've pretty much got it looking good. Now I am just waiting on Aris-t2 to update his code so I can add custom icons to the unified toolbar.

Wisewiz · Aug 14, 2023

Nothing to be appreciative about, Lt. I was desperate to find some answers, and through (now) eight pages of the thread, everything I needed to know emerged. I suspect (ah, I know) we've had thousands of guests who've found us through Google and benefited from skimming and scanning this thread. I agree: it's been (and continues to be) fun --- more fun that I ever thought I'd have with an email client (fer cryin' out loud!).
I'm getting closer to my goal with every edit of my userChrome.css. Notice, BTW, that the color scheme includes the Selected icon of the Spaces bar, and the two primary colors of the bars compliment each other. (The wife helped with that.)

das10 · Sep 8, 2023

Just testing Wisewiz's mod on Version 118.0b1 for the "Write" email window.

Code:

/* Thunderbird using Compact Density  */
/* modded Wisewiz CSS in Ver 118.0B1 for testing only */

#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;  
}
/*====================================================================================*/
/* Thunderbird Write Window Backgrounds and Colors Start*/

/* 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: lightgrey !important;
}
#compose-toolbox menubar menu:hover {
  background-color: #336699    !important;
  color:            lightgray  !important;  
}
/* Format toolbar */
#FormatToolbox,
#FormatToolbar > menulist  {
  background-color: #26119e !important;
  color:            white   !important;
}
/* End of "Write" Window CSS */
/*==========================================================================================*/

[ATTACH type="full"]70402[/ATTACH]

Wisewiz · Sep 8, 2023

@das10

That works beautifully in my 118.0b2! And I didn't have to give up the height control on the tab bar! Thank you so much! (Too da**ed many exclamation points!)

The only thing that rattled me slightly was that the View menu showed the top two items whited out, so I thought I'd lost access to the optional Composition and Formatting bars, but a click on the item brought it out of hiding immediately, and it worked as expected. Oh, and I was concerned about the fact that you specified Compact Density at the beginning, cuz I use Default, but that turned out not to be relevant for me. Both Compact and Default work perfectly.

You're a true wizard, my friend.

I have a new userChrome.css.

Merry Christmas! :party:

Wisewiz · Sep 8, 2023

@das10

Tried your new code on my 115.2 installation, and it worked perfectly there, too, without the loss of the Tab bar height control.
Wow!

One thing you should know that you probably wouldn't have noticed, since you (and the rest of us) don't use the Formatting bar:
It shows up as my dark purplish color superimposed on a white background, with a violet (violent?) outcome. No problem, cuz I will almost never use that toolbar. Just thot you should know. The same effect happens on both 115.2 and 118.0b2.

das10 · Sep 8, 2023

Yes that formatting bar was as error on my part! In the very last part of the CSS file, just below /* Format toolbar */ , the

background-color: #26119e !important;
should be
background-color: #29116e !important;

to match one of your overall theme colors.

Wisewiz · Sep 8, 2023

@das10

Another footnote: The color settings hold on 118 (left) in Contacts panel, but not on 115. Again, no big deal, but I thought you'd want to know.

das10 · Sep 8, 2023

The Contacts section is under the following heading within the above CSS file.

/* Contacts - Side panel */

If it is removed, you get the normal plain grey/white colors there.

Wisewiz · Sep 8, 2023

@das10

As is so often the case when some jerk claims something isn't working, when you know full well that it is working, there was a stupid user error involved in that last post. My apologies.

Explanation, not excuse: Two office machines, both with TB115 and 118b. Sometimes I forget which one I've done what to, as I wheel back and forth between machines. The shot on the right above came from the machine that didn't yet have your new userChrome.css on its 115.

Edwin · Sep 8, 2023

How would I go about changing the color of the Main Toolbar background and the Folder Pane background only, with CSS?

Wisewiz · Sep 8, 2023

Maybe you should/could specify which version you're editing the userChrome for, @Edwin. @das10 did his revision-plus of my old code for my old 118.0b1. I found it excellent for that one, so applied it as a test to 115.2 (non-beta). Worked. Same basis involved in all the 115- and-up versions, so far, ofc, so I had no reason to think it wouldn't work. But, ... hey, you never know.

Edwin · Sep 8, 2023

Wisewiz said:
Maybe you should/could specify which version you're editing the userChrome for...

119 Daily

Edwin · Sep 8, 2023

Never mind! I got it..., some of @das10 's code worked!

Wisewiz · Sep 8, 2023

@Edwin

So, ... you wanna share your CSS with the rest of us, hmmmm? I'd like to see what the Folder pane background looks like with a diff colour.

das10 · Sep 8, 2023

In case anybody finds it useful. I had made some notes whilst using the Thunderbox Browser toolbox, and found 'most' of these to work (maybe not all of them perfectly).

Code:

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

/* folders pane the header section */
#folderPaneHeaderBar:not([hidden]) {
    background-color: red    !important;
    color:            yellow !important;
    fill:             green  !important;
}

/* for the New Message Box in the above header */
#folderPaneWriteMessage {
  background-color: Orange !important;
  color:            white  !important;;
}
#folderPaneWriteMessage:hover {
  background-color: rgba(0,180,0,1) !important;
  color:            rgba(240,240,240,1) !important;;
}

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

/* ================================================================================*/
/* Universal Toolbar background & foreground */
#unifiedToolbar {
  /*height:  min-content  !important;*/
  /*padding-block:   1px  !important;*/
  /*margin-block:    0px  !important;*/
  background:     lightseagreen  !important;
  color:          white   !important;
}

Wisewiz · Sep 8, 2023

@das10

Thank you, ma man. That gives me stuff to play with for the next hour or two. Yeah.

Edwin · Sep 8, 2023

Wisewiz said:
@Edwin

So, ... you wanna share your CSS with the rest of us, hmmmm? I'd like to see what the Folder pane background looks like with a diff colour.

Meh..., it's not great..., I gotta play around with it...

larc919 · Sep 8, 2023

Wisewiz said:
The only thing that rattled me slightly was that the View menu showed the top two items whited out, so I thought I'd lost access to the optional Composition and Formatting bars, but a click on the item brought it out of hiding immediately, and it worked as expected.

Too bad that doesn't work on Zoom. I recently got upgraded to 115.2 and everything is much bigger than it was. The whole window needs zooming out about 2 or 3 clicks, but that ordinary feature won't respond either by clicking on it or using Ctrl + -. Aside from everything being too big, the GUI does look better.

Wisewiz · Sep 8, 2023

@Edwin

Hey! That's MY colour you're trying out! I thought das10 suggested garish colours. (So we could see what happens ...)

"Playing around with it" is the name of the game. (For CSS customizing, I mean!)