Thunderbird 102.14: CSS Customization

Wisewiz · Aug 15, 2023

While I'm still running 102 (alongside 117 beta, currently) I'd like to work 102's userChrome a bit to give it some color. In particular, I'd like to keep the dark color (#29116e) for the background of the tabs strip (Inbox and other open tabs), and give the command bar (Address book on the left) the blue color I now have for the Menu bar (#336699).

@das10 and the others who have been participating in the 115 Customization thread: please have a look at this and see whether you can tell me how to apply the colors specified above. I'd also like to move the command bar up to just below the Menu bar, with the tab strip below the command bar. If I can get it that way, I'll probably reset the command bar to 29116e and the tab strip to 336699.

Not Myself · Aug 15, 2023

mozillaZine?

Wisewiz · Aug 15, 2023

Searched all over MozillaZine and found nothing relevant, but thanks for the suggestion.

Okay, so I've got the Menu bar, Command bar, and tab strip in the order top-to-bottom that I wanted. Found an add-on called "Rise of the Tools" that moved the Command bar up.

But I still can't figure out how to change the background color of the tab strip. It's now the same color as the Command bar.

I just need to distinguish between the Command bar and the tab bar in userChrome.css.

das10 · Aug 16, 2023

This might help get you started.

Code:

/* Menu Bar */
#toolbar-menubar[toolbarname]:not([autohide="true"]) {
     background-color: #336699 !important;
     color:            White   !important;
}

/* Tabs Toolbar (covers whole bar) */
#tabs-toolbar  {
     background-color: #29116e !important;
}

/* Tabs which are not active */
     .tabmail-tab:not([selected], :-moz-lwtheme) {
     color:    white !important;
     border:   1px solid grey !important;
}

/* "Universal Tool Bar" */
     .inline-toolbar {
     background-color: #336699 !important;
     color:            White   !important;
}

/* Spaces Toolbar Button which is active */
.spaces-toolbar-button.current, .spaces-toolbar-button.current:hover, #spacesAccentPlaceholder {
     background-color:  #336699 !important;
}

/* Spaces Toolbar Buttons - default background & foreground colors*/
.spaces-toolbar-button {
     background-color: #29116e !important;
     color:            White   !important;
}

/* Spaces Toolbar buttons when hovered over */
.spaces-toolbar-button:hover:not(.current) {
     background-color: #006699 !important;
     color:            white   !important;
     outline:          1px solid white !important;
}

/* Spaces Toolbar */
.spaces-toolbar {
     background-color: #29116e !important;
}

Can't find anything to change the order of the Menu - Tabs - Universal Toolbar in CSS. I rarely if ever customized the older versions of Thunderbird (only started when version 115 appeared), so the above CSS rules might not even cover everything you want. Also, I see that you are using an add-on to change the Tabs order, so I don't know if it will affect the above CSS (as a rule, I personally, never use add-ons in any email client, so couldn't test the above CSS with the add-on that you are using).

das10 · Aug 16, 2023

Forgot about the "Spaces pinned button" (when Spaces bar is not enabled).

Code:

#spacesPinnedButton {
     background-color: #29116e !important;
     color:            white !important;
}

Wisewiz · Aug 16, 2023

@das10
Still nursing my morning coffee here in balmy Southern Ontario, but I’ll give all of this a careful look after I feed the livestock. Many thanks, again, for all the gathering and posting of all this. HAGD!

das10 · Aug 16, 2023

No worries.
Small update to also show the hover effects on Menu captions and the non-active tabs.

Code:

/* Menu Bar captions - the hover effect */
menubar > menu:hover {
     background-color:  aliceblue !important;   
     color:             black     !important;
}

/* Tabs which are not active - the hover effect */
     .tabmail-tab:not([selected], :-moz-lwtheme):hover {
     background-color: white    !important;
     color:            black    !important;
}

Wisewiz · Aug 16, 2023

@das10: I know this is an exercise in futility, given that 102.14 is doomed to be replaced by a member of the 115 "SuperNova" family ASAP, but there will be thousands of users who cling to the 102 series and refuse to "upgrade" to the 115+ series, because they don't want to change when they don't have to, or for other reasons, such as fear that they'll lose their tens of thousands (!) of old emails if they change anything again.

Any way, I'm happy with the way this has turned out, and I think I'll just let it rest now until I open it once each morning to check and see whether there's an auto-update available for 102 to 115+.

