Thunderbird Customization: Make Thunderbird more like Outlook or Windows Mail

Introduction to Customizing Thunderbird

 

 

This is a beginner-to-beginner document.  I can’t emphasize that enough. What I mean is I'm no expert, I've just put together this based on my learnings so far.  

 

After many years of bouncing around email clients, I found myself quite dissatisfied with the options.  First, I’m on Windows 10.  The Mail app in Windows was actually pretty good. I used it in conjunction with Outlook 365 because I had a license for that from my company while I was employed.  But mostly I used Windows Mail.  Then Microsoft got rid of that and pointed everyone to New Outlook – nope.  I tried a ton of new email clients but they all had issues on things that I didn't like. I settled on Thunderbird (TB) just before Supernova (v.115) was launched.

I used TB in the 2000s but forgot why I dropped it. But coming back to it was pretty good right out of the box using three gmail accounts and an outlook account. But, I had also joined Reddit and the r/thunderbird subreddit was full of all kinds of comments, kudos, complaints and ideas for fixing things.  So little by little, I learned how to tweak TB to make it more...”outlook-like”?  I don’t know...some might think it is, I just know it works and looks better to me now:

 

Key improvements I made:

·         Rearranged menus, with drop down and window controls on top of search bar

·         Filled the search bar (Unified bar) to make it more useful

·         Custom colored the menu, search bar, folder pane, message list etc.

·         Made sort order so new emails on top, not bottom.

·         Ditched threaded view

·         Ditched “hover” highlights when the cursor went over folders or emails

·         Made unread and new emails different colors, fonts.

·         Fixed the New Message button

·         Got rid of the many colored lines that occur when emails are forwarded or responded to.

·         Set up inboxes as favorites to avoid using unified folders

·         Used alternate TB buttons and icons

 

This guide is intended to walk you through the basics of setting up TB from original state to something like above, where you can also change colors and other settings to suit your own needs.  Some changes are through Settings, but some are through “CSS”.  All I know is css (cascading style sheets) is a way of using text-based coding to make changes.  Don’t ask me how it works, I have no idea, but I now know how to set it up, and it isn’t hard. 

A few words of warning…this was how I did it on a Win 10 computer. No idea how much of this works on iOS or Linux, but its likely similar. It’s also geared to starting with folder pane on the left, message pane in Card view next, then email pane. I don’t know if those are the right names are not. If you want table view of message list, or vertical view...go ahead, I don’t know how much of what follows works with that set up.  If you follow some of these changes but don’t see the effect right away, make sure you close and restart TB as many only work after a restart.  Lets go…

Where’s the drop down menu?

·       Right click in the empty space beside the long search bar and select Menu Bar. It’ll appear below the search bar – we’ll fix that later.  Also, menu bar and search bar are the color of  windows accent colors but that can be customized as well later.

 

Hide the Spaces toolbar:

·         Use View>Toolbars and choose Spaces to hide it.  Or use the left pointing arrow at the bottom of it.  Or keep it if you like it, but I chose to put similar buttons adjacent to the Search Bar so I don’t use the Spaces bar.

 

Sort Order:

Default is newest email on bottom of the list – I prefer newest on top.

·         Click on Tools> Settings.  Settings tab opens up.

·         Scroll to bottom of General Settings section and click on Config Editor

·         type into the search box:  mailnews.default_sort_type (or select it when you see it as you type)

·         make sure value is set to 18 by selecting the pencil icon, change value, click check mark to save it.

·         type into the search box:  mailnews.default_sort_order (or select it when you see it as you type)

·         Value default is 1 (ascending), change to 2 (descending) by selecting the pencil icon, change value, click check mark to save it.

NOTE:  with this change all messages will now be in descending order unless you previously clicked on the folders before making the change.  If you clicked on them before changing the order, those folders will not be affected by the global change.  You have to manually change them by selecting them, then View>Sort By> Descending.

 

Threaded/Unthreaded.  Default is threaded – I prefer unthreaded.  To change permanently:

·         View > Sort by > Unthreaded, then

·         Go to Config Editor (see above under Sort Order)

·         Type in mailnews.default_view_flags and change the value to 0.  Click the check mark and restart TB.

·         You may need to go back to View>Sort by>Unthreaded but it should stick.

 

Group By.  I like seeing the emails grouped by the date sorts:  Today, Yesterday, Last 7 Days, Last 14 days, Older.:

·         View>Sort by>Group by Sort.  But the problem is, it doesn’t stay that way so now you have to

·         View>Threads> Expand all Threads.

 

 

Add-ons   Tools > AddOn and Themes > Extensions then use search bar for these:

