Highlight the active tab in Firefox
If 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.
Comments
EgÃdio Leitão
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.
Devon Young
Which just begs the question….why don’t they make it easy to change in the preferences? It’s a very user friendly feature.
Percy Cabello
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.
jp
Does not work here with the default theme (the only one I have installed) either. Running FF 2.0.0.2 under Linux.
Matt
I’m having trouble getting this to work with the default theme, too. Firefox 2.0.0.3 on XP in my case.
Paulo Raponi
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
Jonathan Aquino
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;
}
Jonathan Aquino
Ah shoot, it converted the double-quotes again. Anyway, make them normal double-quotes and it will work.
Reik Red
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.
Andrei
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 */
}
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
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
EgÃdio Leitão
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