Thunderbird 115: CSS Customization

Edwin · Sep 8, 2023

Gettin there...

Wisewiz · Sep 9, 2023

@das10 and interested participants in this thread:

I really like this custom color background for the Folder Pane with the white lettering. It continues and extends my "theme" colors.

And I really like the effect when a folder is selected: it goes to my darker color, with white letters:

But I don't like the effect when a non-focused folder-name goes pale grey with nearly invisible white letters:

Is there a separate setting code for the inactive (non-focused)? Since this only affects one folder name at a time, I'd like the inactive to look the same way as the active-selected (dark, with white letters). That way, when I click away from the folder pane, the formerly focused name would stay legible and highlighted in dark.

das10 · Sep 9, 2023

I had noticed that too (hence my proviso that "maybe not all of them perfectly"), but I am still looking at that in my WIP.

Wisewiz · Sep 9, 2023

Man, you're fast. If I were writing my posts in ink, you'd be ON them before the ink was dry!
Thanks for coming back in on this. I was sure you'd seen that, and I'm sure I've seen something from you or someone else online that referred to non-focused or inactive entries, but "I don't know where or when" (sounds like a good line for a song, eh?).

See you later. I'm sure I can count on that.

Gratefully,

Dan

das10 · Sep 9, 2023

The following rule brings back your cutom background and white text even when the focus moves away from the folder pane, although with darker background colors, the icon then gets too blended in and doesn't stand out when the focus changes. I'll see if changing icon colors works there when I have time.

Rule to swap :

Code:

/* folder selected color - make sure icons and twisty dont get wahsed out */
#folderTree li.selected  > .container {
  background-color: #336699  !important;
  color:            white    !important;               /* change this from white to a different color so you know where the focus is ? */
}

I am assuming you are using something like those property values?

Wisewiz · Sep 9, 2023

Muchas gracias, Senor. I will take that and run with it, and wait to see when you come back. You don't have to be Speedy Gonzales on my account, or for that matter, on anybody else's account either.

Edwin · Sep 9, 2023

We're getting there..., just need to change the hover to select in Folder Pane and Message Pane (pale blue), and, selected message (the bright blue!)

Wisewiz · Sep 9, 2023

@das10

That's a winner! The highlighted color holds when I click somewhere else in the message list pane, just as I wanted it to do.

OTOH, when I hover over anything, say, on my way to clicking it to move to the named folder, until I click and get the nice effect above, the washed-out effect comes back.

Wisewiz · Sep 9, 2023

@Edwin
I'm using this just now in 115.2 and 118.0b2, and the only part that isn't EXACTLY as I want it is the hover effect. I think our CSS mastermind, @das10, is working on it. I hope my (our) requests aren't interfering with his real life.

CSS:

/* 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;
}

Wisewiz · Sep 9, 2023

That, BTW, gives me this, with a message in the list pane selected (so the focus is on that, not on the Inbox link) and the mouse hovered over Sent Mail. A nice touch is that a tiny pop-up "Sent Mail" bubble tells me what I'm hovering over, even when I can't read the actual link line.

And, ofc, it's worth noting that the icons are clear and easily recognizable, even when I can't read the words next to them.

Edwin · Sep 9, 2023

das10 · Sep 9, 2023

Wisewiz; Hover color for folder pane - hopefully it works.

Code:

/* 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;
}

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

Wisewiz · Sep 9, 2023

Trying it in just a jiffy.

Edwin · Sep 9, 2023

das10 said:
Hover color for folder pane

Don't know what I did but, I like how it inverts the color on hover and select!

Wisewiz · Sep 9, 2023

@das10: Beautiful! Works even better than I'd hoped. Tai xiexie ni le! (Thank you very much, in pinyin Chinese)

@Edwin: What did you do to change the color of the selected message in the message list? Mine are still medium blue.

Edwin · Sep 9, 2023

Wisewiz said:
@Edwin: What did you do to change the color of the selected message in the message list? Mine are still medium blue.

Code:

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

Can't get the hover to work though!

das10 · Sep 9, 2023

For the messages selected / hover, I use something alongthese lines for testing. This seems to work in both Table & Cards view. (I haven't tested this with a dark theme though).

Code:

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

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

Thunderbird really messes up the Min/Max/Close Caption buttons, when you are not using the Title Bar, or if you change the Menu - Tab - Unified Bar order.
I still haven't found a fool-proof solution for that issue.

Wisewiz · Sep 9, 2023

@das10 and @Edwin:

I don't mind the hover color here, but I'd really like to change the selected message color. I'll have a look at your stuff, Edwin.

Edwin · Sep 9, 2023

das10 said:
For the messages selected / hover, I use something along these lines for testing. This seems to work in both Table & Cards view.

Yes! Nailed it!

das10 said:
Thunderbird really messes up the Min/Max/Close Caption buttons

Yup..., oh well!

Wisewiz · Sep 9, 2023

It worketh! I can play with color choices as much as I want, now that all the settings are in userChrome and they work!

Thunderbird 115: CSS Customization

♦ ♦

My Computers

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

My Computers

Well-known member

My Computer

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

My Computers

Well-known member

My Computer

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

My Computers

♦ ♦

My Computers

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

My Computers

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

My Computers

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

My Computers

♦ ♦

My Computers

Well-known member

My Computer

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

My Computers

♦ ♦

My Computers

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

My Computers

♦ ♦

My Computers

Well-known member

My Computer

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

My Computers

♦ ♦

My Computers

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

My Computers

Similar threads