{"id":715,"date":"2011-03-31T08:35:41","date_gmt":"2011-03-31T14:35:41","guid":{"rendered":"http:\/\/www.curtisgibby.com\/blog\/?p=715"},"modified":"2016-05-11T06:43:51","modified_gmt":"2016-05-11T12:43:51","slug":"tweaking-firefox-tab-colors-part-2-the-firefox-4-edition","status":"publish","type":"post","link":"https:\/\/www.curtisgibby.com\/blog\/2011\/03\/tweaking-firefox-tab-colors-part-2-the-firefox-4-edition\/","title":{"rendered":"Tweaking Firefox tab colors, part 2 (The Firefox 4 edition)"},"content":{"rendered":"

\"Colored<\/a>
\nJust when I got used to my new tab colors described in my previous post<\/a>, Firefox 4 was released and broke what I’d done.\u00a0 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.\u00a0 But most of the tab was the default chrome — nice-looking, but not what I wanted.
\nSo 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.\u00a0 I downloaded Tab Mix Plus<\/a>, which did work in Firefox 4, and reverse-engineered the CSS that it added to the page.\u00a0 I found that it was adding a background-image to the tab’s CSS, like this:<\/p>\n

background-image: -moz-linear-gradient(bottom,rgba(10%,10%,10%,.4) 1px,transparent 1px), -moz-linear-gradient(#a6dfa6,#8dd68d) !important;<\/pre>\n
<\/p>\n
\"Much<\/a>
\nI added that to the relevant section of my userChrome.css, restarted Firefox, and presto! My tab was colored the way that it should be.
\nThen I realized that FF4’s chrome had inactive and hover states that were much more pronounced than before, much darker than an active tab.\u00a0 And unlike my previous solution, Firefox didn’t automatically convert this into those hover and active states.
\nSo 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.\u00a0 This is what I ended up with:<\/p>\n
\/* Localhost colors *\/\r\ntab[image*=\"-dev.net\"]\r\n{\r\n -moz-appearance: none;\r\n background-color:#d8f1d8 !important; \/* what we had before -- the tiny little strip at the top *\/\r\n background-image: -moz-linear-gradient(bottom,rgba(10%,10%,10%,.4) 1px,transparent 1px), \/* the line on the bottom *\/\r\n -moz-linear-gradient(#a6dfa6,#8dd68d) !important; \/* the main color we're adding *\/\r\n}\r\n\r\n\/* Localhost hover colors *\/\r\ntab[image*=\"-dev.net\"]:hover\r\n{\r\n background-image: -moz-linear-gradient(bottom,rgba(10%,10%,10%,.4) 1px,transparent 1px),\r\n -moz-linear-gradient(#bfe8bf,#a6dfa6) !important;\r\n}\r\n\r\n\/*\u00a0 Localhost active colors *\/\r\ntab[image*=\"-dev.net\"][selected=\"true\"]\r\n{\r\n background-image: -moz-linear-gradient(#d8f1d8,#bfe8bf) !important; \/* no line on the bottom here, since it's the active one *\/\r\n}<\/pre>\n
(Of course, repeated for each of my color groups.)
\nThis is what the “live” red group looks like:<\/p>\n
\"L:<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
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.\u00a0 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.\u00a0 But most of the tab was… Continue reading Tweaking Firefox tab colors, part 2 (The Firefox 4 edition)<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[102,123,131,156,125,124],"class_list":["post-715","post","type-post","status-publish","format-standard","hentry","category-programming","tag-css","tag-firefox","tag-firefox4","tag-programming","tag-tweaks","tag-userchrome-css","entry"],"_links":{"self":[{"href":"https:\/\/www.curtisgibby.com\/blog\/wp-json\/wp\/v2\/posts\/715","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.curtisgibby.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.curtisgibby.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.curtisgibby.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.curtisgibby.com\/blog\/wp-json\/wp\/v2\/comments?post=715"}],"version-history":[{"count":6,"href":"https:\/\/www.curtisgibby.com\/blog\/wp-json\/wp\/v2\/posts\/715\/revisions"}],"predecessor-version":[{"id":817,"href":"https:\/\/www.curtisgibby.com\/blog\/wp-json\/wp\/v2\/posts\/715\/revisions\/817"}],"wp:attachment":[{"href":"https:\/\/www.curtisgibby.com\/blog\/wp-json\/wp\/v2\/media?parent=715"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.curtisgibby.com\/blog\/wp-json\/wp\/v2\/categories?post=715"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.curtisgibby.com\/blog\/wp-json\/wp\/v2\/tags?post=715"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}