Highlight the active tab in Firefox

By Percy Cabello

Active tab colorIf you want the active tab to stand out in your current tab set, edit your userChrome.css file located in your profile folder and add the following lines:

.tabbrowser-tab[selected="true"] > hbox,
.tabbrowser-tab[selected="true"] > .tab-close-button {
background-color: #000088 !important;
color: #fff !important;
}
.tabbrowser-tab[selected="true"]:hover > hbox,
.tabbrowser-tab[selected="true"]:hover > .tab-close-button {
background-color: #0000BB !important;
color: #fff !important;
}

The code above will turn the active tab blue, but you can set it to your favorite color by editting the background-color value in lines 3 and 8 to some other hexadecimal value you can get here.

Via Terminally Incoherent

Posted on March 24, 2007 - 12:46 am || More on Firefox, Tips

Comments

Egídio Leitão

March 24, 2007 12:46 am

I have not had problems with changes to my userChrome.css file before. However, adding the code mentioned in this tip has not changed the look of my browser tabs. I thought it could be because of the theme I had chosen. So, I went back to the original FF theme. After several restarts, the tabs still do not show a different color. What could possibly be wrong?

Reply

Egídio Leitão

March 24, 2007 12:46 am

Just a quick follow-up to my previous note. I finally got this tip to work after trying it on a 3rd theme. It wouldn’t work on the default FF theme, but it does work on iFox.

Reply

Devon Young

March 24, 2007 12:46 am

Which just begs the question….why don’t they make it easy to change in the preferences? It’s a very user friendly feature.

Reply

Percy Cabello

March 24, 2007 12:46 am

Egídio, good to know if finally worked for you. I’m using the default theme and had no problem at all. Try deleting everything else from userChrome.css (after macing a backup copy) to discard a conflict with some other customization.

Reply

jp

March 25, 2007 12:46 am

Does not work here with the default theme (the only one I have installed) either. Running FF 2.0.0.2 under Linux.

Reply

Matt

March 26, 2007 12:46 am

I’m having trouble getting this to work with the default theme, too. Firefox 2.0.0.3 on XP in my case.

Reply

Paulo Raponi

March 28, 2007 12:46 am

If don’t work, it is because of the copy & paste…
Attention with the quotation marks that the wordpress places in the code. ” for him is ´´

regards,

Paulo

Reply

site ekle

August 16, 2007 12:46 am

im have the same problem i cant choose

“I’m having trouble getting this to work with the default theme, too. Firefox 2.0.0.3 on XP in my case.

Reply

Jonathan Aquino

August 19, 2007 12:46 am

The problem is that the code shown above has funny quotation marks (probably inserted by the blogging software). Use normal double-quotes and they will work:

.tabbrowser-tab[selected="true"] > hbox,
.tabbrowser-tab[selected="true"] > .tab-close-button {
background-color: #000088 !important;
color: #fff !important;
}

.tabbrowser-tab[selected="true"]:hover > hbox,
.tabbrowser-tab[selected="true"]:hover > .tab-close-button {
background-color: #0000BB !important;
color: #fff !important;
}

Reply

Jonathan Aquino

August 19, 2007 12:46 am

Ah shoot, it converted the double-quotes again. Anyway, make them normal double-quotes and it will work.

Reply

Reik Red

May 31, 2008 12:46 am

It should be pointed out that the above solution to active tab highlighting does not necessarily work in linux/X11. At least it does not work in my case where I use a focus-follows-mouse type behavior instead of click-to-focus type behavior. Tthe active tab highlights blue only when I pass the mouse pointer over the tab. Hence the solution is ok for Windows XP et al, but may not be for linux/X11.

I should also mention that in Win XP, I get the active tab highlighted already without doing any hack whereas in linux/X11 I do not. (I’m using firefox 2.0.0.14, this may not be significant). The tab highlight out-of-the-box may be due to a different choice of background colors, I do not know with certainty.

Reply

Andrei

August 14, 2008 12:46 am

I found the following to work for me (Ubuntu 8.04, Firefox 3.0.1, Theme=Redmond):

@namespace url(“http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”);

tab{ -moz-appearance: none !important; }

tab[selected="true"] {
background-color: #AACCFF !important; /* light blue */
color: #000 !important; /* black */
}

tab:hover {
background-color: #FFFFCC !important; /* light yellow */
color: #000 !important; /* black */
}

Reply

JorgeOctober 23rd, 2008 at 8:10 pm

Thank you very much Andrei. It worked for mi too (kubuntu 8.04 64bits with Firefox 3.03)
Regards

Reply

JeffFebruary 27th, 2009 at 2:38 pm

Andrei, Thanks. This worked for me only if I put it in the following folder for Firefox 3

C:\Documents and Settings\USER\Application Data\Mozilla\Firefox\Profiles\XYZ.default\chrome

Reply

Leave Comment