Firefox Gyan: How To Make Your Unread Tabs Easily Noticeable

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.