Some add-ons worth exploring:

·         Old Icons (I like these the best and use them)

·         Phoenity Buttons

·         Phoenity Icons

 

 

Unified and or Favorite folders:

For multiple accounts and using unified folders: 

·         Click the 3 dots to the right of the New Message box in the folder pane, then Folder Mode.

·         Choose both Unified Folders and Favorite Folders.

·         Right click on an Inbox and choose Favorite, then click on the 3 vertical dots by Favorite Folders and move up or down as you want.

·         Then down the list in the folders pane you should see a Unified folder structure that has a Unified Inbox. (I keep this off as I’m not a fan of unified inboxes – I have all account Inboxes set a favorites).

          

CSS Editing:

Editing via css is quite fun and where you can get creative. But first you have to enable it as its not ready by default (officially it’s not supported by TB and new program coding can break the following codes at any time):

Enabling css: 

·         go to TB menu Tools > Settings > General

·         scroll all the way down and click the 'Config editor' button on the right

·         search for: toolkit.legacyUserProfileCustomizations.stylesheets

·         click the double arrow on the right to toggle the value to 'true'

 

Next, locate and open your profile folder:

·         Menu:  Help > Troubleshooting Information

·        Under Application Basics, click on the Open Folder button next to "Profile folder". You should now see your profile folder being opened in your file manager.

 

Next, create the folder and its files: 

·         Inside your profile folder, create a new folder named chrome (all lower case) - the chrome folder should end up in a folder that includes stuff like prefs.js and places.sqlite.

·         Inside the chrome folder, create two new text files (i.e. new Notepad text files) by right clicking and select “new text file”

·         Name one userChrome.css and userContent.css (case sensitive)

 

Note: In Windows, you might want to disable the "Hide extensions for known file types" setting in Explorer. Once that's done, simply create a new text file (Right click ➝ New ➝ Text Document), then make sure to replace the .txt file-extension with .css.

You should now have two empty files called: userChrome.css; userContent.css

You are now ready to enter css code into the userChrome.css file and make changes:

Note:  the code parts below are the parts written in Courier Font. Make sure you copy all the parts as there can be a "}" symbol on its own on the last line.

 

Fix Menu Bar location and Window control buttons:

First, move the menu bar above the Unified Tool Bar (search bar), and then also move the close/shrink/minimize control buttons to the menu bar.  Copy the text below into your userChrome.css file, save the file, then restart TB.

 

/* menu bar above unified toolbar */ #toolbar-menubar { order: -1 !important; }

#toolbar-menubar { background-color: #174a70 !important; }

/* Move window controls up to the menu bar */ .titlebar-buttonbox-container { position: fixed; top: 0px; right: 0px; height: 19px !important; /* adjust if necessary */ }

 

You should now have the menu bar and controls above Unified Tool Bar (Search bar).

Now before we do more, just want to point out some pieces of the code.  You’ll see a lot of code includes hex color codes (e.g. #174a70 or just words like white, black, gainsboro).  If you are not familiar with codes, see this page: https://htmlcolorcodes.com

Note that as you select colors, it gives you the # and then a six number/letter code that comes after the # symbol (e.g. #174a70 is a shade of blue used in Windows).

I also find a picker app for windows helpful. This one is good:  https://colorpicker.fr

Its minimal, but the eyedropper lets you select specific colors you might already be using that you want to make the same.

So if you want to change color, just replace the six character code over 174a70 but make sure you keep the # symbol.  You can also replace the numbers in front of the “px” code to change sizing.

 

Next, create a more subtle unified toolbar:

·         Go back to Help > Troubleshooting Information and then click Open Folder beside Profile folder like last time. 

·         Open userChrome.css and add two spaces below the last character the following: 

 

#unifiedToolbar {
  height:  40px  !important;
  padding-block:   1px  !important;
  margin-block:    0px  !important;
  background:  #174a70  !important;
  color: white  !important;
}

 

This shrinks it a bit and makes it more subtle.  

Alternative 1: You can also just get rid of the Unified bar by put putting this in instead:

 

#unifiedToolbar {
  display:none !important;
}
 

Alternative 2: You can merge the Menu bar and Unified bar, though I haven't tried this:

/* merge unified, menu bars */
#unifiedToolbarContainer {
    float: right;
    width: 75% !important;
    margin-top: -20px;
    margin-right: 5px;
}
#toolbar-menubar {
  order: -1;    
}

Save the file, close TB and start it again to see the changes.

 

Note: from now on, I just show codes for things.  Opening the .css file, saving, restarting TB is always done the same way.

 

