Thunderbird CSS customizations

Instructions / Howto / Readme

• Unlock custom CSS usage in Thunderbird
• Where to find Thundebird profile folder? The correct location for user styles.
• How to use custom user styles?
• How to find item ids and attributes?

Unlock custom CSS usage in Thunderbird

Settings/Options > Advanced > General > Config Editor...
toolkit.legacyUserProfileCustomizations.stylesheets > true

Where to find Thunderbird profile folder? The correct location for user styles.

1. Find your profile folder
Windows
C:\Users\ USERNAME \AppData\Roaming\Thunderbird\Profiles\ PROFILE FOLDER NAME \
Hidden files must be visible to see AppData folder. Alternatively open %APPDATA%\Thunderbird\Profiles\ from explorers location bar.
Linux
/home/ username /.thunderbird/ profile folder name /
Hidden files must be visible to see .mozilla folder.
Mac OS X
~\Library\Thunderbird\Profiles\ PROFILE FOLDER NAME \ or
~\Library\Application Support\Thunderbird\Profiles\ PROFILE FOLDER NAME \
\Users\ USERNAME \Library\Application\Support\Thunderbird\Profiles\

2. User styles belong into \chrome\ folder. Create it, if there is none yet. It should look like this afterwards:
\ PROFILE FOLDER NAME \chrome\

3. Copy userChrome.css, userContent.css and \config\, \css\, \images\ folders into \chrome\ folder. It should look like this afterwards:
\chrome\config\
\chrome\css\
\chrome\image\
\chrome\userChrome.css
\chrome\userContent.css

How to use custom user styles?

The userChrome.css and userContent.css files works like an options\configurations file. All main "features" can be enabled and disabled there.
Edit userChrome.css and userContent.css with any text editor (Notepad++ recommended on Windows) and enable or disable any feature you like by modifying, removing or outcommenting available @import strings.
Restart Thunderbird after every modification for changes to take effect.

Example
If "classic button appearance for navigation toolbar buttons" should be enabled, the corresponding line has to look like this:
@import "./css/buttons/ctb_on_main_toolbars.css"; /**/

If "classic button appearance for navigation toolbar buttons" should be disabled, the corresponding line has to look like this:
/* @import "./css/buttons/ctb_on_main_toolbars.css"; /**/

Note
Code between /* and */ won't be used by Thunderbird unless there are other /* or */ in-between.

How to find item ids and attributes?

Hit Ctrl+Alt+Shift+I or open 'Tools > WebDeveloper > Browser Toolbox'.

Inspect ui or web content.

Force popups to stay open for inspection: Click on 'Customize Tools and get help button' (= button with three dots) and select 'Disable popup auto-hide'.