What should I know before I get started?
What are userChrome.css and userContent.css?
In short, userChrome.css and userContent.css are style sheets that can alter the appearance (but not function) of Firefox's user interface (UI) and webpages, respectively.
Due to limitations in available API's, webextensions currently cannot alter the UI with the same freedom userChrome.css can.
Similarly, webextensions are not granted access to some webpages, such as those hard coded into Firefox (e.g. about: pages) and the addon store. userContent.css therefore must be used to style these pages.
Helpful Links
userChrome.org - a more detailed look at what userChrome.css is, how to alter it, and a collection of resources.
Where do userChrome.css and userContent.css files go?
Both files must reside inside a folder titled chrome (case sensitive) within your Firefox profile directory. The chrome folder does not exist by default, so if you don't see it, you will have to create it yourself.
How do I find my Firefox profile folder?
-
Visit
about:supportby entering this address in the url bar. -
Scroll down to
Application Basics. -
In the
Profile Foldersection, click the button that says "Open Folder", "Show in Finder" or "Open Directory" (OS dependent).
On Windows and Linux, this should take you directly to your profile directory. On a Mac, this will take you to a list of Firefox profiles, with the one you want highlighted. In this case, double click that folder to open it.