2009-03-29

Firefox Gyan: How To Make Your Unread Tabs Easily Noticeable

by Anoop Engineer 6 comments




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:

1

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:

2

 

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.

3

 

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:

4

 

Basically, if you know a bit of CSS, you can tweak the userChrome.css file to your heart’s content. Get hacking.

Comments 6 comments
atoztoa said...

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

Julio said...

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

julio said...

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)

Julio said...

The tabs remain italic or bold or font colores even if they were selected.

any help ...

julio said...

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 ...

Sea Dweller replica watches said...

Your post is really informative for me. I liked it very much.
Keep sharing such important posts..

Post a Comment

Subscribe feeds via e-mail
Subscribe in your preferred RSS reader

Advertise on this site Sponsored links

Subscribe feeds rss Recent Entries

Categories

Subscribe feed rss Popular posts

Subscribe comments rss Recent Comments

Technorati

Technorati
My authority on technorati
Add this blog to your faves