Thunderbird 115: CSS Customization

lafargeotte · Jul 16, 2023

Hey guys, here is a fix for the header problem.
To sort of reduce the header pane try this:
View - Headers - All
Add this to userChrome.css:
.message-header-container {
min-height: 5px !important;
max-height: 5px !important;
height: 5px !important;
}

.message-header-container:hover {
min-height: 100px !important;
}

Once restarted you will see that the message comes above the header pane, and if you hover a little the header pane will reappear.

Not as good as the 'Compact Headers' add-on, but it may suffice until it is updated.

lafargeotte · Jul 16, 2023

I have something else that I seem to have a problem with.
The Thread Pane (which lists all the emails) normally resises when you hover over the bottom of the pane so that you can shorten or lengthen the pane. My v115 only lengthens, it will not shorten.
Any ideas?

Wisewiz · Jul 16, 2023

I noticed that, as well. I guess the scrollbar is the best we've got for the moment. Maybe it's worth a suggestion on the Mozilla Thunderbird Ideas page?

Ideas

Submit and vote for ideas

connect.mozilla.org

Wisewiz · Jul 16, 2023

lafargeotte said:
Hey guys, here is a fix for the header problem.
To sort of reduce the header pane try this:
Once restarted you will see that the message comes above the header pane, and if you hover a little the header pane will reappear.

It works! Really well, too!

Note: I get a little "ghost" To in my messages (see shot). Wonder why that shows up, but nothing else does.

lafargeotte · Jul 16, 2023

I don't have that, have you changed to view headers ALL? If that is not selected it does not work so well.
Select View, then Headers, then All.

Wisewiz · Jul 16, 2023

You're right. I had Normal selected, not All. I really don't like the All display. If I want to see that additional stuff, I know what to do to see it. Otherwise, I'd rather have the Normal display.

Anyway, I gave your code a good try again, with All selected, and it did in fact work better.

Thanks again. Points added above.

Wisewiz · Jul 17, 2023

One other thing re: posts 34, 35, 36: It seems to me that the "unified" toolbar up top gets a bit narrower vertically if you choose only words instead of icons and words.

das10 · Jul 17, 2023

Wisewiz, once you decide on the icon/text combination, you can also see if setting a fixed custom height works too?
eg: this is after playing around with the CSS over the weekend.

#unifiedToolbar {
height: 24px !important;
padding-top: 0px !important;
padding-bottom: 0px !important;
margin: 0px !important;
}

On my screen, I am able to set a height of 24px for the Unified Toolbar, if I use icons beside text.

Wisewiz · Jul 17, 2023

I'm gonna try it. Gotta feed the animals first. Back later.

Wisewiz · Jul 17, 2023

Couldn't wait. Got the biggest beasts first, then tried it. Wow! Exactly what I needed!

Thank you again, again. (Points above.)

lafargeotte · Jul 18, 2023

das10 said:
Wisewiz, once you decide on the icon/text combination, you can also see if setting a fixed custom height works too?
eg: this is after playing around with the CSS over the weekend.

#unifiedToolbar {
height: 24px !important;
padding-top: 0px !important;
padding-bottom: 0px !important;
margin: 0px !important;
}

On my screen, I am able to set a height of 24px for the Unified Toolbar, if I use icons beside text.

View attachment 64988

That is great, thank you.

Now to try fix the header bar!

Wisewiz · Jul 18, 2023

Those of you participating in this long customization thread will notice that our IT genius, John, has agreed to modify the title of the thread to more accurately reflect what's going on in it. Thanks, z3r010.

Wisewiz · Jul 18, 2023

@das10

I edited your script a bit to see whether the bar would look a little less pinched (squashed?). Edited version seems to work.

Can you tell me whether there's anything wrong with the way this script looks? (Three of four numbers altered slightly.)

#unifiedToolbar {
height: 28px !important;
padding-top: 2px !important;
padding-bottom: 2px !important;
margin: 0px !important;
}

Wisewiz · Jul 18, 2023

@das10

Just noticed that in your shot in #48, your Menu Bar is above your Unified Bar. How'd you do that? My Unified has always been topmost in my windows.

das10 · Jul 18, 2023

Using "order" in the CSS and setting it to -1.
eg.

Code:

/* menu on top and can color it if wanted */
#toolbar-menubar {
     order: -1 !important;
}

nb: Your modified "Unified Toolbar" CSS looks just fine.

Wisewiz · Jul 18, 2023

@das10 : Thanks for both of those: the code and the approval.

ltsnow · Jul 18, 2023

das10 said:
Using "order" in the CSS and setting it to -1.
eg.

Code:

/* menu on top and can color it if wanted */ #toolbar-menubar { order: -1 !important; }

nb: Your modified "Unified Toolbar" CSS looks just fine.

All of this code is working great for me. Thanks to you and everyone. One more question. Can I get the density of the folder inbox to something between the normal one and the smaller one? The normal one is just a little too much spacing and the smallest one is just too tight. I'm trying to get it like102.

ltsnow · Jul 19, 2023

Compact Headers extension is now updated for 115. Works great.

Compact Headers :: Versions :: Add-ons for Thunderbird

addons.thunderbird.net

das10 · Jul 19, 2023

itsnow re: post #57; Are you referring to the lists of messages (on the right hand top as they might for example appear in the classic/wide view). If so, I don't know if this piece of code works for you, as the line heights appear to depend on both the density & the font size, but you could see if it makes any difference.

Code:

/* note:
To change line heights in the Message Lists/Tables.
(NB: Test by altering the value "1.50em" in small steps like "1.15", "1.25", "1.75em", or "2.00em" etc.) 
*/
table[is="tree-view-table"] td {
  line-height: 1.50em !important;
}

das10 · Jul 19, 2023

Wisewiz; are you still trying to display lines between messages? Or have you decided to go with the Carded view?

Just out of interest, if you add border-bottom to the above code, it might work, although I dont know how that would play out in the Carded view (as I am still testing everything on 116 beta).

Code:

table[is="tree-view-table"] td {
     border-bottom: solid 1px blue !important;
}

A light color works best, as there appears to be a single piece of artefact under the first column in the very last line, and with a light color it is less noticeable.

Thunderbird 115: CSS Customization

Well-known member

My Computer

Well-known member

My Computer

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

My Computers

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

My Computers

Well-known member

My Computer

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

My Computers

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

My Computers

Well-known member

My Computer

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

My Computers

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

My Computers

Well-known member

My Computer

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

My Computers

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

My Computers

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

My Computers

Well-known member

My Computer

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

My Computers

Well-known member

My Computer

Well-known member

My Computer

Well-known member

My Computer

Well-known member

My Computer

Similar threads