Wisewiz · Aug 16, 2023

@das10: Could you find a way to reduce the heights of the tab bar and the main toolbar to about the height of the Menu bar? They just look fat to me, while the menu bar is (to quote Goldilocks) "just right."

Edit: I've shrunk the tab bar a tad, and it looks better, but I can't seem to get the handle on the ToolBar to shrink it. When I apply the same measurements I used for the tab bar, the toolbar tries to hide behind the message list. Here's where I am now:

das10 · Aug 16, 2023

If I try and make some additions around lines numbers 9, 23, 26 & 52 below, I can just about get away without making further changes to compensate for any other odd display of elements (that would be a bit time consuming to work out).

I don't know if it would also work for your particular Screen display resolution or your toolbar add-on, but you can only try. (You may need to adjust the px values that I have used).

Code:

/* Menu Bar */
#toolbar-menubar[toolbarname]:not([autohide="true"]) {
     background-color: #336699 !important;
     color:            White   !important;
}

/* Tabs Toolbar (covers whole bar) */
#tabs-toolbar  {
     height:           26px   !important;              /* Adjust Height Of Tabs Bar */
     background-color: #29116e !important;
}

/* Tabs which are not active */
     .tabmail-tab:not([selected], :-moz-lwtheme) {
     color:    white !important;
     border:   1px solid grey !important;
}

/* "Universal Tool Bar" */
     .inline-toolbar {
     background-color: #336699 !important;
     color:            White   !important;
     height:           26px    !important;              /* Adjust Height Of Universal Toolbar */
}

/* Adjust The Padding Above And Below The Buttons In The Universal Toolbar To Compensate For The New Height */
.toolbarbutton-1 {
     margin-block: -1px  !important;;
}

/* Spaces Toolbar Button which is active */
.spaces-toolbar-button.current, .spaces-toolbar-button.current:hover, #spacesAccentPlaceholder {
     background-color:  #336699 !important;
}

/* Spaces Toolbar Buttons - default background & foreground colors*/
.spaces-toolbar-button {
     background-color: #29116e !important;
     color:            White   !important;
}

/* Spaces Toolbar buttons when hovered over */
.spaces-toolbar-button:hover:not(.current) {
     background-color: #006699 !important;
     color:            white   !important;
     outline:          1px solid white !important;
}

/* Spaces Toolbar */
.spaces-toolbar {
     margin-top: -26px !important;             /* To Compensate For Reduced Tabs & Universal Toolbar height */
     background-color: #29116e !important;
}

/* Spaces Toolbar pinned button - when Spaces bar is not enabled */
#spacesPinnedButton {
     background-color: #29116e !important;
     color:            white !important;
}

/* Menu Bar captions - the hover effect */
menubar > menu:hover {
     background-color:  aliceblue !important;  
     color:             black     !important;
}

/* Tabs which are not active - the hover effect */
     .tabmail-tab:not([selected], :-moz-lwtheme):hover {
     background-color: white    !important;
     color:            black    !important;
}

Wisewiz · Aug 16, 2023

Took the add-on off, and will try this all and report in a few. Gracias, amigo.

Report: Neat-O! They're thinner and almost the same size.

Wisewiz · Aug 17, 2023

This is where I am at the moment, and I think I'll leave it there. And this is with Rise of the Tools back in 102.14 as an add-on. Had to adjust the height of the Spaces bar, because Rise of the Tools left a gap to the left of the Main toolbar if I showed the Spaces bar (but there was no gap if I didn't show the Spaces bar -- just to be clear). And if you don't use Rise of the Tools, you won't need the -57 line under Spaces toolbar. About -26 should do it.

CSS:

#folderTree  {
font-size: 14px !important; }

#threadTree {
font-size: 14px !important; }

#threadTree > treechildren::-moz-tree-row {
  border-bottom: 2px solid Black !important;
  }

#threadTree treecol, #threadTree .treecol-image {
font-size:   16px !important;
font-weight: normal !important;
padding-top: 2px !important;
padding-bottom: 2px !important;
}

#tabs-toolbar  {
     background-color: #336699 !important;
}

/* Active tabs */
   .tabmail-tab {
   background-color: #4682b4 !important;
   color: black !important;
}

