Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

How do I change colors for Folder Icons, New Mail, Unread Mail and Account Level items

more options

I am new to Thunderbird world after being an Outlook user for nearly 25 years. I am liking it - especially the ability to customize the look and feel. That said, it's not for the faint at heart (my dad would not look kindly on the method for many customizations).

So, I have been able to update the userChrome.css file to allow for my own flavor of my mail folders.

One thing I canot get sorted though is what the syntax is for configuring the email account folder entries in the folder pane.

Right now, they all appear bold. Regardless of new mail, unread mail, any mail, etc. Some are blue (not consistent though from what I can see as to why), most are my theme default (white).

How do I change the font/display settings for these entries?

I've managed to sort out my other folder appears settings in userChrome.css, but cannot find anything for the account folder (apologies if I'm not referring to it in it's proper/common name - I'm new to Thunderbird).

In the attached image: - ignore the white box, I have that sorted. - turqouise box: why is this blue? - yellow boxes: why are they yellow?

How do I set the stylings for these items and more specifically, what are they called and what are their syntax names in css?

Thanks, House

Attached screenshots

Modified by The 4 Houses

Chosen solution

This contains a LOT of commentary (sorry) /* DO NOT REMOVE the @namespace line -- it's required for correct functioning

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

/* ####################################################################################### */ /* ===== Default Folder Stylings =====

   Status: WORKING 
   Notes:  I did not change the font color as I am using the default them color.
           I left it there as a reminder and to be consistent.  */
       #folderTree > treechildren 
       {
           /* color: white !important; */
           font-size: 11pt !important;
           font-weight: normal !important;
           font-style: normal !important;
           font-family: Calibri !important;
       }      

/* ===== NEW EMAILS =====

   Status: WORKING 
   Notes:  This is not to be confused with unread emails. See UNREAD section. 
           Once the new email has been accessed, it will revert to the UNREAD email stylings below (green)

/* ================================================================================================================ */

       #folderTree > treechildren::-moz-tree-cell-text(folderNameCol, closed, newMessages-true),
       #folderTree > treechildren::-moz-tree-cell-text(folderNameCol, newMessages-true),
       #folderTree > treechildren::-moz-tree-cell-text(folderNameCol, closed, newMessages-true, selected),
       #folderTree > treechildren::-moz-tree-cell-text(folderNameCol, newMessages-true, selected),
       #folderTree > treechildren::-moz-tree-cell-text(folderNameCol, specialFolder-Inbox, newMessages-true),
       #folderTree > treechildren::-moz-tree-cell-text(folderNameCol, specialFolder-Inbox, newMessages-true, selected)
       {
           color: red !important;
           font-weight: bold !important;
           font-style: italic !important;
       }

/* ===== UNREAD EMAILS in INBOX folders =====

   Status: NOT WORKING 
   Notes:  This is overwritten if the inbox folder has NEW UNREAD messages(Red)
           I have opted to not include all subfolders in this as it would result in many folders
           being marked as green as could lose it's value in identifying your inbox. 

/* ================================================================================================================ */

       treechildren::-moz-tree-cell-text(specialFolder-Inbox, hasUnreadMessages-true),
       treechildren::-moz-tree-cell-text(unread)
       {
           color: green !important;
           font-weight: bold !important;
           font-style: italic !important;
       } 
 

/* ===== UNREAD EMAILS in Subfolders =====

   Status: WORKING 
   Notes:  This Section formats the parent folder for when a child folder contains new/unread messages. 
           I have them both set to the same settings, so whether expanded or collapsed, it shows the same.

/* ================================================================================================================ */

       #folderTree > treechildren::-moz-tree-cell-text(folderNameCol, closed, subfoldersHaveUnreadMessages-true),
       #folderTree > treechildren::-moz-tree-cell-text(folderNameCol, closed, subfoldersHaveUnreadMessages-true, selected)        
       {
           color: yellow !important;
           font-weight: normal !important;
           font-style: italic !important;
       }

/* ===== ACCOUNT LEVEL FOLDER =====

   Status: WORKING 
   Notes:  This Section formats the account level folder to skyblue and normal weight (ie. myemail@domain.com).
           The icon color is red, but is set below in the FOLDER ICON Settings

/* ================================================================================================================ */

       treechildren::-moz-tree-cell-text(folderNameCol, isServer-true) 
       {
           color: skyblue !important; 
           font-weight: normal !important; 
       }

