Make Firefox look spiffier with userChrome.css


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: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,
 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 */
 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.

Useful pages and stuff

Author bio and support


Ruben Schade is a technical writer and infrastructure architect in Sydney, Australia who refers to himself in the third person. Hi!

The site is powered by Hugo, FreeBSD, and OpenZFS on OrionVM, everyone’s favourite bespoke cloud infrastructure provider.

If you found this post helpful or entertaining, you can shout me a coffee or send a comment. Thanks ☺️.