Styling Firefox UI With CSS (part 1)

Recently I have discovered userChrome.css. It is a file that allows styling Firefox UI with CSS - not the page contents, the user interface! A quick research has shown me that this feature is unique to Firefox. Other browser can apply custom styling to the displayed content and not to its own interface.

Configuration

Configuring Firefox to use userChrome.css is really straightforward. To set it up simply follow the steps below.

Enable Styling

  1. Head to about:config
  2. Search for toolkit.legacyUserProfileCustomizations.stylesheets option and set it to true

Locate Profile Folder

  1. Head to about:support
  2. Write down the path visible as Profile Folder

Deploy userChrome.css

  1. Create a chrome directory within the profile directory
  2. Save userChrome.css in the chrome directory
  3. Restart the browser for changes to take place

Now you know how to apply the styling! 🎉 If you wonder how to actually create a style for the browser’s UI, read on!

Style Development

Since userChrome.css is nothing else than a simple CSS, then all that’s left to figure out are the interface elements. To do this we need to enable and run inspector for the browser’s UI and not its contents.

Enabling Inspector

  1. Open inspector (page does not matter)
  2. Head to settings (F1)
  3. Check the following boxes:
    • Enable browser chrome and add-on debugging toolboxes
    • Enable remote debugging

Running Inspector

Simply click Ctrl+Shift+Alt+I (or its equivalent on Mac) or open Firefox’s hamburger menu, head to More Tools submenu, and start Browser Toolbox. A prompt about an incoming connection will be displayed, and once allowed the inspector for the UI will appear.

Example

To finish off, a simple example of userChrome.css:

.tabbrowser-tab:first-child * {
  background-color: orangered !important;
}

which styles first tab’s background color:

Firefox Styling Example

Summary

If you want to experiment with userChrome.css, then you might find FirefoxCSS subreddit and userChrome.org of use.

From what I have tested, it is quite easy to break stuff. For instance, altering pinned tab width makes them messy when too many tabs are open. Regardless, I find this feature interesting and most likely will experiment with it in the future.