Changing folders icons in new Thunderbird

Discussion of features in Mozilla Thunderbird
ApTeM
Posts: 89
Joined: September 3rd, 2006, 1:32 am
Location: Artem S. Tashkinov

Changing folders icons in new Thunderbird

Post by ApTeM »

I absolutely loathe the new icon set in Thunderbird - all icons look the same (grey blurry indistinguishable crap) which makes navigating them a royal PITA. :(

Application icons can be at least partially replaced by e.g. installing Phoenity Icons but folders icons remain default. :?

I've asked the developers to allow to make it possible to replace folders icons via an add-on but they have refused to implement the feature because reasons. :(

Is anyone aware of a simple way of replacing the default icons in Thunderbird >=70?
morat
Posts: 6403
Joined: February 3rd, 2009, 6:29 pm

Re: Changing folders icons in new Thunderbird

Post by morat »

I don't know of an addon or theme to change the folder pane styling in Thunderbird 78.

I'm using the userChrome.css file to revert the changes. If you wish to try the style, then you would need to download the following images to the chrome folder.

Thunderbird 68 folder pane icons
http://searchfox.org/comm-esr68/source/ ... folder.png
http://searchfox.org/comm-esr68/source/ ... server.png
http://searchfox.org/comm-esr68/source/ ... s-feed.png
http://searchfox.org/comm-esr68/source/ ... folder.png

Code: Select all

/* Thunderbird userChrome.css */

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

@-moz-document url-prefix("chrome://messenger/content/messenger.xhtml") {

  /* folder pane */

  .tabmail-tab[type="folder"],
  treechildren::-moz-tree-image(folderNameCol) {
    list-style-image: url("folder.png") !important;
    -moz-image-region: rect(0 16px 16px 0) !important;
  }
  
  treechildren::-moz-tree-image(folderNameCol, imapShared-true) {
    -moz-image-region: rect(0 192px 16px 176px) !important;
  }
  
  treechildren::-moz-tree-image(folderNameCol, newMessages-true) {
    -moz-image-region: rect(16px 16px 32px 0) !important;
  }
  
  .tabmail-tab[type="folder"][ServerType="nntp"],
  treechildren::-moz-tree-image(folderNameCol, serverType-nntp) {
    -moz-image-region: rect(0 160px 16px 144px) !important;
  }
  
  treechildren::-moz-tree-image(folderNameCol, isFeed-true) {
    list-style-image: url("rss-feed.png") !important;
    -moz-image-region: rect(32px 16px 48px 0) !important;
  }
  
  .tabmail-tab[type="folder"][IsFeedFolder="true"],
  treechildren::-moz-tree-image(folderNameCol, isFeedFolder-true) {
    list-style-image: url("rss-feed-folder.png") !important;
    -moz-image-region: auto !important;
  }
  
  .tabmail-tab[type="folder"][SpecialFolder="Inbox"],
  treechildren::-moz-tree-image(folderNameCol, specialFolder-Inbox) {
    -moz-image-region: rect(0 48px 16px 32px) !important;
  }
  
  treechildren::-moz-tree-image(folderNameCol, specialFolder-Inbox, newMessages-true) {
    -moz-image-region: rect(16px 48px 32px 32px) !important;
  }
  
  .tabmail-tab[type="folder"][SpecialFolder="Sent"],
  treechildren::-moz-tree-image(folderNameCol, specialFolder-Sent) {
    -moz-image-region: rect(0 64px 16px 48px) !important;
  }
  
  .tabmail-tab[type="folder"][SpecialFolder="Outbox"],
  treechildren::-moz-tree-image(folderNameCol, specialFolder-Outbox) {
    -moz-image-region: rect(0 80px 16px 64px) !important;
  }
  
  .tabmail-tab[type="folder"][SpecialFolder="Drafts"],
  treechildren::-moz-tree-image(folderNameCol, specialFolder-Drafts) {
    -moz-image-region: rect(0 96px 16px 80px) !important;
  }
  
  .tabmail-tab[type="folder"][SpecialFolder="Templates"],
  treechildren::-moz-tree-image(folderNameCol, specialFolder-Templates) {
    -moz-image-region: rect(0 112px 16px 96px) !important;
  }
  
  .tabmail-tab[type="folder"][SpecialFolder="Junk"],
  treechildren::-moz-tree-image(folderNameCol, specialFolder-Junk) {
    -moz-image-region: rect(0 128px 16px 112px) !important;
  }
  
  .tabmail-tab[type="folder"][SpecialFolder="Trash"],
  treechildren::-moz-tree-image(folderNameCol, specialFolder-Trash) {
    -moz-image-region: rect(0 144px 16px 128px) !important;
  }
  
  .tabmail-tab[type="folder"][SpecialFolder="Archive"],
  treechildren::-moz-tree-image(folderNameCol, specialFolder-Archive) {
    -moz-image-region: rect(0 208px 16px 192px) !important;
  }
  
  .tabmail-tab[type="folder"][SpecialFolder="Virtual"],
  treechildren::-moz-tree-image(folderNameCol, specialFolder-Virtual) {
    -moz-image-region: rect(0 176px 16px 160px) !important;
  }
  
  .tabmail-tab[type="folder"][IsServer="true"],
  treechildren::-moz-tree-image(folderNameCol, isServer-true) {
    list-style-image: url("server.png") !important;
    -moz-image-region: rect(0 16px 16px 0) !important;
  }
  
  treechildren::-moz-tree-image(folderNameCol, isServer-true, biffState-NewMail) {
    -moz-image-region: rect(16px 16px 32px 0) !important;
  }
  
  .tabmail-tab[type="folder"][IsServer="true"][ServerType="imap"][IsSecure="true"],
  .tabmail-tab[type="folder"][IsServer="true"][ServerType="pop3"][IsSecure="true"],
  treechildren::-moz-tree-image(folderNameCol, isServer-true, serverType-pop3, isSecure-true),
  treechildren::-moz-tree-image(folderNameCol, isServer-true, serverType-imap, isSecure-true) {
    -moz-image-region: rect(0 32px 16px 16px) !important;
  }
  
  treechildren::-moz-tree-image(folderNameCol, isServer-true, biffState-NewMail, isSecure-true) {
    -moz-image-region: rect(16px 32px 32px 16px) !important;
  }
  
  .tabmail-tab[type="folder"][IsServer="true"][ServerType="none"],
  treechildren::-moz-tree-image(folderNameCol, isServer-true, serverType-none) {
    -moz-image-region: rect(0 48px 16px 32px) !important;
  }
  
  treechildren::-moz-tree-image(folderNameCol, isServer-true, serverType-none, biffState-NewMail) {
    -moz-image-region: rect(16px 48px 32px 32px) !important;
  }
  
  .tabmail-tab[type="folder"][IsServer="true"][ServerType="nntp"],
  treechildren::-moz-tree-image(folderNameCol, isServer-true, serverType-nntp) {
    -moz-image-region: rect(0 64px 16px 48px) !important;
  }
  
  .tabmail-tab[type="folder"][IsServer="true"][ServerType="nntp"][IsSecure="true"],
  treechildren::-moz-tree-image(folderNameCol, isServer-true, serverType-nntp, isSecure-true) {
    -moz-image-region: rect(0 80px 16px 64px) !important;
  }
  
  .tabmail-tab[type="folder"][IsServer="true"][ServerType="rss"],
  treechildren::-moz-tree-image(folderNameCol, isServer-true, serverType-rss) {
    list-style-image: url("rss-feed.png") !important;
    -moz-image-region: rect(0 16px 16px 0) !important;
  }

}
http://kb.mozillazine.org/UserChrome.css

Thunderbird 68 folder pane styles
http://searchfox.org/comm-esr68/search?q=folderPane.css
http://searchfox.org/comm-esr68/source/ ... erPane.css

Thunderbird 78 folder pane styles
http://searchfox.org/comm-esr78/search?q=folderPane.css
http://searchfox.org/comm-esr78/source/ ... erPane.css

...

Thanks for the addon tip.

Phoenity Icons
http://addons.thunderbird.net/thunderbird/addon/986685

EDIT: addon styles the folder pane starting in version 3.0b5 (see pics)

...

Here is how to add custom colored folders to the folder pane styling.

More info: http://forums.mozillazine.org/viewtopic ... #p14876215
Last edited by morat on October 27th, 2020, 9:04 am, edited 3 times in total.
ApTeM
Posts: 89
Joined: September 3rd, 2006, 1:32 am
Location: Artem S. Tashkinov

Re: Changing folders icons in new Thunderbird

Post by ApTeM »

You're my personal hero! Great many thanks for the solution, it works perfectly.

To whoever finds this thread: PNGs must be downloaded into the `chrome` directory.

One minor issue remains: the icons in the message search pane look to be unthemeable. I wonder if you could fix that too.
morat
Posts: 6403
Joined: February 3rd, 2009, 6:29 pm

Re: Changing folders icons in new Thunderbird

Post by morat »

ApTeM wrote:One minor issue...
What do you mean by the message search pane?

Do you mean the quick filter bar? Those icons have been monochrome for a long time.

Thunderbird 60 quick filter bar styles (images are SVG files)
http://searchfox.org/comm-esr60/search? ... terBar.css
Thunderchild128
Posts: 10
Joined: September 20th, 2020, 2:02 pm

Re: Changing folders icons in new Thunderbird

Post by Thunderchild128 »

Where is the chrome folder? inside the main thunderbird program folder?
Thunderchild128
Posts: 10
Joined: September 20th, 2020, 2:02 pm

Re: Changing folders icons in new Thunderbird

Post by Thunderchild128 »

I found a Chrome folder but putting the *.css file and icon images in there did not work.
User avatar
BuddhaNature
Posts: 537
Joined: January 3rd, 2008, 9:44 am
Location: Scotland

Re: Changing folders icons in new Thunderbird

Post by BuddhaNature »

Thunderchild128 wrote:I found a Chrome folder but putting the *.css file and icon images in there did not work.
In very recent versions Thunderbird is now set by default to ignore userChrome.css files so this might be stopping your css file from working (assuming you have everything, images and css file, in the right place and all named properly). To set Thunderbird to actually read, not ignore, the css file do the following:

In Thunderbird go (menu) Tools > Options > General at the bottom of that options page you will see a button titled Config Editor.... Click on that button and when you get the warning just accept the risk.

Now into the search-box of the config editor enter the following preference name:
toolkit.legacyUserProfileCustomizations.stylesheets (you can copy and paste it from here) The search will be done and the preference found. If the preference is set to false double-click on the preference to set it to true. Now you've done this close the config editor window and then shutdown and restart Thunderbird.

Do your old style icons now show in the new Thunderbird folder pane? (If they don't then that would suggest you've made some mistake with the locations of the chrome folder, image files and css file.)
OS: Windows 10 Pro. x64
User avatar
BuddhaNature
Posts: 537
Joined: January 3rd, 2008, 9:44 am
Location: Scotland

Re: Changing folders icons in new Thunderbird

Post by BuddhaNature »

Morat, thanks very much for the image files and css code above to get Thunderbird 78+ to show the good old fashioned Folder Pane icons instead of the (new) horrible monochrome icons. Your help is very much appreciated.

However, there is a slight problem with the way the icons are displayed and I'm wondering of you know the cause of the issue and the cure, if there is one. (Either way, being able to use the old-style icons, even if they are cropped a bit, is much preferable to the monochrome icons.)
Image
OS: Windows 10 Pro. x64
morat
Posts: 6403
Joined: February 3rd, 2009, 6:29 pm

Re: Changing folders icons in new Thunderbird

Post by morat »

@BuddhaNature

I'm not seeing the cropping problem.

Try increasing the row height or maybe decrease the image size.

Code: Select all

#folderTree > treechildren::-moz-tree-row {
  height: 2.0em !important;
}

