Thunderbird 115: CSS Customization

eleven11 · Aug 9, 2024

das10 said:
Not that I know of. But the DevTools will allow you to inspect most of the elements using the Inspector icon to point to what you want to inspect.

@das10 : Thanks, this is exactly what I would look for. Assuming this is similar to the Inspector in Firefox, I don't understand the "not that I know of" comment. How do I start the Thunderbird Inspector? When I press CTRL+SHIFT+I, this scary messages pops up:

An incoming request to permit remote debugging connection was detected.
A remote client can take complete control over your browser!

das10 · Aug 9, 2024

In order for the Developer Toolbox to remotely connect to your main Thunderbird Window, you need to to accept that remote debugging connection. Once that is accepted, you can use the Inspector icon to point to the element/s you are interested in & test edit the code shown by it, or you can play around with the userChrome.css from inside the DevTools, so what you alter inside userChrome.css in DevTools will be reflected in the main Thunderbird Window without the need to re-open Thunderbird.

pn: have another look at the TenForums post I linked to previously, which shows basically how it should work, once you accept that "local connection".

Browsers which allow the address bar to be placed above the tabs - Windows 10 Help Forums

Apart from earlier versions of Firefox (one of which I use for this very reason) does anyone know of any current browsers which allow the address bar to be repositioned above the tabs? Many thanks. I'm using Windows 10 v22H2 (OS build 19045,4046).

www.tenforums.com

(that thread refers to Firefox, but essentially the process is nearly the same for Thunderbird).

You should note that the connection will be through addresses 127.0.0.1: which are loopback addresses.
"..Application software typically uses this loopback feature for local testing purposes. Messages sent to loopback IP addresses like 127.0.0.1 do not reach outside to the local area network..."

What Is the 127.0.0.1 IP Address?

In computer networking, 127.0.0.1 is a special purpose IP address conventionally used as a computer's loopback address.

www.lifewire.com

eleven11 · Aug 9, 2024

@das10: Thank you so much for your help. I understand most of what you say, but am afraid of the message:

"A remote client can take complete control over your browser!"

When can this happen ?
How can I avoid this ?
If I accept the connection, do I accept it only once or permanently ?
Only once wouldn't be a problem, because I'm apparently the source of this remote connection attempt myself.
But a permanent acceptation apparently can lead to "a remote client taking complete control over your browser" (otherwise there wouldn't be a warning), so how can I prevent this ?

In Thunderbird it works in this disconcerting way, whereas in Firefox you just need to to right-click > inspect (without any remote connections) ...

das10 · Aug 9, 2024

eleven11 said:
I understand most of what you say, but am afraid of the message:
When can this happen ?
How can I avoid this ?

In my web searches, I haven't come across any situation where a remote debugging connection was detected on any address other than to & from local host domain 127.0.0.1 .

As such, if you want to be cautious, then do not use the option shown below to accept such connections without any prompt. That way, you can always visually check the message box to ensure that the connection is being initiated only on localhost addresses.

By default, you would accept the connection when you want to open the DevTools Window. Once you close the DevTools Window, the connection would end. If you wish to accept such connections without any prompt, you would need to toggle the following setting to "false" in about:config.

Code:

devtools.debugger.prompt-connection      false                    << toggle to false

Note, that even in Firefox, the inspect element in the Context menu, only allows you to access the Browser page "Contents", and not the Chrome/Decoration elements like the tabs, menus, toolbars etc. And it too requires the same process to access them like Thunderbird.

eleven11 · Aug 9, 2024

@das10 : perfect!! thanks.

das10 said:
Note, that even in Firefox, the inspect element in the Context menu, only allows you to access the Browser page "Contents", and not the Chrome/Decoration elements like the tabs, menus, toolbars etc. And it too requires the same process to access them like Thunderbird.

I see. In my mind "tabs, menus, toolbars etc" is part of the app itself whereas the webpage content (Firefox) or the messages (Thunderbird) are NOT. So I thought that TB messages (including in the message pane) should be inspectable in a similar way to webpages in Firefox.

I don't know if you understand my way of thinking.
Maybe I am comparing apples to oranges.

das10 · Aug 9, 2024

I think I understand, what you mean, but alas, that is how the Thunderbird interface is designed. But for our end purpose, we just have to accept what is available and we go the way that gets us to the elements we are interested in by hook or by crook :)

eleven11 · Aug 9, 2024

@das10 : You are absolutely right! Thanks a lot for sharing your knowledge with us.

eleven11 · Aug 9, 2024

@das10 : sorry, one last question (hopefully):

