potatogim / customcssfortb

Custom user styles for Thunderbird 68+

Downloads for Thunderbird Quantum (68+)

CustomCSSforTb releases & changelog

Want to support this project?

[ Paypal Me ]

Instructions / Howto / Readme

• Unlock custom CSS usage in Thunderbird 69 and newer
• 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 69 and newer

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 ('profile names are different for everyone').
about:support > Profile Folder > Open Folder
or about:profiles > Root Directory > Open Folder

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

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

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 */ inbetween.

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'.