Base Location for CSS. [Mac.]

User Help for Mozilla Thunderbird
Post Reply
osxtra
Posts: 9
Joined: January 20th, 2018, 11:03 am

Base Location for CSS. [Mac.]

Post by osxtra »

Hi, am liking v102, and am using the standard dark mode theme.

Have noticed that the message pane is now a solid white in all folders until any message is selected.

Have tried a few other "Dark" themes (Dark Fox, Dark Night Arcturus X, etc.) and they all seem to exhibit the same behavior.

Know about userContent.css userChrome.css, but they do not seem to contain the entire styling for the app.

Have looked in the app itself (OSX 10.15.7), but it's compiled so any css there is not plainly visible.

Where can one find the entirety of css for Thunderbird, so as to be able to override userContent.css and make that pane be dark if no message is selected?

Thanks!
Last edited by LIMPET235 on July 7th, 2022, 5:38 am, edited 1 time in total.
Reason: Added [Mac.] to the title.
User avatar
ltsnow
Posts: 1173
Joined: March 23rd, 2006, 1:49 pm
Location: Valdosta, GA

Re: Base Location for CSS

Post by ltsnow »

This is what I have been using for years and it is great. There is a bit of a learning curve, but it's not that difficult. I use it on Windows, but it will also work on Mac.

https://github.com/aris-t2/customcssfortb

If you just want the code for the message pane background color here it is:

/* Folderpane & Messagepane */
treechildren {
background-color: rgb(225,234,252) !important;
}

This is for light blue. Adjust it for the color you want. BTW, this is UserChrome, not UserContent.

As for the location of the chrome folder, as explained in the above link for Mac it is:

~\Library\Thunderbird\Profiles\ PROFILE FOLDER NAME \ or
~\Library\Application Support\Thunderbird\Profiles\ PROFILE FOLDER NAME \
morat
Posts: 6421
Joined: February 3rd, 2009, 6:29 pm

Re: Base Location for CSS

Post by morat »

The message pane is black before selecting a message using the dark theme on Windows.
User avatar
tanstaafl
Moderator
Posts: 49647
Joined: July 30th, 2003, 5:06 pm

Re: Base Location for CSS

Post by tanstaafl »

The monterail full dark 2 theme at https://addons.thunderbird.net/en-US/th ... -2/?src=ss uses a dark background in the folder pane and folder listing. Its an extension, not a theme, to get around the lack of support for complete themes with the WebExtension API. It still uses a white background for the compose message windows and address book. However if you also enable the dark theme every background is dark except for messages you are reading or any thunderbird.net web pages displayed as a search result in tools -> add-ons.

It works with version 102. I tried it using Windows 11 with no theme (just a background wallpaper), so the darkness is not due to my Windows configuration.

Version 102 also seems to fix some of the issues mentioned at https://github.com/conema/monterail-fulldark such as cc/bcc fields have white backgrounds. The paperclip for attachments is still hard to see (grey against black background).
osxtra
Posts: 9
Joined: January 20th, 2018, 11:03 am

Re: Base Location for CSS

Post by osxtra »

morat wrote:The message pane is black before selecting a message using the dark theme on Windows.
Sorry, should have specified this is on OSX 10.15.7, set to dark mode. Message pane background is white until any message is selected.
osxtra
Posts: 9
Joined: January 20th, 2018, 11:03 am

Re: Base Location for CSS

Post by osxtra »

ltsnow wrote: If you just want the code for the message pane background color here it is:

/* Folderpane & Messagepane */
treechildren {
background-color: rgb(225,234,252) !important;
}
Thanks for that info. Put that at the bottom of userChrome.css, set to 0,0,0 no apparent effect. Should have mentioned, using OSX 10.15.7 in dark mode. Changing system prefs to light mode appears to have no effect. When initially starting the program, the message pane shows the start page as defined in preferences. After that, selecting any folder results in a solid white message pane until any message is selected.
morat
Posts: 6421
Joined: February 3rd, 2009, 6:29 pm

Re: Base Location for CSS. [Mac.]

Post by morat »

osxtra
Posts: 9
Joined: January 20th, 2018, 11:03 am

Re: Base Location for CSS. [Mac.]

Post by osxtra »

After a little more research, looks like PEBCAK. Have been basically running on the same profile since '06 or so, across various machines and OS's. (One of the things I really like about TB. Just drop it in a new machine, update your profiles.ini, and off you go. Even the switch from mbox to maildir wasn't that bad; a little judicious search and replace on the filters file, and everything was good.)

The chrome folder had both a userContent.css and userChrome.css file; I assumed they were a stock part of the program, but had probably been introduced some time back installing a theme back in the day.

Turns out removing both these files made things still look "normal" but got rid of the solid white box when no message was selected in any folder.

So, some crufty legacy code was causing the issue. Oops! Sorry for any confusion.

Am still researching the best way to style the look of TB. There appear to be scant resources for modern versions of the program.

http://www.mozilla.org/unix/customizing.html indicates it's from '08, and that most of the content is "highly out of date".

Similarly, https://www.eriwen.com/css/tweaking-thu ... ds-chrome/ starts out by saying it's "very likely out of date", though among other tweaks it does have some interesting styles for coloring unread messages.

https://gist.github.com/eriwen/757944/revisions was created and last modified a dozen years ago.

Was hoping to find an add-on or some other functionality similar to FF's Web Developer Tools, so I could inspect what rules were controlling what, but none of the ones mentioned in http://kb.mozillazine.org/index.php?tit ... Chrome.css will install on v102, and searching for "DOM" or "CSS" in the current addons page returns nothing usable.

There are various other github gists and resources, but nothing recent from Mozilla itself that I've been able to find. Also, many resources seem to be targeted for FireFox, not TB specifically (which makes sense, as TB is a sort of "mod" over the base FF code). The github link mentioned in itsnow's post, for example, references using the Web Developer toolbox, which does not exist in TB.

Guess it's time to start poking around the mercurial repos for mozilla-central and comm-central.

If anyone does know of some modern docs for styling TB, please let me know!
osxtra
Posts: 9
Joined: January 20th, 2018, 11:03 am

Re: Base Location for CSS. [Mac.]

Post by osxtra »

Ah, thanks for that tip on getting the toolbox open! Didn't even think to look in the tools menu. Forest and the trees. ;)

If anyone has trouble getting Tools/Developer Tools/Developer Toolbox to open, look at the Error Console (also in the Developer Tools menu). If you see "Could not start Browser Toolbox, you need to enable it", go into Config Editor and make sure both of these are set to true:

devtools.chrome.enabled
devtools.debugger.remote-enabled

(This is gleaned from the BrowserToolboxLauncher.init function in Launcher.jsm, which should be referenced in the startup error should the toolbox not open.)

Assuming both of the above are enabled, you should get a popup about allowing remote debugging on localhost. This is OK; no data is being sent outside your computer. It's most likely that an instance of TB's underlying Firefox code is actually running the toolbox, and needs to ask for permission to "see" what TB is doing.

(This is even though it's actually the same program doing the "looking". Since TB runs as a kind of "skin" on top of FF's base code, it would make sense that internally it's just calling up an instance of that code, but to simplify things still considers it to be an "external" app.)

Anyone familiar with FF's "Web Developer Tools" will then be able to inspect TB the same way.
Post Reply