Code: Select all

#folderTree > treechildren::-moz-tree-image {
  width: 14px !important;
  height: 14px !important;
}
Maybe...

Code: Select all

#folderTree > treechildren::-moz-tree-cell-text {
  padding-bottom: 1px !important;
}
Reference
http://searchfox.org/comm-esr78/search? ... th=windows
http://searchfox.org/comm-esr78/search? ... ath=shared

I'm a hedge wizard, not a theme developer. :wink:
Last edited by morat on September 23rd, 2020, 6:23 am, edited 1 time in total.
Thunderchild128
Posts: 10
Joined: September 20th, 2020, 2:02 pm

Re: Changing folders icons in new Thunderbird

Post by Thunderchild128 »

No, no change, so maybe wrong location.
morat
Posts: 6403
Joined: February 3rd, 2009, 6:29 pm

Re: Changing folders icons in new Thunderbird

Post by morat »

@Thunderchild128

Check if the chrome\userChrome.css file is really in the profile folder.

Help > Troubleshooting Information > Profile Folder > Open Folder

The userChrome.css file name is case sensitive.

Windows hides file extensions by default. Novice users may end up mistakingly naming the file userChrome.css.txt without realizing it.

Try testing another style to see if the userChrome.css file is working correctly.

Code: Select all

/* Thunderbird userChrome.css */

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

