Thunderbird 115: CSS Customization

RobDF · May 21, 2024

Hello everybody,

A particular greeting to my known friend @das10 and @Wisewiz.

I have not heard from you in a longtime. I hope this page is not dead because it is quite fun.

Today I expermented, (don't look at the colors. Just sampling) the following code. But I do not manage to separate the bottons and isolate the hovering on each of them.

CSS:

#header-view-toolbar  {
    background-color:    #336699 !important;
    color:                white !important;
}

#header-view-toolbar:hover  {
    background-color:    cyan !important;
    color:                black !important;
}

A new nice review would be nice.

Wisewiz · May 21, 2024

RobDF said:
I hope this page is not dead because it is quite fun.

Welcome back. No, this thread is far from dead. Just yesterday, our resident CSS expert, @das10 was interacting with member @eleven11 and helping with some coding issues.

RobDF said:
But I do not manage to separate the bottons and isolate the hovering on each of them.

Could you clarify that by rephrasing it so that we're sure we know what you're asking?

das10 · May 21, 2024

@Wisewiz , I think this is what @RobDF means.
The "#header-view-toolbar" element appears to cover the whole toolbar, but if we use the DevTools Inspector to look up any one of the individual buttons, then we can see some long element name which we acn try and condense to the minimum & so use the following rules. (I hope ".toolbarbutton-1" is not used anywhere else, or we might get the same effects there also!).
userChrome.css

Code:

/* Colors for message header buttons */
.toolbarbutton-1 {
background-color:    #336699 !important;
color:                white  !important;
}
/* Colors for message header buttons on Hover */
.toolbarbutton-1:hover {
    background-color: cyan  !important;
     color:           black !important;
}

RobDF · May 21, 2024

Hello guys,

Yes I am using devtools as you told me and I am still familiarising with it.
I think it is just a matter of time for me to get the interpretation of the codes sufficiently right.

I am going to "attack" the address menu and see how much disaster I can do

Yes @Wisewiz , I guess @das10 has started learning my italian/english mode.....lol

Thanks I am trying jsut now.

@das10 how did you remove the description on the bar and left only the icons? (just a curiosity)

das10 · May 21, 2024

Click on the drop down icon/button next to the "Recycle Bin" on the far right hand side of the message header box, and then on the mini dialog box which opens, click on the icons drop down button, and select "Icons".

das10 · May 21, 2024

@RobDF; Note that the code shown above in #423, also affects the icon buttons in the "Tasks" window and also the "Composition Toolbar" (if enabled) in the Write message window.
To restrict the effects to the main messages window, use this instead.

userChrome.css

Code:

/* Colors for message header buttons */
#messagepanebox .toolbarbutton-1  {
background-color:    #336699 !important;
color:                white  !important;
}
/* Colors for message header buttons on Hover */
#messagepanebox .toolbarbutton-1:hover {
    background-color: cyan  !important;
     color:           black !important;
}

RobDF · May 21, 2024

Thank you @das10. I noticed on the compose mail that all the unified toolbox was a bit berserked. I have not tried the Task because I have never used it and franklu I do not even know where it is

. But I have made some experiment using the DevTool. Sometime with the CSS Select sometime with the CSS Path. But it is really a matter of making experiments over experiments.

I have made another small modification on the Quick Selection toolbar just for trying. This time I had to make a CSS for each button because the common button (same as the mistake I have done before, does not work).

The CSS code is here. I hope I have not done many mistakes.

CSS:

/* Quick Filter button */
#threadPaneQuickFilterButton  {
    background-color: gold !important;
    color:            green !important;
}

#threadPaneQuickFilterButton:hover  {
    background-color: #ffff00 !important;
    color:            red !important;
}


/* Quick Filter bar */
#qfb-unread {
    background-color: #336699 !important;
    color:            beige !important;
}

#qfb-unread:hover {
    background-color: #d8e5f2 !important;
    color:            black !important;
}

#qfb-starred {
    background-color: #336699 !important;
    color:            beige !important;
}

#qfb-starred:hover {
    background-color: #d8e5f2 !important;
    color:            black !important;
}

#qfb-inaddrbook {
    background-color: #336699 !important;
    color:            beige  !important;
}

#qfb-inaddrbook:hover {
    background-color: #d8e5f2 !important;
    color:            black !important;
}

#qfb-attachment {
    background-color: #336699 !important;
    color:            beige  !important;
}

#qfb-attachment:hover {
    background-color: #d8e5f2 !important;
    color:            black !important;
}

#qfb-tags {
    background-color: #336699 !important;
    color:            beige  !important;
}

#qfb-tags:hover {
    background-color: #d8e5f2 !important;
    color:            black !important;
}

RobDF · May 21, 2024