Hint:  You can keep a copy of the userChrome.css file in the same folder and call it userChrome,old or .bak or something – in case you screw up your .css file, you can go back to the last version that worked.

 

I like the Unified toolbar because I’ve customized it with buttons.  To do that, right click in a blank space on it and choose customize.  You’ll see I used Mail, Address Book, Calendar, Tasks, Add Ons and Themes on the left side, and Tag, Reply, Reply All, Forward, Print, Next Previous, Delete on the right side.  Do what works for you. 

 

I also hid the side vertical Spaces menu.  Now that the Unified toolbar has the items from the Spaces toolbar, you can hide it by unchecking View>Toolbars>Spaces

 

Fonts:

If you want to change the font family used in the user interface, including the message list pane and the folder pane, you can specify the font family:

*{ font-family: Aptos !important; }

I’ve used Aptos here, but you could change to something else such as Verdana or Liberation Sans

 

The next code is to turn the whole background of the folder pane into a light grey. 

 

#folderPane,
#folderPaneHeaderBar { background-color: #CACACA !important; }

Make the New Message button a little more subtle and color match:

 

#folderPaneWriteMessage { background-color: #174a70 !important; border: 0px solid white !important; color: white !important; }

 

This takes out the border by giving it a zero size.

 

 

Make new unread messages and unread messages have a specific color, font, and bold:

 

threadTree tbody [data-properties~="new"],
#threadTree [data-properties~="unread"] .thread-card-container :is(.sender, .subject, .date) {
  background-color: #CACACA !important; 
  font-family : Aptos !important;
  font-weight: Bold !important;
  color: #174a70 !important
}

 

The above is for new messages. Now for unread messages that are not new:

 

#threadTree tbody [data-properties~="unread"] {
  background-color: #CACACA !important;  
  font-family : Aptos !important;
  font-weight: Bold !important;
  color: #174a70 !important
}

The codes above will make both new and unread look the same, but the yellow star for new mail remains.  So if you have new mail, it’ll be grey background, blue bold text and have the yellow star.  Unread but not new is same but without the star.  Read email is white background with black text (default).

 

Remove the hover color change:

When you mouse over the folder list or the email list, the default is to change the color where your mouse is.  For some reason I find that distracting and prefer to not have flashing color changes as my mouse moves around in either of those panes.  These codes effectively remove the color change by turning the hover color to transparent.  First is email list, then folder list, then threaded emails (I think):

 

*|*:root {
  --listbox-hover: transparent !important;
}

 

.container:hover { background-color: transparent !important;

}

 
tr[is="thread-row"]:hover {
  background-color: transparent !important;
}

 

Change color of selected folders or selected emails:

When you click on a folder or email, it changes to the default colors.  This controls color of the selected item in the folders list:

 

li.selected > .container {
  color: white !important;
  background-color: #91a0b3 !important;
}

 

And this controls the color of the selected item in the email list:

 

[is="tree-view-table-body"] > .selected {
  color: white !important;
  background-color: #91a0b3 !important;
}

 

Manage tabs colors

The last edits I use control the tabs if you have address book, or calendar etc. open along with email.  TB uses tabs and the following code makes them more subtle and brings them into the color scheme. Also, the last two sections of the following make the new task and new event button similar to the new email button:

 

#tabmail-arrowscrollbox { background-color: #174a70 !important; }
 
.tab-line[selected=true] { background-color:transparent !important; }
 
:root { --tabs-toolbar-background-color: #174a70 !important; }
 

#sidePanelNewEvent { background-color: #174a70 !important; border: 1px solid white !important; color: white !important; }
 
#sidePanelNewTask { background-color: #174a70 !important; border: 1px solid white !important; color: white !important; }
 

 

Fixing the multiple lines in forwarded/replied emails:

When emails go back and forth through reply/reply/all/forward, TB adds colored vertical lines to the previous parts.  After a few back and forth's and the email chain can have a lot of these. 

 

This fix is done using the userContent.css file that was created when you enabled css.  This file should be alongside you userChrome.css file.

 

Open userContent.css and add the following:

 

blockquote[type=cite] {
   padding-bottom: 0 !important;
   padding-top: 0 !important;
   padding-left: 0 !important;
   border-left: none !important;
   border-right: none !important;
}

 

That’s it.  That's all I know so far on .css changes.  Now you can go back and change color codes, fonts, layout etc. how you want. You can make parts match other programs you use by using the color picker to get exact matches and then Find/Replace in Notepad to change all instances of a color.  An now that you see some of the things .css can do, you can also search for other .css hints and tips online.