* { background-color: orange !important; }
Thunderbird must be restarted for the changes to take effect.

userChrome.css
http://kb.mozillazine.org/UserChrome.css
User avatar
BuddhaNature
Posts: 537
Joined: January 3rd, 2008, 9:44 am
Location: Scotland

Re: Changing folders icons in new Thunderbird

Post by BuddhaNature »

@morat
Yes, morat, you sort it out again!

The first snippet of code you provided, adjusting the row height, fixed the cropping issue with a 'side effect'. The side effect was that it increased, by quite a bit, the vertical height of the folder tree. However, when I saw it, I thought that pretty good as for someone with failing eyesight (like me) it makes the tree far easier to read.

The second snippet of code you provided, decrease the image size, also worked, fixed the cropping issue, and without increasing the height of the folder tree -- so things back to as they were before Thunderbird 78+.

The third snippet of code you provided had no effect at all that I could see.

Your 'reference' links and the information they point to is wasted on me -- too far above my pay-grade and I'm getting old now so not so inclined to care any more, but I sure am glad there are folks around like yourself who do care and help us less fortunate ones fix problems.

As you weren't seeing the cropping issue yourself I should perhaps mention that I'm using Thunderbird Portable (from PortableApps) but I doubt very much that is why I am getting the issue and you're not. (I do not have anything else in my Thunderbird userChrome.css file other than the code shown in this thread to deal with the monochrome icons issue. Also don't have any add-ons installed to my Thunderbird.)

