Поиск в Поддержке

Избегайте мошенников, выдающих себя за службу поддержки. Мы никогда не попросим вас позвонить, отправить текстовое сообщение или поделиться личной информацией. Сообщайте о подозрительной активности, используя функцию «Пожаловаться».

Learn More

Colored icons for folders

  • 36 ответов
  • 4 имеют эту проблему
  • 2100 просмотров
  • Последний ответ от Toad-Hall

more options

Dear Sirs,

Is there any possibility to have the colored icons back in Thunderbird 78.x?

It helped me a lot to differentiate between folders and other stuff. Now with the black and white display only, it is for me more difficult.

Sincerely,

Jens Wickinger

Dear Sirs, Is there any possibility to have the colored icons back in Thunderbird 78.x? It helped me a lot to differentiate between folders and other stuff. Now with the black and white display only, it is for me more difficult. Sincerely, Jens Wickinger
Приложенные скриншоты

Выбранное решение

It is possible to set the folder colours so they occur automatically. The method below does mean that you will not be able to set them manually.

This is not so difficult as it may at first seem as it only requires you being able to follow instructions, create folders and files; copy and paste text. The only bit you need to sort out is the actual colour which I've shown as bold.

First make sure this is set as follows:

  • Menu app icon > Options
  • Select 'General'
  • Scroll to the bottom and click on 'Config Editor' button
  • Accept Dragons warning
  • In search type: legacy
  • Look for this line: toolkit.legacyUserProfileCustomizations.stylesheet

If it is set to 'True' then all is OK

If it is set to 'False'

  • Double click on that line to toggle the 'False' to 'True'
  • Restart Thunderbird if you needed to alter the setting.

Now to create the userChrome.css file: In Thunderbird:

  • Help > Troubleshooting Information
  • click on 'Open folder' button

a new window opens showing the contents of your Profile folder.

  • Close Thunderbird now - this is important.
  • Create new folder and call it chrome note the spelling - use a lower case 'c' It should be in the same place as the 'Mail' folder. See image below as guide.
  • open Notepad
  • Copy everything - all the text between lines below and paste it into the Notepad document.

note: In the code below, all the colours are represented as html hex code which is the # key followed by 6 numbers/letters eg: #ff0000. You can see just above each code section I've written some text to say what colour I used and in the image below, it shows how this looks using dark theme. Basically red for account; green for good default folders; orange for junk and trash; special search folder turqiouse and all others set as yellow. But you can choose whatever colour you want. The link below will help you choose colours and show hex codes.


/*
* Do not remove the @namespace line -- it's required for correct functioning - it only needs to be entered once at the top of the userChrome.css file
 */

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

/* all other folders - not special folders - */
treechildren::-moz-tree-image(folderNameCol){
  fill: #ffff00 !important;
}

/* this changes only mail account folders to red */
treechildren::-moz-tree-image(folderNameCol, isServer-true) {
  fill: #ff0000 !important;
}

/* ..... Inbox - colour green ..... */
.tabmail-tab[type="folder"][SpecialFolder="Inbox"],
treechildren::-moz-tree-image(folderNameCol, specialFolder-Inbox) {
  fill: #33cc33 !important;
 
}

/* ..... Sent - green..... */
.tabmail-tab[type="folder"][SpecialFolder="Sent"],
treechildren::-moz-tree-image(folderNameCol, specialFolder-Sent) {
  fill: #33cc33 !important;
}


/* ..... Outbox - green..... */
.tabmail-tab[type="folder"][SpecialFolder="Outbox"],
treechildren::-moz-tree-image(folderNameCol, specialFolder-Outbox) {
  fill: #33cc33 !important;
}

/* ..... Drafts - green..... */
.tabmail-tab[type="folder"][SpecialFolder="Drafts"],
treechildren::-moz-tree-image(folderNameCol, specialFolder-Drafts) {
  fill: #33cc33 !important;
}


/* ..... Archives - green ..... */
.tabmail-tab[type="folder"][SpecialFolder="Archive"],
treechildren::-moz-tree-image(folderNameCol, specialFolder-Archive) {
  fill: #33cc33 !important;
}

/* ..... Templates - green..... */
.tabmail-tab[type="folder"][SpecialFolder="Templates"],
treechildren::-moz-tree-image(folderNameCol, specialFolder-Templates) {
  fill: #33cc33 !important;
}

