Making changes to Firefox’s appearance

Firefox is my favourite browser, but the icons on the bookmark toolbar are way too roomy horizontally. Even if you delete the text of the bookmarks leaving only the icons, the space between them is way too wide. How do you adjust it?

You could take what seems to be the easy route and install a Firefox extension, but extensions are problematic for several reasons:

  • You don’t really know what’s in them (you can root around in the code, but that’s a lot of work);
  • They generally do lots of other things that you don’t need—and may even steal your private information;
  • They have a lot of code in there that is all about options and configuration, which is all well and good, but you generally only want one configuration;
  • If you have more than one extension, they may conflict and cause problems;
  • Too many extensions with lots of functionality that you don’t need makes for a slower experience and makes troubleshooting more complex. Best to limit yourself to the extensions that you really need.

For a simple problem such as spacing in a toolbar, a DIY approach may be best.

Where to start? Well, it turns out that Firefox uses CSS to make itself look pretty, just like the rest of the interwebs. You can change the way the Firefox window looks by modifying a file called userChrome.css. This file is hidden in the depths of user-preference-land—and may not even exist (yet in your configuration). Here’s how to create (or modify) it to do what you want.

I use Sublime Text

I use Sublime Text

First of all, you’ll need something to edit text files with. I use Sublime Text; it’s ace.

(You can also get by with Text Edit, but you’ll need to modify the preferences to make it work properly with plain text files [1]—despite the name, Text Edit generally does more than edit plain text; it’s a bit of a mini word-processor.)

Next, you need to find the file userChrome.css (if it exists) in the chrome folder of Firefox’s profile folder and edit it. To do this:

  1. On the Firefox menu—at the top, where you find File, Edit, and so on—click Help;
  2. Select Troubleshooting Information;
  3. Under Application Basics, in the Profile Folder section, click Show in Finder. This opens a Finder window where your Firefox settings are stored.
  4. If there is a folder called chrome in there, open it; otherwise create it (by pressing cmd ⌘ + + N (or selecting File > New Folder) and typing the new name);
  5. Open the chrome folder;
  6. If there is a file called userChrome.css in there, open it in your editor; otherwise open a new file in your editor;
  7. Make sure the file contains all of the following:

  8. Now save the file in the chrome folder: if the file already existed before, then simply save it; if it didn’t exist, then save your newly-created file with the name userChrome.css on the desktop and then drag it into the chrome folder;
  9. Restart Firefox.

What you should now see is a change from something like this: Large space between bookmark icons

… to something like this: Smaller space between bookmark icons

Neat!


[1] If you want to use Text Edit to edit plain text files: Go to TextEdit > Preferences. In New document: select Plain text format (not Rich text); uncheck Correct spelling automatically; uncheck Smart quotes and Smart dashes. In Open and Save: check Display HTML …; check Display RTF …; uncheck Add .txt extension…; uncheck Preserve white space.