How To Write Changes To Userchrome.css File In Firefox

Firefox Quantum's interface is even so extremely customizable thanks to its userChrome.css file. You can edit this file to hibernate unwanted card items, move the tab bar beneath the navigation toolbar, view multiple rows on your bookmarks toolbar, and do other things that commonly wouldn't exist possible.

How This Works

RELATED: Firefox Quantum Isn't Simply "Copying" Chrome: It'south Much More Powerful

Firefox'south userChrome.css file is a cascading fashion canvass (CSS) file that Firefox uses. While style sheets are normally applied to web pages, this item manner sheet is practical to Firefox's user interface. It allows you to alter the advent and layout of everything surrounding the webpage iteslf. You tin't actually add any features; y'all can only modify what's already there to change, hide, or move information technology.

This has cipher to do with Google Chrome. "Chrome" refers to the user interface of the spider web browser, which is what Google Chrome was named after.

The userChrome.css file has existed in Firefox for a long fourth dimension, but it'southward taken on renewed importance with Firefox Quantum. Many tweaks that could previously be accomplished by browser add together-ons can at present only be accomplished past editing the userChrome.css file.

Where to Find Tweaks

While you lot could create your own tweaks if y'all empathise CSS code and how Firefox'south interface was designed, y'all tin can also just find tweaks online. If you want to make a certain change, someone else has probably already figured out how to practise it and written the code.

Hither are some resources to become you started:

Sample Tweaks from userChrome.org: A short list of interesting tweaks that demonstrate the ability of userChrome.css.
Classic CSS Tweaks: A repository of userChrome.css tweaks from the writer of the Classic Theme Restorer extension, which no longer functions on Firefox Breakthrough.
userChrome Tweaks: A drove of interesting Firefox tweaks.
FirefoxCSS on Reddit: This subreddit is a customs for discussing tweaks. You can search the subreddit to find other people's tweaks, see what people are sharing, and even ask for input if you can't notice a tweak you really want.
Guide to Editing Your Context Carte du jour: Instructions for removing items from Firefox's context menu and changing their society in the list, taken from the FirefoxCSS subreddit.

Conduct in mind that older versions of Firefox had a different interface. Older userChrome.css tweaks you find online may not function on Firefox 57 and after, besides known as Firefox Breakthrough.

If you know what you're doing with CSS, yous can enable the browser toolbox to audit the Firefox browser's chrome. This will provide the information y'all need to customize various browser interface elements with your own CSS code.

How to Create Your userChrome.css File

The userChrome.css file does non exist past default, so once you have a tweak or two you lot want to attempt out, you commencement accept to create the file in the appropriate location inside your Firefox contour binder.

Update: Since Firefox 69, you must go into about:config and set up "toolkit.legacyUserProfileCustomizations.stylesheets" to "true" to enable these customizations. If yous don't, Firefox will ignore your userChrome.css and userContent.css files.

To launch your Firefox contour binder, click bill of fare > Assistance > Troubleshooting Information in Firefox.

Click the "Open up Folder" button to the right of Profile Folder to open it. (On macOS or Linux, you'll see a "Show in Finder" or "Open Directory" button instead. The following instructions show the process on Windows, but it'south basically the same on Mac and Linux—you'll just exist using a different file manager and text editor.)

If you encounter a folder named "chrome" in the profile folder that appears, double-click it. However, you probably won't, as this folder isn't created by modernistic versions of Firefox.

To create the binder, right-click in the right pane and select New > Folder. Proper name it "chrome", press Enter, and then double-click it.

RELATED: How to Make Windows Bear witness File Extensions

You'll need to tell Windows to evidence you file extensions, if you haven't already. Windows hides file extensions past default to simplify things. This step isn't necessary on macOS or Linux, which show this information by default.

On Windows 8 or ten, yous can simply click the "View" tab on the ribbon and check the "File name extensions" box to make them visible. On Windows 7, click Organize > Folder and search options, click the "View" tab, and uncheck "Hide extensions for known file types".

You lot volition now create the userChrome.css file, which is really just a bare text file with the .css extension instead of the .txt extension.

To do so, correct-click in the right pane here and select New > Text Document. Proper name it "userChrome.css" making sure to remove the .txt file extension.

Windows volition warn you that yous're changing the file's extension and this may be a problem for certain types of files. Click "Yes" to ostend your change.

On macOS or Linux, create an empty text file with the same name.

How to Edit the userChrome.css File

You tin use any text editor to edit the userChrome.css file. The Notepad text editor included with Windows works merely fine. If y'all desire a more than powerful text editor with more than features, nosotros like Notepad++.

To edit the file in Notepad, right-click it and select "Edit".

Add whatever tweaks you lot want to the file by copying and pasting them in. If you add multiple tweaks, exist sure to add together them all on their own lines.

Once you're done, save the file past clicking File > Relieve in Notepad.

Whenever you edit your userChrome.css file, yous will accept to shut all open Firefox windows and relaunch Firefox for your changes to accept effect.

If you lot observe yourself coming back to the "chrome" folder frequently to edit your userChrome.css file, you may desire to create a desktop shortcut to the folder or add it to the "Quick access" folders in File Explorer.

The userContent.css File

Firefox likewise has a userContent.css file you lot tin can edit, and you may stumble across some tweaks that say they're for the userContent.css file.

To employ this file, just create a file named "userContent.css" in the same folder equally your Chrome folder. Tweaks you place in this file affect Firefox's internal "content pages", like the New Tab and Options pages.

Help, I Broke Something!

If you e'er come across a problem with a tweak, you can just remove it from your userChrome.css file and restart Firefox. If that doesn't piece of work, you lot can completely delete the userChrome.css file and restart the browser to erase all your changes and get a fresh Firefox interface.