We often find ourselves opening a lot of tabs in Firefox using mouse wheel click on the links and then quite soon forget about the opened links. So when Mozilla Links blog posted about a method to quickly find unread tabs in Firefox, we immediately jumped at it.
The Mozilla Links blog tells you how to change the title font in an unread tab to italics. But we found that a simple change in font didn’t quite make any difference to us. So we decided to extend that method and incrementally make minor changes and observe how much easily it caught the eyes. The results are quite outstanding.
First, let’s discuss the original Mozilla Links method:
1. Change the Unread Tab Title Font to Italics.
Find the userChrome.css file in the chrome folder in your Firefox profile directory. If there is no userChrome.css file present in the chrome folder, copy userChrome-example.css and place in the same folder as userChrome.css.
Now add the following line to the end of the file:
#content tab:not([selected]) {font-style: italic !important;}
and restart Firefox. Your change will look like this:
Well, no much difference isn’t it? Let’s see how it will look if the title font is made bold instead of italics.
2. Make the Unread Tab Title Font Bold
Edit the above line and make it:
#content tab:not([selected]) {font-weight: bold !important;}
This is how it’s going to look:
3. Change the Unread Tab Title Font Color
Let’s see how much difference can changing the font color make. Change the above line in userChrome.css to:
#content tab:not([selected]) {font-weight: bold !important;color:red !important;}
Ok, now that’s a noticeable difference.
4. Change the Background Color of an Unread Tab
Let’s change the background color of an unread tab and see how it looks. Let’s also change the title font to Helvetica.
#content tab:not([selected]) {font-weight: bold !important;color:red !important;background-color: #80FF6C !important;font-family: helvetica !important;}
and we get a great result:
Basically, if you know a bit of CSS, you can tweak the userChrome.css file to your heart’s content. Get hacking.








Hi Anoop
Highlighting 'Unread' tabs feature is already built into Tab Mix Plus FF addon... :) But you will need to install it... but I think it is a handy addon...
Read about Tab Mix Plus... http://www.atoztoa.com/2008/07/10-firefox-addons-i-love.html
_ATOzTOA
www.atoztoa.com
it's a really cool tutorial ...
as atoztoa said, this esture is already build into tab mix plus FF, but alon to this feature there is a lot more ...
it was very interesting to learn to do it this way ... thak you very much ...
I used a addon namen colored unread tabs ... but it's not compatible to the last version of firefox, so this tutorial works great ...
once again ... thank you very much ...
grettings from Chile
sorry ... I forgot something ... just one question ... this will work on linux ??? ... on ubuntu ???
I'd just need to find the Firefox profile directory ... right ???
hope so ...
(julio.bello@ingenieros.com)
The tabs remain italic or bold or font colores even if they were selected.
any help ...
solved ...
#content tab:not([visited]) {font-style: italic !important;}
#content tab:not[visisted="true"] {font-style: italic !important;}
#content tab:not([visited]) {font-weight: bold !important;}
#content tab:not[visited="true"] {font-weight: bold !important;}
#content tab:not([visited]) {font-weight: bold !important;color:red !important;}
#content tab:not([visited="true"]) {font-weight: bold !important;color:red !important;}
#content tab:not([visited]) {background-color: #80FF6C !important}
#content tab:not([visited="true"]) {background-color: #80FF6C !important}
thanks ...
Your post is really informative for me. I liked it very much.
Keep sharing such important posts..
Post a Comment