Tweaking Firefox tab colors, part 2 (The Firefox 4 edition)
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;
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 */
tab[image*="-dev.net"]
{
-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 */
tab[image*="-dev.net"]:hover
{
background-image: -moz-linear-gradient(bottom,rgba(10%,10%,10%,.4) 1px,transparent 1px),
-moz-linear-gradient(#bfe8bf,#a6dfa6) !important;
}
/* Localhost active colors */
tab[image*="-dev.net"][selected="true"]
{
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:
May 30th, 2011 at 7:45 am
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?
May 31st, 2011 at 9:08 am
bkanuka,
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.