/* Tabs which are not active */
     .tabmail-tab:not([selected], :-moz-lwtheme) {
    background-color: #b0c4de !important;
     color: black !important;
}

  .tabmail-tab {
height: 16px !important;
padding-top: 0px !important;
padding-bottom: 2px !important;
}

/* "Universal Tool Bar" */
     .inline-toolbar {
     background-color: #29116e !important;
     color:            White   !important;
     height:           26px    !important;              /* Adjust Height Of Universal Toolbar */
}

/* Adjust The Padding Above And Below The Buttons In The Universal Toolbar To Compensate For The New Height */
.toolbarbutton-1 {
     margin-block: -1px  !important;;
}

/* Menu Bar */
#toolbar-menubar[toolbarname]:not([autohide="true"]) {
     background-color: #336699 !important;
     color:            White   !important;
}

/* Spaces Toolbar */
.spaces-toolbar {
     margin-top: -57px !important;             /* To Compensate For Reduced Tabs & Universal Toolbar height */
     background-color: #29116e !important;
}

Wisewiz · Aug 17, 2023

Coupla changes, to get the tabs right for my color scheme:

CSS:

#folderTree  {
font-size: 12px !important; }

#threadTree {
font-size: 14px !important; }

#threadTree > treechildren::-moz-tree-row {
  border-bottom: 2px solid Black !important;
  }

#threadTree treecol, #threadTree .treecol-image {
font-size:   16px !important;
font-weight: normal !important;
padding-top: 2px !important;
padding-bottom: 2px !important;
}

#tabs-toolbar  {
     background-color: #336699 !important;
}

/* Active tabs */
   .tabmail-tab {
   background-color: #336699 !important;
   color: black !important;
}

/* Tabs which are not active */
     .tabmail-tab:not([selected], :-moz-lwtheme) {
    background-color: #336699 !important;
     color: white !important;
}

  .tabmail-tab {
height: 16px !important;
padding-top: 0px !important;
padding-bottom: 2px !important;
}

/* "Universal Tool Bar" */
     .inline-toolbar {
     background-color: #29116e !important;
     color:            White   !important;
     height:           26px    !important;              /* Adjust Height Of Universal Toolbar */
}

/* Adjust The Padding Above And Below The Buttons In The Universal Toolbar To Compensate For The New Height */
.toolbarbutton-1 {
     margin-block: -1px  !important;;
}

/* Menu Bar */
#toolbar-menubar[toolbarname]:not([autohide="true"]) {
     background-color: #336699 !important;
     color:            White   !important;
}

/* Spaces Toolbar */
.spaces-toolbar {
     margin-top: -57px !important;             /* To Compensate For Reduced Tabs & Universal Toolbar height */
     background-color: #29116e !important;
}

Thunderbird 102.14: CSS Customization

𝐒𝐩𝐞𝐚𝐤𝐬 𝐀𝐧𝐜𝐢𝐞𝐧𝐭 𝐆𝐞𝐞𝐤

My Computers

Well-known member

My Computer

𝐒𝐩𝐞𝐚𝐤𝐬 𝐀𝐧𝐜𝐢𝐞𝐧𝐭 𝐆𝐞𝐞𝐤

My Computers

Well-known member

My Computer

Well-known member

My Computer

𝐒𝐩𝐞𝐚𝐤𝐬 𝐀𝐧𝐜𝐢𝐞𝐧𝐭 𝐆𝐞𝐞𝐤

My Computers

Well-known member

My Computer

𝐒𝐩𝐞𝐚𝐤𝐬 𝐀𝐧𝐜𝐢𝐞𝐧𝐭 𝐆𝐞𝐞𝐤

My Computers

𝐒𝐩𝐞𝐚𝐤𝐬 𝐀𝐧𝐜𝐢𝐞𝐧𝐭 𝐆𝐞𝐞𝐤

My Computers

Well-known member

My Computer

𝐒𝐩𝐞𝐚𝐤𝐬 𝐀𝐧𝐜𝐢𝐞𝐧𝐭 𝐆𝐞𝐞𝐤

My Computers

𝐒𝐩𝐞𝐚𝐤𝐬 𝐀𝐧𝐜𝐢𝐞𝐧𝐭 𝐆𝐞𝐞𝐤

My Computers

𝐒𝐩𝐞𝐚𝐤𝐬 𝐀𝐧𝐜𝐢𝐞𝐧𝐭 𝐆𝐞𝐞𝐤

My Computers

Similar threads