Customize Firefox 57 with CSS

Custom CSS for Fx is a collection of CSS styles for Firefox 57 and newer by the author of the popular Firefox add-on Classic Theme Restorer.

Firefox 57 won't support Classic Theme Restorer or any other interface changing extensions or themes anymore because of the switch to a WebExtensions exclusive system. The new WebExtensions system prevents changes to the browser's user interface by not providing APIs to extensions developers.

The only option that is left for Firefox users to modify the UI, apart from what Mozilla provides natively in Firefox, is to use CSS.

Firefox users who know their way around CSS may edit CSS files manually to modify their version of the web browser. Most Firefox users on the other hand probably don't, and that's where Custom CSS for Fx comes into play.

Customize Firefox 57 with CSS

The project is hosted on GitHub, and it is maintained by Aris who is known for popular Firefox add-ons such as Classic Theme Restorer and NoiaButtons. Classic Theme Restorer was created as a response to the Australis interface that Mozilla launched in Firefox 29. The extension won't work in Firefox 57 or newer anymore because Mozilla dropped support for legacy add-ons in that Firefox version, and did not introduce capabilities to modify the user interface as WebExtensions API.

The startpage of the project offers information on locating the profile folder of the Firefox web browser, and using the provided styles to modify Firefox.

The easiest way to locate the profile folder is by loading about:support in the browser's address bar, and clicking on the "open folder" button under Application Basics > Profile Folder.

You need to create a folder called chrome if it does not exist in the root of the profile directory. Once done, copy the content of the archive into that folder. Make sure that userChrome.css and userContent.css are located in the root of the chrome folder.

This is all that needs to be done to add these custom styles to Firefox. There is however another step that you may want to take, and that is customizing the tweaks.

The default set of tweaks may appeal to some users, but the CSS files come with options to enable or disable different tweaks to change the interface further.

Open the userChrome.css file in a plain text editor. The file uses the @import command to import the actual CSS styles from CSS files. This is done to keep the main userChrome.css tidy and make it easier for users of Firefox to modify it.

Lines that begin with /* are commented out and the CSS files they link to are not imported because of that.

What you need to do is go through the listing one section at a time to determine which of the available tweaks you'd like enabled in Firefox.

You unload tweaks by adding /* in front of the line and */ at the back. Similarly, you remove /* in front and */ at the back to enable a tweak.

Here is the list of tweaks that is available right now:

• Modify navigation toolbar buttons.
• Enable Squared buttons
• Change icon appearance
• Change the app button popup.
• Change bookmarks menu and popup appearance.
• Old bookmarks toolbar  button appearance
• Other button settings (Forward button hide, back and forward buttons separated history popups, zoom buttons hide reset).
• Custom back and forward buttons appearance
• Application/hamburger button on navigation toolbar
• Application/hamburger button in Firefox titlebar (Windows only)
• Tabs appearance (style, toolbar position for instance below toolbars (read: tabs not on top), tab titles, icons, and more.
• Modify searchbar, context menus, icons, and other toolbars.
• Change the style of the location bar.

Some of these are self-explanatory. Others are not, but you have two options when it comes to these. Either enable them and check them out directly, or open the CSS file that gets loaded to find out what they do. The latter requires some knowledge of CSS however.

The userContent.css file uses the same layout. It imports CSS files, and it is up to you to enable or disable those.

A list of suggested native interface tweaks and about:config tweaks are provided as well by the project to modify Firefox's appearance further.

Closing Words

Custom CSS for Fx offers plenty of interface modifications for Firefox 57's interface that cannot be done using extensions or using built-in features. Existing Firefox users may find it useful, especially if they have used Classic Theme Restorer or a comparable add-on until now.

Updates are released regularly by Aris; that's good not only for new functionality that may get introduced through tweaks, but also to keep the styles compatible with new Firefox releases.

.