Compare Revisions

What you need to know about Firefox customization with the userChrome.css file and how to help users get more help or revert their changes.

__TOC__ {warning}'''Warning''': CSS customization is intended for developers, not end users.{/warning} In addition to the built-in customization feature (see [[Customize Firefox controls, buttons and toolbars]]), Firefox themes (see [[Use themes to change the look of Firefox]] and other types of add-ons (see [[Find and install add-ons to add features to Firefox]]), advanced Firefox users can also make changes to their browser user interface (UI) by applying style rules with an optional file named {filepath userChrome.css}. As SUMO contributors, here's what you need to know about Firefox advanced customization using this CSS file: =What does userChrome.css do?= Firefox’s user interface is built of web-like elements (HTML and XUL elements) and styled using [https://developer.mozilla.org/docs/Web/CSS CSS]. Users can set Firefox to look for a userChrome.css file at startup, so the rules in the file can restyle various elements of the user interface. For example, custom rules can change colors and sizes of many elements, hide them, or reposition them. =Why is userChrome.css disabled by default?= Historically, the vast majority of users never created a {filepath userChrome.css} file. To speed up Firefox startup for most users, the behavior to look for and use a {filepath userChrome.css} was put behind the preference {pref toolkit.legacyUserProfileCustomizations.stylesheets}, defaulted to {pref false}, in [https://bugzilla.mozilla.org/show_bug.cgi?id=1541233 bug 1541233]. =What do users need to know before they use userChrome.css customization?= Users should expect that some of their custom rules will stop working correctly in the future, and in extreme cases, this may cause serious issues with the user interface. Firefox is a work in progress and to allow for continuous innovation, Mozilla cannot guarantee that the styled elements will not change. When new features and new user interface designs are introduced, they often require different HTML and XUL tags, and the styling of these tags will evolve as well. For this reason, Mozilla does not officially support custom style rules. =Where can users get help with custom rules and userChrome.css? = Mozilla's support forum provides peer-to-peer assistance in a very limited basis for these kind of customization. We encourage users with userChrome.css issues to seek assistance and information through other forums and websites instead, such as the [https://userchrome.org userchrome.org] site, the [https://www.reddit.com/r/FirefoxCSS/ r/FirefoxCSS forum on Reddit] or the [https://chat.mozilla.org/#/room/#firefoxcss:mozilla.org community-driven #firefoxcss room] on [https://wiki.mozilla.org/Matrix Matrix]. =How to revert Firefox back to its default state?= If Firefox user interface suddenly looks broken after an update, and the users have created a userChrome.css file in the past, they can use Firefox’s Troubleshoot Mode (see [[Diagnose Firefox issues using Troubleshoot Mode]]) to quickly disable their custom rules, and see whether that makes any difference. If they would like to undo their customization and restore Firefox to its default UI, Users can use one of the following methods. == Reset Firefox to its default state == {warning}'''Warning''': A Firefox refresh removes add-ons and other customizations, such as [https://support.mozilla.org/en-US/kb/find-and-install-add-ons-add-features-to-firefox#w_what-types-of-add-ons-can-i-install extensions], extension data, and [[Configuration Editor for Firefox|preference configurations]]. If you've made accessibility customizations to Firefox, you may need to add them back after refreshing.{/warning} Users can reset Firefox to its default state by following the steps in the [[Refresh Firefox - reset add-ons and settings]] article. == Disable and remove userChrome.css == Users can disable and remove their userChrome.css file so that it does not load on Firefox startup by following this steps: # [[Template:aboutconfig]] # Search for the {pref toolkit.legacyUserProfileCustomizations.stylesheets} preference and set it back to {pref false} by clicking on ''Reset'' [[Image:Fx71aboutconfig-ResetButton]]. # Remove {filepath userChrome.css} inside the {filepath chrome} folder of the profile folder. To find the profile folder, see the ''How do I find my profile?'' section in [[Profiles - Where Firefox stores your bookmarks, passwords and other user data]].