Firefox: When I inspect a webpage element and add an inline style, it is saved in the html code of the webpage (which I can save to a .html file for example).
Thunderbird: I see that I can add inline styles for elements just like in Firefox, i.e. I could make the subject line of a single message in the message pane appear in italics just to test "on the fly" how this would look like. Obviously the change shouldn't be stored. So the question is: Will it be stored? Where? Could I possibly corrupt Thunderbird's message database?
I just realize that I don't understand at all the concept and the effect of changing the styles in the "rules" pane.
Can you make sense of what I am saying ?

das10 · Aug 9, 2024

Do you mean something like this?

In the Inspector, all the default CSS/Code sheets are hard coded. They will get reset when you re-start Thunderbird.

If you change any of the code and wish to save it, you have two alternatives.

1: Save it to your userChrome.css file (or any other CSS/text file for reference purposes).
or
2: Inside the DevTools, select the "Style Editor" tab, and in the filter box enter userChrome.css to enable you to see & edit your own userChrome.css file. In the right hand panel, insert/edit your code and press the Save button next to the filtered name (or press Ctrl + s ).

In any case, it is best to always have backups of your userChrome.css file, which you can do using the normal explorer method (copy / paste). Thunderbird will only make use of the singular file called userChrome.css (or userContent.css if used), it will ignore all the the other copies.

Hope that helps.

eleven11 · Aug 9, 2024

@das10 : thanks for the useful information.

What I meant to ask: If I add an inline style to an element (see screenshot below) to test how a given style would look like, will this be stored somewhere (which I would not want) ? I just would like to do quick tests there without being saved permanently.

Sorry if I explain this badly. Do you know what I mean ?

das10 · Aug 10, 2024

No, it would not be saved anywhere. It would all get reset when you re-start Thunderbird.
If you do some test and would really like to save its code, then you would have to do it in either of the two ways explained in post #449.

eleven11 · Aug 10, 2024

@das10 : thank you ever so much. I know how to save the code in userChrome.css.
I have the opposite concern: I don't want my tests in Inspector to be stored anywhere.
So if I understand you correctly (just to make sure): I can add an inline style for an element (as seen in the screenshot right above) to preview the effect and it will not be saved neither in my TB user profile, not in the TB app dir (or anywhere else for that matter, at least not permanently), right ?

das10 · Aug 10, 2024

That is correct. It won't be saved anywhere.

jacksonjack · Aug 18, 2024

Is it possible to access the userChrome.css file within the Windows App Store Version? I have vision problems, and just can't read the message list font very well, I need them to be of a font that is more spaced out.

das10 · Aug 19, 2024

I presume you have already tried playing around with the Density / Font settings in the appmenu, or changing the layout.css.devPixelsPerPx setting in about:config to see if it helps?

I personally have never tested the Store Version of Thunderbird, so although I don't know if a userChrome.css would work with it or not, my guess (based on the article below) is that if it can work for the Store version of Firefox, it should work with Thunderbird too. The crucial question is how to find the Profile folder.

Note that by default, the userChrome.css file is not present in either the Store or Direct versions of Thunderbird. And the procedure is to create your own "Chrome" sub-folder in your T-bird Profile folder, and then place a userChrome.css file "inside" that "Chrome" folder. Then in about:config, toggle toolkit.legacyUserProfileCustomizations.stylesheets to "true" so your userChrome.css becomes operative the next time you start Tbird.

If you can manage to find the relevant Profile folder, then you could try something like this to increase the letter spacing a little and/or use some other System font which is more to your liking.
userChrome.css

Code:

/* font spacing of Messages List   -  change the px value as required   */             
#threadTree > .tree-table tr {
   letter-spacing: 1.5px !important;  
}

default spacing example:

wider spacing example:

nb: As I said, I have never tested the Store version, but to find the profile folder in the Store Version, unless somebody who uses that Version jumps in, I can only guide you to the following article which might help you locate it (specifically part (1) under Exception). It references the Store Version of Firefox, but Thunderbird should follow the same pattern - just follow the article but replace references to Firefox with Thunderbird - so eg. in Appsdata look for MozillaThunderbird instead of MozillaFirefox.

How to Create a userChrome.css File

www.userchrome.org

To find the name of your current Profile folder, in Thunderbird, go to Help > Troubleshooting Information. Once you see the Troubleshooting Details, click "about-profiles" to open the Profiles details where you should find the precise name of the Profile to search for under "This is the profile in use and cannot be deleted". Then follow the above article.

Hope that helps somewhat.

jacksonjack · Aug 19, 2024

das10 said:
I presume you have already tried playing around with the Density / Font settings in the appmenu, or changing the layout.css.devPixelsPerPx setting in about:config to see if it helps?

