The 'Fox meet the Cleansing Fire

March 22, 2011 8:01 PM

Where can I find an exhaustive list of possible userChrome.css selectors for Firefox (especially FF4)?

I'm looking for an essential cheat sheet like w3schools' CSS reference, something that lists every single customizable class and pseudo-class, and every type of possible value for each. So far I've only been able to find code snippets to accomplish certain things, but nothing comprehensive. Help me unleash my browser's full potential! I just upgraded to the FF4 pre-release, so if anything's new (or deprecated) in that version, it'd be nice if the reference reflected that.

posted by The Winsome Parker Lewis to Computers & Internet (3 answers total)

For userChrome.css, the Firefox source code is basically your reference manual. The classes and pseudoclasses used in userChrome.css aren't defined in any kind of web standard; they are just the same hooks that are used to build themes for the browser UI itself. If you want to customize something special, you might need to hunt around a bit, but here are some tips to point you in the right direction:

Method 1 - look through the default theme's CSS files and override anything you want to change. To do so, find the omni.jar file bundled inside Firefox 4 (not sure what OS you are on, but I can help you find it if you tell me) and unzip it (you may well need a different decompression tool as described in that link). Look inside the unzipped archive for the directories chrome/browser/skin and chrome/toolkit/skin. Inside are the CSS files that you're overriding when you edit userChrome.css. Find a selector of interest and have at it.

Method 2 - use the DOM inspector to poke around inside the running browser. Install the DOM Inspector extension. The guide to the DOM Inspector is useful, but I'll give you the basic idea. Fire up DOMi from the Tools menu and choose File->Inspect Chrome Document->[the title of your current browser window]. On the left side of the window, you'll see a big tree representation of the XML document that defines the browser's UI. The right side shows details for the currently selected element. The selected element will also be highlighted in the browser window with a red border.

To find the kind information you're looking for, first click on the little magnifying glass-like icon in the top portion of the DOMi window, and then click on the part of the browser you want to style (e.g. the back button). This will automatically select the element you clicked in the inspector. Then open the viewer selection menu and choose "CSS Rules." Now you'll see a list of all the CSS rules that apply to the selected part of the browser. You can try out changes right in the inspector by right clicking on them and using the options in the context menu. Once you're happy with a customization, you can add the selector you just built to your userChrome.css file to save it, as the DOM Inspector only makes temporary changes.

Instead of the DOM Inspector, you can also try Chromebug, which has similar functionality and different UI that you may prefer. I've never used it, but this tool could help speed your development cycle up if you're making a lot of tweaks. The MozillaZine Theme Development Forum is also a good resource for help and code snippets, especially this massive thread of userChrome.css and userContent.css ideas (be careful, the early ones are six years old and likely won't behave as expected in Firefox 4).

And once you've really got something cool going, you can package the whole thing up as a Firefox Theme for others to use. I'm no expert on this stuff, but feel free to let me know if you run into any trouble. The #themedev channel on irc.mozilla.org would likely be a great place to go for realtime help.

Whew; that's a big brain dump. By all means let me know if something in there is confusing or wrong or I've left something out and perhaps I'll remember to post this on a wiki or blog somewhere. In the meantime, happy customizing!
posted by zachlipton at 12:33 AM on March 23, 2011

Thank you! I'm a little sad that there's no well-formatted documentation... something as flexible as this could really use a manual! I'll definitely dig into your links though.
posted by The Winsome Parker Lewis at 7:29 AM on March 23, 2011

You could try the Mozilla CSS Extensions page on MDC. Not much actual documentation, but there's a lot of different stuff listed if you're prepared to experiment.
posted by robertc at 6:01 PM on March 23, 2011