/* ===== FOLDER ICON SETTINGS ===== */

        /* THIS MUST BE THE FIRST ICON SETTING - IF YOU PLACE IT LAST, IT WILL OVERRIDE ALL OTHER ICON Settings */
        /* Remaining Folders - all other folders - not special folders - */
       treechildren::-moz-tree-image(folderNameCol){
         fill: yellow !important;
       }
       /* THE ABOVE MUST BE THE FIRST ICON SETTING - IF YOU PLACE IT LAST, IT WILL OVERRIDE ALL OTHER ICON Settings */  
       /* ==================================================== */
       
       /* Account Level Icon - Red (this only changes icon for the mail account icon) */
       treechildren::-moz-tree-image(folderNameCol, isServer-true) {
         fill: #ff0000 !important;
       }
       /* ..... Inbox - White ..... */
       .tabmail-tab[type="folder"][SpecialFolder="Inbox"],
       treechildren::-moz-tree-image(folderNameCol, specialFolder-Inbox) {
         fill: white !important;
       }
       /* ..... Sent - light blue ..... */
       .tabmail-tab[type="folder"][SpecialFolder="Sent"],
       treechildren::-moz-tree-image(folderNameCol, specialFolder-Sent) {
         /* fill: #91CBF7 !important; */
          fill: skyblue !important;
         
       }
       
       /* ..... Trash - Silver ..... */
       .tabmail-tab[type="folder"][SpecialFolder="Trash"],
       treechildren::-moz-tree-image(folderNameCol, specialFolder-Trash) {
         fill: Silver !important;
       }
       
       /* ..... Drafts - Gray..... */
       .tabmail-tab[type="folder"][SpecialFolder="Drafts"],
       treechildren::-moz-tree-image(folderNameCol, specialFolder-Drafts) {
         fill: gray !important;
       }
       
       /* ..... Outbox - green..... */
       .tabmail-tab[type="folder"][SpecialFolder="Outbox"],
       treechildren::-moz-tree-image(folderNameCol, specialFolder-Outbox) {
         fill: #33cc33 !important;
       }
       /* ..... Archives / All Mail - gold ..... */
       .tabmail-tab[type="folder"][SpecialFolder="Archive"],
       treechildren::-moz-tree-image(folderNameCol, specialFolder-Archive) {
         fill: gold !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;
       }
       /* ..... Saved Search Folder - Pink ..... */
       .tabmail-tab[type="folder"][SpecialFolder="Virtual"],
       treechildren::-moz-tree-image(folderNameCol, specialFolder-Virtual) {
         fill: Pink !important;
       }
Read this answer in context 👍 0

All Replies (2)

more options

From a little more research and testing, I think I have managed to find what I need. J

ust in case someone else out there is looking for the same information , here's a beginner's explanation. First a few basics I learned as I transition to Thunderbird:

A. You need to know that the formatting differentiates between NEW and UNREAD (as it should). You can color code for both or just "unread" which would apply to both. B. I have no idea why ever setting has "!important;" after it (assumption is this allows it to overwrite the theme maybe) C. If you want to change settings affecting the "text" of a folder, you are modifying (normally) treechildren::-moz-tree-cell-text (folderNameCol)* D. If you want to change settings affecting the "icon" for a folder, you area modifying (normally) treechildren::-moz-tree-image(folderNameCol)*

  • there are additional parameters that can be included or added in the parentheses and you can see some examples in my version below.

E. I learned that for some settings, the order in which you write the CSS matters. For example: setting the default folder icon color to yellow overwrites all other icon color settings to yellow if you place it last in the order of icon color settings (where you would normally see an if not/else type clause - at the end). Placing it first removed the issue - I did not test other locations.

NOTE: I do not claim to be an expert and I'm sure someone with moreknowlege could explain this in more detail and probably a fair bit more direct ad eloquent.

See my next response for the CSS example

Helpful?

more options

Chosen Solution

This contains a LOT of commentary (sorry) /* DO NOT REMOVE the @namespace line -- it's required for correct functioning

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

/* ####################################################################################### */ /* ===== Default Folder Stylings =====

   Status: WORKING 
   Notes:  I did not change the font color as I am using the default them color.
           I left it there as a reminder and to be consistent.  */
       #folderTree > treechildren 
       {
           /* color: white !important; */
           font-size: 11pt !important;
           font-weight: normal !important;
           font-style: normal !important;
           font-family: Calibri !important;
       }      

/* ===== NEW EMAILS =====

   Status: WORKING 
   Notes:  This is not to be confused with unread emails. See UNREAD section. 
           Once the new email has been accessed, it will revert to the UNREAD email stylings below (green)

/* ================================================================================================================ */

       #folderTree > treechildren::-moz-tree-cell-text(folderNameCol, closed, newMessages-true),
       #folderTree > treechildren::-moz-tree-cell-text(folderNameCol, newMessages-true),
       #folderTree > treechildren::-moz-tree-cell-text(folderNameCol, closed, newMessages-true, selected),
       #folderTree > treechildren::-moz-tree-cell-text(folderNameCol, newMessages-true, selected),
       #folderTree > treechildren::-moz-tree-cell-text(folderNameCol, specialFolder-Inbox, newMessages-true),
       #folderTree > treechildren::-moz-tree-cell-text(folderNameCol, specialFolder-Inbox, newMessages-true, selected)
       {
           color: red !important;
           font-weight: bold !important;
           font-style: italic !important;
       }