/* ..... Junk - orange ..... */
.tabmail-tab[type="folder"][SpecialFolder="Junk"],
treechildren::-moz-tree-image(folderNameCol, specialFolder-Junk) {
  fill: #FF9900 !important;
}

/* ..... Trash  orange ..... */
.tabmail-tab[type="folder"][SpecialFolder="Trash"],
treechildren::-moz-tree-image(folderNameCol, specialFolder-Trash) {
  fill: #FF9900 !important;
}

/* ..... Saved Search Folder  turquoise..... */
.tabmail-tab[type="folder"][SpecialFolder="Virtual"],
treechildren::-moz-tree-image(folderNameCol, specialFolder-Virtual) {
  fill: #33cccc !important;
}


Please note: recently, emails containing code were missing one vital part - !important; was removed from code - the info is all correct in the forum question, but somehow got changed when the comment was posted to recipient in email - so please double check.


  • Save the document as filename userChrome.css in the 'chrome' folder. Note the spelling all lower case except for the 'C'. See image below as guide.
  • Start Thunderbird.

The last image shows an example of the above code produces.

Прочитайте этот ответ в контексте 👍 1

Все ответы (16)

more options

Thanks Toad-Hall I have added the phoenity icons extension and now the folders look so much better, just like Thunderbird 68 , and so much easier !

more options

Friends, please help! I wrote above, help with the folder color settings, it does not work.

Изменено eav

more options

Toad-Hall said

There is an addon that offers some coloured icons. As with all addons, they are written by someone and not an employee of Thunderbird. It takes a lot of time and effort to put code together. It is not that simple. Here is an addon that you might prefer to use: https://addons.thunderbird.net/en-US/thunderbird/addon/phoenity-icons/

@Toad-Hall,

Thanks for the suggestion. I have already tried Phoenity Icons, but I really wasn't enamored with the icons that the add-on uses and I don't want the toolbar icons changed. The add-on really doesn't offer any way to customize any of this.

So I looked and played around and found a way in CSS to change the folder, tab, and menu icon colors on the default icons. I actually like the results fine.

I was hoping there was a way through CSS to color the icons in the Contact list. Is there a way to do that that you are aware of? I tried using the developer tools in TB, but couldn't figure out the correct element names and syntax to use.

Thanks, Bill

more options

eav said

Friends, please help! I wrote above, help with the folder color settings, it does not work.

I use this code to change the color for all the folders.

/*----------------------------------------------------------------------------------------------*/ /* color for all folders including non-special folders */ /*----------------------------------------------------------------------------------------------*/

.tabmail-tab[type="folder"] .tab-icon-image {

 fill: steelblue !important;

} treechildren::-moz-tree-image(folderNameCol, ) {

 fill: steelblue !important;

} .folderMenuItem {

 fill: steelblue !important;

}

The first changes the icon color in the tab, the second in the folder list, and the third in the menus.

If you want to change the special folders (Inbox, Sent, etc.) the code must be placed after this code or to say that a bit differently, this code must be placed before the code to change the special folders.

Изменено BillH

more options

BillH said

eav said

Friends, please help! I wrote above, help with the folder color settings, it does not work.

I use this code to change the color for all the folders.

/*----------------------------------------------------------------------------------------------*/ /* color for all folders including non-special folders */ /*----------------------------------------------------------------------------------------------*/

.tabmail-tab[type="folder"] .tab-icon-image {

 fill: steelblue !important;

} treechildren::-moz-tree-image(folderNameCol, ) {

 fill: steelblue !important;

} .folderMenuItem {

 fill: steelblue !important;

}

The first changes the icon color in the tab, the second in the folder list, and the third in the menus.

If you want to change the special folders (Inbox, Sent, etc.) the code must be placed after this code or to say that a bit differently, this code must be placed before the code to change the special folders.

This works for all folders at the same time. I need to change the color for each folder separately.

more options

re:This works for all folders at the same time. I need to change the color for each folder separately.

Pre 78 Thunderbird only had one general yellow folder for regular folders. If you used the code to go back to previous setup then that is what you will see.

If you did not use the 'userChrome.css' method then you are offered the new method of being able to select each one individually. If you used the 'userChrome.css' method but only copied the code that related to 'special' folders - see my code in comment 3, then all the regular folders would still look like the default and offer the manual method - see comment 1.

