Thunderbird 115: CSS Customization

das10 · Sep 10, 2023

Edwin; actually I don't know the the CSS language as such, but try to pick up CSS rules from other users' CSS files and then refer to online resources such as the Mozilla Developer website to see how it is used and to explore any tips and tricks. It's then back to the Firefox or Thunderbird DevTools to live debug any possibilities. Also, the inspector tool allows you to see how the Mozilla teams have actually used CSS.

CSS basics - Learn web development | MDN

CSS (Cascading Style Sheets) is the code that styles web content. CSS basics walks through what you need to get started. We'll answer questions like: How do I make text red? How do I make content display at a certain location in the (webpage) layout? How do I decorate my webpage with background...

developer.mozilla.org

Wisewiz · Sep 10, 2023

das10 said:
.... Apparently, with CSS, if two rules are acting on an element at the same time, then the one which comes last wins. ... you want the "select" rule after the hover rule.

@das10

In linguistics, my once-upon-a-time academic field, we study (among other things) what a speaker has to know in order to speak a language. We express that knowledge as a set of (mostly simple) rules. One of the interesting discoveries in the linguistics of the latter half of the twentieth century was that in every known language, rules can have interesting relationships with each other: one rule can be dependent on another: it can only apply in the language if the other rule is operative. That means, in a sense, that the two rules are ordered with respect to each other. If yer gonna use one sentence-structure possibility in the language, you gotta use the other possibility (first, in some abstract sense not worth discussing here).

Now, with that out of the way, and now that we've proven that the order of two rules in CSS can be crucial, in my next post, I'm gonna get back on topic, and ask another question about my Thunderbird installations.

You've been an amazing resource in this battle to control Thunderbird's UI. I'm going to make an effort to make my next question the last. Now I'm going to say that last sentence out loud ten times, so that maybe I'll remember that I said it. :crossed

Wisewiz · Sep 10, 2023

@das10 and @Edwin and all the others here who are following this tangled thread,

I have two installations of Thunderbird, the release-channel 115.2 and the beta-channel 118.0b2. My impression is that the betas are getting better at a much faster rate than the release-channel versions. I suppose that's to be expected, but it ain't true for a LOT of software.

In the Menu Bar of the main window of 115, hovering over and/or selecting an item produces a white text on a light grey background, an unhappy combination:

In the main window Menu Bar of 118, I get black text on the grey background when an item is hovered over or selected:

And in the Menu Bars of the Write windows of both versions, I get this display: white text on a background of one of my main colors:

How can the toolbar display in the main window of 115 be set to match either the display of the main window of 118 OR the Write displays of both 115 and 118?

das10 · Sep 10, 2023

Wisewiz; I have been testing all Thunderbirds using the portable versions. And unfortunately, I don't have that particular version (at the moment I only have 117b & 118b besides 112).

What you might try is to see if on that particular version of yours, you have the following type of userChrome.css rule. Or, if you don't maybe you could try something like it?

Unless somebody actually using 115 has any other ideas.

Code:

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

menubar > menu:hover {
     background-color:  lightgrey   !important;  
     color:             black       !important;
}

Wisewiz · Sep 10, 2023

@das10

Yeah, both my versions on both of my main machines are portables as well. The 115.2 version portable has been available on PortableApps.com for a while now. I'll see what I can do with your rules. I tried this, but it failed miserably:

CSS:

toolbar#toolbar-menubar {
#menubar li > .container:hover {
  background-color: light grey    !important;
  color:           black    !important;
}

das10 · Sep 10, 2023

Did you try the one that I posted in #204 ?
Do you have a link for 115.2 portable? If you do, also post the userChrome.css file you are using on that particular version (unless you are using the same one you posted earlier today).

Edwin · Sep 10, 2023

I just got an update on Daily..., they fixed the Min/Max/Close buttons anomaly...
The Menu css code is good too!

Wisewiz · Sep 10, 2023

@das10

It worked! I did the reverse-color thing, so that the hovered/selected items are on my lighter color background in Write's menu, but the darker color background in the main window.

You bet I have a link for you: Mozilla Thunderbird Portable (email) | PortableApps.com

userChrome on both versions and both machines is the same one I posted earlier, with these changes I've just made, but I only changed the 115s, because 118 was behaving itself.

