How to Create and Use userChrome.css in Firefox

Firefox allows interface customization using a file called userChrome.css. This file can change how Firefox looks by applying custom CSS to its interface. Below is a simple guide to set it up, using "hiding the tab bar" as an example.

Step 1: Enable Custom Stylesheets

1. Open Firefox and go to about:config.
2. Search for: toolkit.legacyUserProfileCustomizations.stylesheets
3. Set it to true by double-clicking.

Step 2: Open Your Profile Folder

1. Go to about:support in the address bar.
2. Find the Profile Folder row.
3. Click Open Folder.

Step 3: Create the userChrome.css File

1. Inside your profile folder, create a folder named chrome (if it doesn’t already exist).
2. Inside the chrome folder, create a file named userChrome.css.

Step 4: Add Custom CSS

Open userChrome.css in a text editor and add your custom styles.

Example: Hide the tab bar

#TabsToolbar {
    visibility: collapse;
}

Save the file after editing.

Step 5: Restart Firefox

Close and reopen Firefox to see the changes take effect.

Notes

• You can add more CSS rules to customize other parts of Firefox.
• Hiding the tab bar works best if you use a tab manager extension (like Sidebery or Tree Style Tab) or only use one tab.