more options

If you want to change each non-special folder one at a time then remove the code in the css file to change all folders and then right click on each non-special folder, select Properties, and use the Icon Colors: option to change the color of the folder.

Изменено BillH

more options

With lots of help I figured out how to color the icon for each contact in the address book.

treechildren::-moz-tree-image(GeneratedName) {

color: red !important;

}

Thanks, Bill

more options

BillH said

If you want to change each non-special folder one at a time then remove the code in the css file to change all folders and then right click on each non-special folder, select Properties, and use the Icon Colors: option to change the color of the folder.

Thank you!

more options

Thank you all very much for your help. I didn't think to look in the folder properties. Everything worked out! Thanks. I think this is what I need.

more options

Toad-hall, I don't want to change folder icon colors, I want to have new mail produce a yellow star at the appropriate folder. I don't see how to get that done. Can you help? JimW

more options

In version 68* the folder that displays a new star is a different icon that is forced to display if new mail. That info is included if you use the old folders.

The developers did not create an icon with star, hence why you do not see it, they also removed the star that should be seen against the subject of a new mail in the Thread Pane. This code symultaneously disappeared. I have created a bug report asking for this 'star' feature to be added again. Perhaps you could help by supporting this bug request as it lets the developers know that it is more than just me asking. https://bugzilla.mozilla.org/show_bug.cgi?id=1676697

more options

jimmww Currently, the only way to get back the 'star' would be to use 'userChrome.css' to reinstall the old folder icons. That would mean using the third method I mentioned at the start of this question.

more options

Fascinating stuff. Any idea how to change the SIZE of the new SVG icons in the foldertree?

more options

Toad-Hall said

You have some options and I'll post those options in three separate comments. You can now manually choose a colour for the outline of icon in folder pane.
  • Right click on the folder and select 'Properties'.
  • On the 'General information' tab you will see 'Icon colour' and next to it is a rectangular colour box.
  • Click on that coloured ox and you can then select a colour for that folder.
  • Click on OK
  • Click on OK
This is done on a per folder basis.

I do that on my TB78 and it shows, for example, that a folder is supposed to be pink, but it's not pink. Doesn't matter if I restart TB or not.

more options

goldenbc said

Toad-Hall said

You have some options and I'll post those options in three separate comments. You can now manually choose a colour for the outline of icon in folder pane.
  • Right click on the folder and select 'Properties'.
  • On the 'General information' tab you will see 'Icon colour' and next to it is a rectangular colour box.
  • Click on that coloured ox and you can then select a colour for that folder.
  • Click on OK
  • Click on OK
This is done on a per folder basis.

I do that on my TB78 and it shows, for example, that a folder is supposed to be pink, but it's not pink. Doesn't matter if I restart TB or not.

The information about 'coloured icons' is quite clear. The first option - which you have quoted - is about manually choosing an outline colour for a default version 78* folder icon. The image you posted shows that you have already chosen to use a different method - an option where you used code to override the default icon to display an entirely different icon image - a yellow folder image. So the settings you are talking about have no effect on the folder icon because the folder icon is not the default icon used in version 78*.

The first image below shows default version 78* icons in both light and dark theme. Manually choosing a colour for the outline of icon in folder pane. I have selected a colour for some of those icons, but most are showing the default setting. This was done on a per folder basis as advised in option 1 method as per quoted by you.

The second image shows how I have used some code to preset default colours for those default icons. This information was set out in the second option. It is possible to set the folder colours so they occur automatically.The method does mean that you will not be able to set them manually This method was selected by the original person who asked the question as their prefered option. So now I do not need nor are able to set an individual colour via Properties.

The third image shows how I have used used code and a different set of icons - the icons happen to be those used in a pre 78 version. AS described in the information for the third option. You can completely remove all the new Folder Pane icons and replacing them with the icons used in version 68, then here is method using the 'userChrome.css' file.

There are three options. They are three separate options. Using a 'userChrome.cs' file overrides default code because that is it's purpose.

If you want to have manual control on individual folders, then you cannot use 'userChrome.css' to override thunderbird code. You have to use Thunderbird as it is out of the box and then you can use that first method via 'Properties' which is the default method.

  1. 1
  2. 2