{"id":675,"date":"2010-12-16T10:54:41","date_gmt":"2010-12-16T17:54:41","guid":{"rendered":"http:\/\/www.curtisgibby.com\/blog\/?p=675"},"modified":"2016-05-11T06:45:36","modified_gmt":"2016-05-11T12:45:36","slug":"different-tab-colors-for-different-contexts","status":"publish","type":"post","link":"https:\/\/www.curtisgibby.com\/blog\/2010\/12\/different-tab-colors-for-different-contexts\/","title":{"rendered":"Different tab colors for different contexts"},"content":{"rendered":"

I love Firefox.\u00a0 Love love love it, especially because I can tweak many things about it to make things work just the way I want.\u00a0 (Like creating Greasemonkey scripts<\/a> to make other peoples’ websites do my<\/em> bidding.\u00a0 Or syncing not only my bookmarks and passwords between computers, but also my Stylish userstyles<\/a>.)\u00a0 Google Chrome<\/a> may be zippier, but until I can run AdBlock Plus<\/a>, All-in-One Gestures<\/a>, Colorzilla<\/a>, Firebug<\/a>, FireShot<\/a>, Firefox Sync<\/a>, Greasemonkey<\/a>, Open With<\/a>, Stylish<\/a>, and Update Notifier<\/a> in it, I’m sticking with Firefox.<\/p>\n

Anyway, the point here is that I wanted to have my Firefox tabs for different environments show up as different colors in my browser.\u00a0 As a web developer, I spend a lot of time in a localhost development server, on a staging dev server, and on a live web site.\u00a0 I may have ten tabs open, each of which could be from any of my environments, and each of which may look identical until you click into it to see the actual URL.\u00a0 So I spent a lot of time clicking back and forth between them trying to find the other page I’d been working on.\u00a0 I wanted a quick visual representation to show which of those environments I was in.<\/p>\n

<\/p>\n

If you’ve never heard of userChrome.css, you can use it to change a lot of stuff that you don’t like about the “chrome” (or the look of the browser window itself — completely unrelated to the browser Google Chrome).\u00a0 You add some CSS to the file (which in Windows is found in %appdata%\/Mozilla\/Firefox\/Profiles\/<profile-id>\/chrome ), then save it and restart Firefox, and voil\u00e0, some change has been made to your chrome.<\/p>\n

I found a Stylish forum that asked about my very question<\/a>: can you customize the color or other style of the tab based on the domain of the URL?\u00a0 Fortunately, the answer was yes.\u00a0 What you have to do is write a CSS selector based on the favicon in the tab window.\u00a0 (So if a site doesn’t have a favicon, this hack won’t work.\u00a0 Fortunately, all of the ones I wanted to style do have a favicon, and most other sites on the web do too.)\u00a0 The basic CSS selector looks like this:<\/p>\n

tab[image*=\"example.com\"] {background:red !important;}<\/pre>\n
That means, “For every tab that has a favicon whose url includes the text ‘example.com’, give it a background-color of red.”\u00a0 In my case, I wanted my localhost to show light green, the staging server to show light yellow, and the live server to show light red.\u00a0 This is the css that I came up with:<\/p>\n
tab[image*=\"localhost\"] {background-color:#CBEDCB !important;} \/* light green *\/\r\ntab[image*=\"dev.mycompany.com\"] {background-color:#EDEDCB !important;} \/* light yellow *\/\r\ntab[image*=\"live.mycompany.com\"] {background-color:#EDCBCE !important;} \/* light red *\/\r\n<\/pre>\n
\"\"<\/a>
\nThis worked perfectly for me — now I can easily distinguish between all of my development environments.\u00a0 Firefox even makes the active tab a brighter version of the same background color (or is it, “Firefox dims the non-active tabs”?\u00a0 That seems more likely.), so you don’t have to specify a style to tell which tab is the active one.<\/p>\n
I’d be interested to know if there’s a way to accomplish the same thing  in other major browsers, but this is how I did it in Firefox.<\/p>\n","protected":false},"excerpt":{"rendered":"
As a web developer, I may have ten tabs open, each of which could be from any of my environments, and each of which may look identical until you click into it to see the actual URL.  So I spent a lot of time clicking back and forth between them trying to find the other page I’d been working on, until I found out how to change the tab color based on which domain it was on.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[30,3],"tags":[102,123,156,125,124],"class_list":["post-675","post","type-post","status-publish","format-standard","hentry","category-cool-web-stuff","category-programming","tag-css","tag-firefox","tag-programming","tag-tweaks","tag-userchrome-css","entry"],"_links":{"self":[{"href":"https:\/\/www.curtisgibby.com\/blog\/wp-json\/wp\/v2\/posts\/675","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=675"}],"version-history":[{"count":9,"href":"https:\/\/www.curtisgibby.com\/blog\/wp-json\/wp\/v2\/posts\/675\/revisions"}],"predecessor-version":[{"id":820,"href":"https:\/\/www.curtisgibby.com\/blog\/wp-json\/wp\/v2\/posts\/675\/revisions\/820"}],"wp:attachment":[{"href":"https:\/\/www.curtisgibby.com\/blog\/wp-json\/wp\/v2\/media?parent=675"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.curtisgibby.com\/blog\/wp-json\/wp\/v2\/categories?post=675"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.curtisgibby.com\/blog\/wp-json\/wp\/v2\/tags?post=675"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}