/* ===== UNREAD EMAILS in INBOX folders =====

   Status: NOT WORKING 
   Notes:  This is overwritten if the inbox folder has NEW UNREAD messages(Red)
           I have opted to not include all subfolders in this as it would result in many folders
           being marked as green as could lose it's value in identifying your inbox. 

/* ================================================================================================================ */

       treechildren::-moz-tree-cell-text(specialFolder-Inbox, hasUnreadMessages-true),
       treechildren::-moz-tree-cell-text(unread)
       {
           color: green !important;
           font-weight: bold !important;
           font-style: italic !important;
       } 
 

/* ===== UNREAD EMAILS in Subfolders =====

   Status: WORKING 
   Notes:  This Section formats the parent folder for when a child folder contains new/unread messages. 
           I have them both set to the same settings, so whether expanded or collapsed, it shows the same.

/* ================================================================================================================ */

       #folderTree > treechildren::-moz-tree-cell-text(folderNameCol, closed, subfoldersHaveUnreadMessages-true),
       #folderTree > treechildren::-moz-tree-cell-text(folderNameCol, closed, subfoldersHaveUnreadMessages-true, selected)        
       {
           color: yellow !important;
           font-weight: normal !important;
           font-style: italic !important;
       }

/* ===== ACCOUNT LEVEL FOLDER =====

   Status: WORKING 
   Notes:  This Section formats the account level folder to skyblue and normal weight (ie. myemail@domain.com).
           The icon color is red, but is set below in the FOLDER ICON Settings

/* ================================================================================================================ */

       treechildren::-moz-tree-cell-text(folderNameCol, isServer-true) 
       {
           color: skyblue !important; 
           font-weight: normal !important; 
       }

/* ===== FOLDER ICON SETTINGS ===== */

        /* THIS MUST BE THE FIRST ICON SETTING - IF YOU PLACE IT LAST, IT WILL OVERRIDE ALL OTHER ICON Settings */
        /* Remaining Folders - all other folders - not special folders - */
       treechildren::-moz-tree-image(folderNameCol){
         fill: yellow !important;
       }
       /* THE ABOVE MUST BE THE FIRST ICON SETTING - IF YOU PLACE IT LAST, IT WILL OVERRIDE ALL OTHER ICON Settings */  
       /* ==================================================== */
       
       /* Account Level Icon - Red (this only changes icon for the mail account icon) */
       treechildren::-moz-tree-image(folderNameCol, isServer-true) {
         fill: #ff0000 !important;
       }
       /* ..... Inbox - White ..... */
       .tabmail-tab[type="folder"][SpecialFolder="Inbox"],
       treechildren::-moz-tree-image(folderNameCol, specialFolder-Inbox) {
         fill: white !important;
       }
       /* ..... Sent - light blue ..... */
       .tabmail-tab[type="folder"][SpecialFolder="Sent"],
       treechildren::-moz-tree-image(folderNameCol, specialFolder-Sent) {
         /* fill: #91CBF7 !important; */
          fill: skyblue !important;
         
       }
       
       /* ..... Trash - Silver ..... */
       .tabmail-tab[type="folder"][SpecialFolder="Trash"],
       treechildren::-moz-tree-image(folderNameCol, specialFolder-Trash) {
         fill: Silver !important;
       }
       
       /* ..... Drafts - Gray..... */
       .tabmail-tab[type="folder"][SpecialFolder="Drafts"],
       treechildren::-moz-tree-image(folderNameCol, specialFolder-Drafts) {
         fill: gray !important;
       }
       
       /* ..... Outbox - green..... */
       .tabmail-tab[type="folder"][SpecialFolder="Outbox"],
       treechildren::-moz-tree-image(folderNameCol, specialFolder-Outbox) {
         fill: #33cc33 !important;
       }
       /* ..... Archives / All Mail - gold ..... */
       .tabmail-tab[type="folder"][SpecialFolder="Archive"],
       treechildren::-moz-tree-image(folderNameCol, specialFolder-Archive) {
         fill: gold !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;
       }
       /* ..... Saved Search Folder - Pink ..... */
       .tabmail-tab[type="folder"][SpecialFolder="Virtual"],
       treechildren::-moz-tree-image(folderNameCol, specialFolder-Virtual) {
         fill: Pink !important;
       }

Helpful?

Ask a question

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.