Wisewiz · Sep 10, 2023

One point about the portables: They don't like running simultaneously. If you have one open and try to open the other, the second one requests that you close the first first. If you go ahead and install a version, you can open the portable (first) and then open the installed one. Not the other way 'round, though.

When I was actively testing and configuring versions a while back, I wanted to have two versions on-screen side by side. Works so long as one is installed.

das10 · Sep 10, 2023

That's good to know.

pn: Also, just for future ref., note that if using the color name for light gray/grey/blue/green etc., there is no space between light and gray/grey, so you use lightgray or lightgrey (both spellings seem to be allowed) or lightblue lightgreen etc.

pn2: It also possible to run multiple "portables" simultaneously by configuring the portable ThunderbirdPortable.ini files on all portables.

Inside that file, make sure this line is set to true.

Code:

AllowMultipleInstances=true

There should be a template ThunderbirdPortable.ini in the portable "\Other\Source" sub-directory. Copy it so it is next to the "ThunderbirdPortable.exe" starter file, and edit the above line in it.

Edwin · Sep 10, 2023

Wisewiz · Sep 10, 2023

Yeah, I keep up with John Haller's work on PortableApps.com. He's almost as fast at answering my posts on that site as you are answering my posts on this one.

I use this direct link for his latest beta portable. Thunderbird, Portable Edition Test (email client) | PortableApps.com Once these portables are installed, the regular internal updater works just fine.

I use CSS/Properties/color/keywords - W3C Wiki and <named-color> - CSS: Cascading Style Sheets | MDN for colors, and one of the color-wheel sites for esthetics. Well, no, but they're interesting.

I also knew about the multiple instances thing, but I thought I'd tried it and it didn't work for two of my versions. I'll try again. I already have "DisableSplashScreen=true" in all of my TB inis. That works for sure.

EDIT: MultipleInstances works! Yay!

Phil_C · Sep 10, 2023

This is quite the informative thread.

Is there a way to change the colors of the mail icons? TB did a pretty good job with this in 115.2, but I'd still like to fiddle with the colors of Inbox, Junk, etc. The CSS I used in 102 no longer has any effect.

Also, I've run into an odd problem where the main calendar window cannot be reduced in size past a certain point. What happens is, if I increase the width of the Today Pane on the right side of the calendar, it begins to cover the calendar squares. Same thing even if I show the Spaces toolbar on the left. It pushes the calendar squares under the Today Pane.

This early mock-up from TB seems to show this as a normal:

Supernova Calendar Mock-Up

However, this happens to me only on my main computer. On my second machine, the calendar window resizes as small as I want without any overlap of the Today Pane. I have to believe this makes more sense. (Both laptops run Win 11 and TB 115.2.)

Wisewiz · Sep 10, 2023

@Phil_C

Right-click the icon and choose Properties. Then click the colored rectangle, and the color picker will open. You can type values in that window (lower right) if you want colors other than the ones in the grid.

Phil_C · Sep 10, 2023

Ha! That's much too obvious. Now I have nothing to fiddle with.

Thanks for the instant reply.

Wisewiz · Sep 10, 2023

Much of what's true in this world is obvious, but obvious is a relative term. What's obvious to you ...

Edit: Oh, and since you're a relative newcomer here, WELCOME.
Chicago, eh? I went through grad school in Champaign-Urbana, and haunted Chicago every chance I had. Great city.

Phil_C · Sep 10, 2023

Yup, Chicago born and raised. Retired now and still enjoying the city. Canada is beautiful, too. Had fun in Victoria and Vancouver way back when.

Now -- off to a friend's house to watch the Bears game! (Wish me luck.

)

Edwin · Sep 10, 2023

The msix package is kinda useless! It seems to be a mirror of the real thing in a container!
It has a profile folder but the css doesn't apply!

Edwin · Sep 10, 2023

Edwin said:
The msix package is kinda useless! It seems to be a mirror of the real thing in a container!
It has a profile folder but the css doesn't apply!

Sorry, my bad..., I forgot to enable toolkit.legacy.stylesheets!!!

There are glitches though...
I'm running 4 SxS, 2 msix's and 2 exe's...

Why??? Cuz it's fun.