Thanks very much, morat -- problems all solved for me. I'll drink a bottle of wine on your behalf.
Last edited by BuddhaNature on September 22nd, 2020, 10:58 am, edited 1 time in total.
OS: Windows 10 Pro. x64
User avatar
BuddhaNature
Posts: 537
Joined: January 3rd, 2008, 9:44 am
Location: Scotland

Re: Changing folders icons in new Thunderbird

Post by BuddhaNature »

@Thunderchild128
I hope you managed to find your Thunderbird profile folder following the instruction morat provided.

Just in case you are not clear on what morat is talking about when he says you might inadvertently have created a userChrome.css file with the file name userChrome.css.txt read through the guide on this page and it will explain that and how to fix it if needs be. The guide is aimed at creating a userChrome.css file for Firefox but will also work for Thunderbird, just substitute your actual path to your actual (Thunderbird) profile folder and the chrome folder it will contain (though you will have to create one if it doesn't already exist), and for the content of the userChrome.css file just put the code you get from this thread (i.e. don't use the code in the guide at all). For the image files to put in the Thunderbird chrome folder use the image files you downloaded from this thread (that you are reading right now). You should also be aware that strictly speaking the chrome folder should be titled chrome and not Chrome i.e. it's case-sensitive in some situations so just follow that 'good practice' rule and you won't go wrong.

Post up if you have success or another fail. It's helpful to others to know how things went for you.
OS: Windows 10 Pro. x64
Thunderchild128
Posts: 10
Joined: September 20th, 2020, 2:02 pm

Re: Changing folders icons in new Thunderbird

Post by Thunderchild128 »

No luck, I give up. I don't understand why on the one hand themes can no longer affect the icons yet someone decided to change them forcing everyone to be stuck with them due to dropping the change with themes. Can't we just replace the files for the icons?
morat
Posts: 6403
Joined: February 3rd, 2009, 6:29 pm

Re: Changing folders icons in new Thunderbird

Post by morat »

Thunderchild128 wrote:Can't we just replace the files for the icons?
Replacing the image files is much harder than getting the userChrome.css file to work.
Post Reply