Firefox Quantum‘s interface continues to be extraordinarily customizable thanks to its userChrome.css file. You may edit this file to conceal undesirable menu objects, transfer the tab bar under the navigation toolbar, view a number of rows in your bookmarks toolbar, and do different issues that usually wouldn’t be attainable.
How This Works
Firefox’s userChrome.css file is a cascading type sheet (CSS) file that Firefox makes use of. Whereas type sheets are usually utilized to internet pages, this specific type sheet is utilized to Firefox’s consumer interface. It permits you to change the looks and structure of all the things surrounding the webpage iteslf. You may’t truly add any options; you’ll be able to solely modify what’s already there to change, conceal, or transfer it.
This has nothing to do with Google Chrome. “Chrome” refers to the consumer interface of the online browser, which is what Google Chrome was named after.
The userChrome.css file has existed in Firefox for a very long time, but it surely’s taken on renewed significance with Firefox Quantum. Many tweaks that might beforehand be achieved by browser add-ons can now solely be achieved by enhancing the userChrome.css file.
The place to Discover Tweaks
Whilst you may create your individual tweaks should you perceive CSS code and the way Firefox’s interface was designed, you can even simply discover tweaks on-line. If you’d like to make a sure change, another person has most likely already discovered how to do it and written the code.
Listed below are some assets to get you began:
- Pattern Tweaks from userChrome.org: A brief listing of fascinating tweaks that reveal the facility of userChrome.css.
- Basic CSS Tweaks: A repository of userChrome.css tweaks from the writer of the Basic Theme Restorer extension, which not capabilities on Firefox Quantum.
- userChrome Tweaks: A group of fascinating Firefox tweaks.
- FirefoxCSS on Reddit: This subreddit is a group for discussing tweaks. You may search the subreddit to discover different individuals’s tweaks, see what persons are sharing, and even ask for enter should you can’t discover a tweak you really need.
- Information to Enhancing Your Context Menu: Directions for eradicating objects from Firefox’s context menu and altering their order within the listing, taken from the FirefoxCSS subreddit.
Keep in mind that older variations of Firefox had a distinct interface. Older userChrome.css tweaks you discover on-line could not operate on Firefox 57 and later, also referred to as Firefox Quantum.
If what you’re doing with CSS, you’ll be able to allow the browser toolbox to examine the Firefox browser’s chrome. This can present the data you want to customise varied browser interface components with your individual CSS code.
How to Create Your userChrome.css File
The userChrome.css file doesn’t exist by default, so upon getting a tweak or two you need to check out, you first have to create the file within the applicable location inside your Firefox profile folder.
To launch your Firefox profile folder, click on menu > Assist > Troubleshooting Data in Firefox.
Click on the “Open Folder” button to the precise of Profile Folder to open it. (On macOS or Linux, you’ll see a “Present in Finder” or “Open Listing” button as an alternative. The next directions present the method on Home windows, but it surely’s mainly the identical on Mac and Linux—you’ll simply be utilizing a distinct file supervisor and textual content editor.)
In the event you see a folder named “chrome” within the profile folder that seems, double-click it. Nonetheless, you most likely gained’t, as this folder isn’t created by trendy variations of Firefox.
To create the folder, right-click in the precise pane and choose New > Folder. Identify it “chrome”, press Enter, after which double-click it.
You’ll want to inform Home windows to present you file extensions, should you haven’t already. Home windows hides file extensions by default to simplify issues. This step isn’t obligatory on macOS or Linux, which present this info by default.
On Home windows eight or 10, you’ll be able to merely click on the “View” tab on the ribbon and test the “File identify extensions” field to make them seen. On Home windows 7, click on Arrange > Folder and search choices, click on the “View” tab, and uncheck “Cover extensions for recognized file sorts”.
You’ll now create the userChrome.css file, which is actually only a clean textual content file with the .css extension as an alternative of the .txt extension.
To take action, right-click in the precise pane right here and choose New > Textual content Doc. Identify it “userChrome.css” ensuring to take away the .txt file extension.
Home windows will warn you that you simply’re altering the file’s extension and this can be an issue for sure forms of information. Click on “Sure” to affirm your change.
On macOS or Linux, create an empty textual content file with the identical identify.
How to Edit the userChrome.css File
You should utilize any textual content editor to edit the userChrome.css file. The Notepad textual content editor included with Home windows works simply fantastic. If you’d like a extra highly effective textual content editor with extra options, we like Notepad++.
To edit the file in Notepad, right-click it and choose “Edit”.
Add no matter tweaks you need to the file by copying and pasting them in. In the event you add a number of tweaks, ensure to add all of them on their very own traces.
When you’re performed, save the file by clicking File > Save in Notepad.
Everytime you edit your userChrome.css file, you should have to shut all open Firefox home windows and relaunch Firefox on your adjustments to take impact.
If you end up coming again to the “chrome” folder incessantly to edit your userChrome.css file, it’s your decision to create a desktop shortcut to the folder or add it to the “Fast entry” folders in File Explorer.
The userContent.css File
Firefox additionally has a userContent.css file you’ll be able to edit, and you could stumble throughout some tweaks that say they’re for the userContent.css file.
To make use of this file, simply create a file named “userContent.css” in the identical folder as your Chrome folder. Tweaks you place on this file have an effect on Firefox’s inner “content material pages”, just like the New Tab and Choices pages.
Assist, I Broke One thing!
In the event you ever encounter an issue with a tweak, you’ll be able to simply take away it out of your userChrome.css file and restart Firefox. If that doesn’t work, you’ll be able to utterly delete the userChrome.css file and restart the browser to erase all of your adjustments and get a contemporary Firefox interface.