Besides I noticed that when I open the DevTool the colors on the Unified toolbar get darkened. When I stop it they come back to normal.

das10 · May 22, 2024

First, note that if you want to apply 'identical' property values to multiple elements (in this case all those qfb buttons), then it may be easier to group them together like so:

Code:

/* Quick Filter bar buttons colors */
#qfb-unread,
#qfb-starred,
#qfb-inaddrbook,
#qfb-attachment,
#qfb-tags        {
    background-color: #336699 !important;
    color:            beige   !important;
}

/* Quick Filter bar buttons colors - Hover effect*/
#qfb-unread:hover,
#qfb-starred:hover,
#qfb-inaddrbook:hover,
#qfb-attachment:hover,
#qfb-tags:hover {
    background-color: #d8e5f2 !important;
    color:            black   !important;
}

Secondly, in this particular case, it is also possible to use the common name "#threadPane .button.collapsible-button" for those buttons.

Code:

/* Quick Filter bar buttons colors */
#threadPane .button.collapsible-button {
    background-color: #336699 !important;
    color:            beige   !important;
}

/* Quick Filter bar buttons colors - Hover effect*/
#threadPane .button.collapsible-button:hover {
    background-color: #d8e5f2 !important;
    color:            black   !important;
}

For eg: inspecting the quick filter unread button, this is what we see further down in the Rules Panel. I am also a learner like you, and so it is just a case of experimenting with the live CSS.

(On the right of the Rules panel you can see "widgets.css:320" which shows where some of the default Thunderbird CSS properties of the filter buttons are. You can click on it to take you to line 320 of that whole sheet, to get some idea about some of the default rules operating on the buttons).

I hope that helps somewhat.

RobDF · May 22, 2024

Hi @das10 thank you so much for the nice lecturing. In fact it is almost four to five months that I started to learn CSS from time to time by myself.
Obviously having some goo person llike you to guide here and there as you have done make life easier.
Experimenting is fun and that is what I am doing. Not scared to repeat the testing again and again. LAst night I went bed at 02 am.
Thanks for the tip on the multiple button and the explanation on the reading on the rules on the right side of the Dev tools windows. It makes absolutely sense.
But mainly thak you for your time.

I will be back.

Sincerely
Rob

RobDF · May 24, 2024

hello, after more than 6 hours studying the DevTool I am suspecting that it does not work the same as the on @das10 showed on the screenshot on #429. I tried to follow the inspection done on the css coding corrected by you, @das10 to have a sort of example in how to go for my inspection but the results are not the same.

In fact even this is not the same. And that dialog box with the <div does not come on.

das10 · May 24, 2024

The example image I had shown in the previous post was just an 'example' of how to look at elements using the inspector. In case you are looking for that particular element with the @Container name in the Rules Pane, you can try and use the filter dialog in the Rules Pane results as shown near the top in this image. (Without the filter, this is the 4th rule in the Rules Pane for me).

Also, for reference, this image of the Rules Pane shows the particular rules I have applied at line 122 of my own userChrome.css file.

RobDF · May 24, 2024

@das10. Thank you I will continue experimenting and if it is of any help for the others I will share my findings and results too.
Thanks a lot as usual

RobDF · May 24, 2024

I think I am cursed :lmao:

Same button as yours. DevTool opened. @container written in the filter section and voila'.

Nothing done. I also tried in the menu for the contact address as exercise but nothing. Tonight I try with another computer.

das10 · May 24, 2024

OK. The good news is that you are not cursed:) I think those buttons expand dynamically from showing "icons only", to "icons with text", if your T-bird window is wide enough to accomodate the wider buttons. When that happens, the css sheet of the buttons is changed automatically, and you won't see the @Container rule where I showed in my previous post.

But, now, if you go further down in the Rules Pane, you should see the element name .button-group :is(.button, input) ; & you can test to see if it applies to the elements of interest by clicking the small square highlight tool button. The css sheet applicable is now widgets.css:296. And @container is now inside that widgets file at line 319. Luckily the same rules that you wanted would still work whether the filter buttons were with icons only or icons with text.

Filter buttons highlight tool to see if it highlights elements of interest.

Filter buttons show as icons only if threadpane is not wide enough.

Filter buttons with icons and text when threadpane is wide enough to accomodate them. (On my screen, I had to nearly collapse the folder pane to see them!)

Filter-buttons-as-icons-with-text-when-thread-pane-is-wide-enough.png

RobDF · May 30, 2024

Good evening guys,
I do not know what I have done while playing with Thunderbird but as a matter of fact my message pane has shrunk. I can put it back to normal dragging the edge on the right but if I restart it , It goes back to the same disturbing size.
I have not played with any dimension on the .css or else.
Please see the photo with that unnecessary space on the right. Thank you.