Tweaking Firefox tab colors, part 2 (The Firefox 4 edition)

Colored tabs in Firefox 4 - not very colored anymore
Just when I got used to my new tab colors described in my previous post, Firefox 4 was released and broke what I’d done.  I could still see a teeny difference between my green, yellow, and red tabs — a 2-pixel strip at the top of each of them.  But most of the tab was the default chrome — nice-looking, but not what I wanted.
So I started looking for a solution that would let me change the whole tab’s color in FF4, not just the top of the tab.  I downloaded Tab Mix Plus, which did work in Firefox 4, and reverse-engineered the CSS that it added to the page.  I found that it was adding a background-image to the tab’s CSS, like this:

background-image: -moz-linear-gradient(bottom,rgba(10%,10%,10%,.4) 1px,transparent 1px), -moz-linear-gradient(#a6dfa6,#8dd68d) !important;

Much better!
I added that to the relevant section of my userChrome.css, restarted Firefox, and presto! My tab was colored the way that it should be.
Then I realized that FF4’s chrome had inactive and hover states that were much more pronounced than before, much darker than an active tab.  And unlike my previous solution, Firefox didn’t automatically convert this into those hover and active states.
So I had to go back and add plain old CSS :hover and [selected=”true”] rules to each of my colors, making the inactive tab the darkest, the hover, slightly lighter, and the active the lightest.  This is what I ended up with:

/* Localhost colors */
 -moz-appearance: none;
 background-color:#d8f1d8 !important; /* what we had before -- the tiny little strip at the top */
 background-image: -moz-linear-gradient(bottom,rgba(10%,10%,10%,.4) 1px,transparent 1px), /* the line on the bottom */
 -moz-linear-gradient(#a6dfa6,#8dd68d) !important; /* the main color we're adding */

/* Localhost hover colors */
 background-image: -moz-linear-gradient(bottom,rgba(10%,10%,10%,.4) 1px,transparent 1px),
 -moz-linear-gradient(#bfe8bf,#a6dfa6) !important;

/*  Localhost active colors */
 background-image: -moz-linear-gradient(#d8f1d8,#bfe8bf) !important; /* no line on the bottom here, since it's the active one */

(Of course, repeated for each of my color groups.)
This is what the “live” red group looks like:

L: Inactive, C: Active, R: Hover

This entry was posted on Thursday, March 31st, 2011 at 8:35 am and is filed under Programming. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

2 Responses to “Tweaking Firefox tab colors, part 2 (The Firefox 4 edition)”

  1. bkanukaNo Gravatar Says:

    I too can figure out how to do something in Tab Mix Plus, but not CSS. How did you figure out what TMP was adding to to the tabs CSS?

  2. Curtis GibbyNo Gravatar Says:


    I found out that Firefox extension files (.xpi) are just renamed .zip files. So I downloaded TMP, unzipped it, and looked through all of its files. I finally found what I was looking for in the chrome folder’s tabmixplus.jar (which was itself a renamed .zip file that I had to extract).

    In the unzipped .jar files content/tab/tab.js, there’s a function called createColorRules. At about line 997, I found the CSS rules that I pulled out for my own purposes.

Leave a Reply