![Thunderbird logo](https://assets-prod.sumo.prod.webservices.mozgcp.net/media/uploads/products/2024-02-12-07-36-53-599028_1.png)
Can I change the background colour of unread messages in list?
If I mark a message as Unread, it appears in the list of messages in boldface type. But I am finding it very hard to distinguish those in bold from other messages that have been read and are not bold. Is there anything in advanced settings that would allow me to change the fill colour in the listing box, or perhaps the colour of the type, in order to distinguish unread messages more visibly from those I have read? Thanks!
தீர்வு தேர்ந்தெடுக்கப்பட்டது
You have two options: 1. You can increase the font size generally in Thread Pane, Folder Pane, menus etc by doing this:
- Click on the 'Menu app icon' it has 3 horizontal lines and is located on the 'Unified Toolbar' - far right.
The default size is usually 12px
- Font Size: - click on the + icon to increase the current size
- click on that + icon until you have a better readible size.
2. To change the background colour instead of font colour, it is a simple change in the code. You must Exit Thunderbird before altering the code.
This is the line you need to change:
color: #2492d1 !important;
It needs to say:
background-color: #2492d1 !important;
Then save file and start Thunderbird.
Read this answer in context 👍 0All Replies (10)
You could change the colour of unread mail, but it requires some customisation. Some people feel a bit daunted when they need to go into areas of Thunderbird that they would not normally do. However, the following is not as difficult as first imagined because it only requires this skillset:
- Ability to follow instructions
- Ability to create a folder
- Ability to copy and paste text
- Ability to save a file
You do not need to actually know how to code because I'm supplying all the code and full instructions.
First: Please check in Thunderbird to see if a setting needs switching on. - see attached image as guide.
- Settings > General
- Scroll to bottom and click on 'Config Editor' button
- In search type : legacy
- look for this line: toolkit.legacyUserProfileCustomizations.stylesheets
- If it is set as 'false' :
- click on the far right arrow type icon to toggle from 'false' to say 'TRUE'
Now Do this: In Thunderbird
- Help > Troubleshooting Information
- in 'Application Basics' - Profile Folders - click on 'Open Folder'
A new window opens showing the contents of your profile name folder.
- Exit Thunderbird now. This is important.
I'm going to give the full instructions because I do not know if people already know how to create and use a userChrome.css file.
- In the 'profile name ' folder create a new folder and call it 'chrome'. The spelling is important - note it is all lower case. - see attached image as guide.
- Then open a simple text editor program such as 'Notepad'.
- Copy all the text between the lines below and paste it into 'Notepad'.
@import url("chrome://messenger/content/unifiedtoolbar/unifiedToolbarWebextensions.css"); /* Set colour of unread in thread pane/message list */ #threadTree tbody [data-properties~="unread"] { color: #2492d1 !important; }
Note: the code uses the colour blue - this is the hex code: #2492d1 But you can choose whatever colour you prefer. This link may help you choose a colour and locate the hex code number. The hex code always starts with a hash key.
- Save the file as 'userChrome.css' - note the spelling of this is important - all lower case except the C.
- Save it in the 'chrome' folder. - see attached image as guide.
Check that file really is called 'userChrome.css' and not 'userChrome.css.txt' - it has to be saved as a Cascading Style Sheet (css) and not a text document. - see attached image as guide. So if you see 'userChrome.css.txt' - no problem - just rename it by removing the .txt - you will get asked are you sure as it may effect things - just say yes because you really do want to do it.
Start Thunderbird
Hi Toad-hall: Thanks so much for such a comprehensive reply, and for sharing your deep expertise. I did what you so carefully described, but nothing happened! I made one mistake and perhaps you can tell me if it was fatal. When you said "Exit Thunderbird now. This is important" I closed the Thunderbird window, but I did not quit the program. I now realise when you said Exit, this is what you meant. So I have the folder in my profile and the userChrome.css file saved in it. But by leaving Thunderbird open I may have failed to link it to the program. Is there a short cut now to making it work, or should I start over and move the folder to trash? Thanks for all your help. Clive
The reason for locating the profile name folder first and then completely closing/exiting Thunderbird is because you cannot update any folders or files that are in use.
But if everything is in the correct location then it should be working. So let's find out what is going on. It would be helpful if you could post some images so I can see exactly what you've got.
Post/upload images of the following - they need to look like the images I posted.
1. Post an image showing where you saved the 'chrome' folder. 2. Post an image showing the contents of that 'chrome' folder - make sure you have the 'details view' showing as I need to see these column headers: name, modified date, type, file size. You also need to make sure the option to show extensions is selected. 3. Open the 'userChrome.css' file using Notepad and post an image of it's contents, so I can check all the necessary code was correctly copied. 4. Post an image showing the 'Config Editor' setting 'toolkit.legacyUserProfileCustomizations.stylesheets'
I hope these cover everything you've asked for!
First image:
The 'chrome' folder is in the folder called 'Profiles' - this is incorrect. As indicated in the images I supplied, the 'chrome' folder should be in the actual 'profile name' folder which should have opened automatically to display contents when you followed these instructions:
Previously I said:
In Thunderbird Help > Troubleshooting Information in 'Application Basics' - Profile Folders - click on 'Open Folder'
But I notice you are using a MAC OS - this effects the instructions. Please note in this forum we always assume the user is using a Windows OS as it is the most popular. So we rely on the user - you - telling us if you are using a MAC or Linux OS. That means the 'Open Folder' may say 'Show in Finder' instead.
In Thunderbird
- Help > Troubleshooting Information
- Under 'Application Basics' section - half way is 'Profile Folders' - click on 'Show in Finder'
Make sure Thunderbird has been exited - completely closed. Then move that 'chrome' folder into the 'profile name' folder which you are currently using - perhas it's called 'sy8519es.default-release'.
Then please check the 'userChrome.css' filename because in your MaC image it says it's 'Kind' = 'Text Document'.
The .css stands for Cascading Style Sheets not text.
You may need to make sure all extensions are being displayed in order to check this because it's possible you have named that file as 'userChrome.css.txt' and the computer is hiding the .txt bit.
Then restart Thunderbird.
REstart Thunderbird and see if it works.
Hi toad-hall: Apologies for not following your instructions exactly. As you say, it's slightly different on a Mac. However, apart from the position of the chrome folder, everything else seems right. I have put it in the sy8519es.default-release folder and restarted, but nothing has changed. As far as the .css suffix is concerned, I'm baffled. I created the text file in TextEdit, the Mac equivalent of Notepad I believe, and then saved it as userChrome.css. It automatically added .txt, so I removed the extra suffix, and it asked me if I was sure I wanted to rename it .css, to which I said yes. When I look at the information on the file (screenshot attached), it still says it is a text file, but it is also a Firefox file and shows not other extension but .css. How do I change it from what it is to a "genuine" .css file, if that's the issue? Thanks.
Ok, some success! I did a bit of research on CSS Basics and found that in TextEdit you have to set it to Plain Text. I went back and put the code you had given me into a new TextEdit doc and put this in chromeUser.css, and hey presto, it works! - sorta. What I had asked was whether I could change the background to a colour for unread messages. This has changed the colour of the type, and I still find it hard to distinguish between read and unread messages. My eye simply doesn't pick up the type colour any better than it did the boldface font, (which is partly because the size of font used in the message list is smaller than I would like). But now we have got the process sorted out, is there a different command I can put in the userChrome doc to change the fill colour rather than that of the type? If not, can I change the font size in the message list to make it bigger? Thanks again for all your help.
தீர்வு தேர்ந்தெடுக்கப்பட்டது
You have two options: 1. You can increase the font size generally in Thread Pane, Folder Pane, menus etc by doing this:
- Click on the 'Menu app icon' it has 3 horizontal lines and is located on the 'Unified Toolbar' - far right.
The default size is usually 12px
- Font Size: - click on the + icon to increase the current size
- click on that + icon until you have a better readible size.
2. To change the background colour instead of font colour, it is a simple change in the code. You must Exit Thunderbird before altering the code.
This is the line you need to change:
color: #2492d1 !important;
It needs to say:
background-color: #2492d1 !important;
Then save file and start Thunderbird.
Worked! Thank you!!
Here is some css that sets the background colours of the container and text for read, unread and selected messages:
/* message list container colours */ #threadTree tr[data-properties~="unread"] {background-color:pink !important; color: red !important; } #threadTree tr[data-properties~="read"] {background-color:lightgreen !important; color: navy !important; } #threadTree tr[data-properties~="unread"].selected {background-color:lightgrey !important; color: black !important; } #threadTree tr[data-properties~="read"].selected {background-color:lightgrey !important; color: black !important; }