I personally have never tested the Store Version of Thunderbird, so although I don't know if a userChrome.css would work with it or not, my guess (based on the article below) is that if it can work for the Store version of Firefox, it should work with Thunderbird too. The crucial question is how to find the Profile folder.

Note that by default, the userChrome.css file is not present in either the Store or Direct versions of Thunderbird. And the procedure is to create your own "Chrome" sub-folder in your T-bird Profile folder, and then place a userChrome.css file "inside" that "Chrome" folder. Then in about:config, toggle toolkit.legacyUserProfileCustomizations.stylesheets to "true" so your userChrome.css becomes operative the next time you start Tbird.

If you can manage to find the relevant Profile folder, then you could try something like this to increase the letter spacing a little and/or use some other System font which is more to your liking.
userChrome.css

Code:

/* font spacing of Messages List - change the px value as required */ #threadTree > .tree-table tr { letter-spacing: 1.5px !important; }

default spacing example:
View attachment 105446

wider spacing example:
View attachment 105447

nb: As I said, I have never tested the Store version, but to find the profile folder in the Store Version, unless somebody who uses that Version jumps in, I can only guide you to the following article which might help you locate it (specifically part (1) under Exception). It references the Store Version of Firefox, but Thunderbird should follow the same pattern - just follow the article but replace references to Firefox with Thunderbird - so eg. in Appsdata look for MozillaThunderbird instead of MozillaFirefox.

How to Create a userChrome.css File

www.userchrome.org

To find the name of your current Profile folder, in Thunderbird, go to Help > Troubleshooting Information. Once you see the Troubleshooting Details, click "about-profiles" to open the Profiles details where you should find the precise name of the Profile to search for under "This is the profile in use and cannot be deleted". Then follow the above article.
View attachment 105448
View attachment 105449

Hope that helps somewhat.

The fact that even under dev tools inspector it's not found as you say, and the fact that just now when I tried accessing the troubleshoot info, and the entire help menu is non-clickable, as well as all the other complications, I think that will convince me to get the non-store version instead, luckily it is for my own personal home setting only so I do not need the store version precisely.

Thank you so much for all your hard work and investigating.

click click · Sep 9, 2024

I did not see a thread for TB 128 CSS Customization so I will ask here. On TB 115 I had folder pane spacing working with the following:


#folderPane .container {
   appearance: none !important;
   height: 18px !important;
   margin-top:  0px !important;
   margin-bottom: -.5px !important;
}

This no longer does the job. The spacing on 128 is too far apart for my likes. I prefer things more compact instead of wasting space. I tried changing the height without any effect. Anyone have a working way to reduce the space between lines in the folder pane for v128?

das10 · Sep 9, 2024

@click click
This might be one way to adjust the container sizes:

Ignore this one - use the one shown below.

Code:

/* folder pane line container heights */
/* adjust % as necessary              */

#folderPane :is(ul, ol):is([role="tree"], [role="treegrid"], [role="group"]) li > div {
  max-height: 90% !important;
  min-height: 90% !important;
}

NOTE: if a set % doesn't work for you, try setting a value in px. The default values appear to be
Compact Density: 18px
Normal Density: 26px
Relaxed Density: 32px
So depending on your Density setting you would reduce the particular value by a couple of px.

eg: Use this if you have set a Compact density.

Code:

#folderPane :is(ul, ol):is([role="tree"], [role="treegrid"], [role="group"]) li > div {
  max-height: 16px !important;
  min-height: 16px !important;
}

If neither of them works, there may be anoter alternative as well!

click click · Sep 9, 2024

I think I am using compact density, but nothing under 18px seems to have any effect. If I increase the following, that works, but making it less doesn't.

.container {
line-height: 18px !important;
}

das10 · Sep 9, 2024

I don't know why at least the second CSS code I posted doen't work for you.
eg: If I set the Density to Compact and Font to 12, this is is what happens for me.

Code:

/* folder pane line heights set to 16px */
#folderPane :is(ul, ol):is([role="tree"], [role="treegrid"], [role="group"]) li > div {
  max-height: 16px !important;
  min-height: 16px !important;
}

DensityCompact-Font12px-default.png

and: DensityCompact-Font12px-with-CSS-MinMax16pxlines.png

Thunderbird 115: CSS Customization

Member

My Computer

Well-known member

My Computer

Member

My Computer

Well-known member

My Computer

Member

My Computer

Well-known member

My Computer

Member

My Computer

Member

My Computer

Well-known member

My Computer

Member

My Computer

Well-known member

My Computer

Member

My Computer

Well-known member

My Computer

Member

My Computer

Well-known member

My Computer

Member

My Computer

Active member

My Computer

Well-known member

My Computer

Active member

My Computer

Well-known member

My Computer

Similar threads