Make Firefox look spiffier with userChrome.css
Software
Firefox may still be the best browser to use for its security and privacy extensions, but if you have Chrome or Safari user interface envy you can use the userChrome.css file to pare down the UI to something a bit more spiffy.
The userChrome.css file
The first step is to access the chrome folder in your Firefox profile folder. If you don't know where yours is, Henrik Gemal has a great page listing the different profile folder locations for Mac, *nix and Windows.
In the chrome folder there's a userChrome-example.css file. Copy it and rename it to userChrome.css. This is the file we'll be editing in a plain text editor to tweak the Firefox UI.
Editing the file
When you open the file you'll notice a bunch of commented lines which you can change if you like, and a @namespace declaration which is mandatory. Personally, I just leave everything in the file alone and start adding my own statements at the end.
This is what I have in my file. My miopic short sightedness means I can define a smaller UI font to save space on toolbars:
/* make primary UI font more compact */
*
{
font-size:10px !important;
}
I'm a huge fan of Safari's merged reload/stop button; it makes sense not having both because pages don't ever need to simultaneously reloaded and stopped. The only caveat is the stop button must be placed before the reload button on the toolbar before trying this.
/* merge stop and reload buttons
stop must be placed before reload to work */
#stop-button[disabled="true"],
#stop-button:not([disabled]) + #reload-button
{
display:none !important;
}
Now it just comes down to hiding things I really don't need. It may seem silly hiding lots of little things, but they add up to lots of extra space.
/* hide (in this order):
1. url box dropdown arrow
2. url box / search box resize splitter
3. star (bookmark) button
4. go button
5. forward-back dropdown button
6. new tab button */
#urlbar .autocomplete-history-dropmarker,
#urlbar-search-splitter,
#star-button,
#go-button,
#back-forward-dropmarker,
.tabs-newtab-button
{
display: none !important;
}
Finally, I never understood why the bac, forward, reload and stop buttons were also placed in the page right click menu, so now I can get rid of them!
/* never saw reason for having go/stop/back buttons
in the context (right click) menu */
#context-back,
#context-forward,
#context-reload,
#context-stop,
#context-sep-stop
{
display: none !important;
}
The end notes and stuff
Of course this is only scratching the surface of what you can do with userChrome.css. If you browse the Mozilla documentation you'll find that pretty much every UI element has a handle you can reference in CSS and modify (or hide!).
I also fragently cheated in my screenshot. You can merge the URL bar and search bar like Chrome has it with the Onmibar extension. The clean look comes from Camifox, a theme that borrows elements from the really nice Camino browser of which I'm still quite fond.
