This is a quick video tutorial of Stylish for Firefox's basic features. A textual version of the same information, along with some more detailed topics, are covered below the video.
- With Firefox (or other Mozilla programs... just assume I always mean that when I say Firefox), go to the Stylish install page.
- Click Add To Firefox.
- Click Install Now.
- Click Restart Now.
To find styles to install, visit userstyles.org and browse or search from there. Alternatively, you can go to a site you wish to change, click the Stylish icon, and choose "Find styles for this site".
For details on how styles are organized on userstyles.org, see here.
Find a style you like on userstyles.org. Click "Install with Stylish" in the green box. Click Install on the prompt. That's it, the style is installed and active.
User styles only take effect on your computer; others can't see what you've changed unless they also use the same user style.
You can activate, deactivate, edit, and remove styles in the User Styles pane of Firefox's Add-ons Manager. To access the Add-ons Manager, click the Firefox button in the top left of the window (or the Tools menu) and choose Add-ons.
Stylish toolbar button
Stylish will install a toolbar button in the Add-ons bar (on the bottom left of the screen) after installation to provide quick access to Stylish functions. This button can be moved or removed just like any other button.
Stylish can be removed like any other extension. To keep Stylish but remove individual styles, see "Managing styles" above.
Turning off all styles
Sometimes it's useful to temporarily turn off all styles to see if a style is causing a problem with the display of the site. Rather than disabling all styles or disabling Stylish itself, you can tell Stylish to turn everything off by clicking the Stylish icon and choosing Turn all styles off. To turn them back on, click on the Stylish icon and choose Turn all styles on.
How to recover if a style makes Firefox unusable
If you installed a style that makes Firefox unusable, start Firefox with the command line parameter --stylish-disable. This will make Stylish not apply any styles. You can then remove the offending style, and then turn Stylish back on by clicking the Stylish icon and choosing Turn all styles on.
How to fix a corrupted Stylish database
Hidden Stylish preferences
Stylish has preferences to customize its behaviour, some of which are not exposed to the UI. These prefs can be changed in about:config.
- How to show app styles in the Stylish toolbar icon. Possible values: show, hide, submenu.
- How to show global styles in the Stylish toolbar icon. Possible values: show, hide, submenu.
- How to show site styles that match the current site in the Stylish toolbar icon. Possible values: show, hide, submenu.
- How to show site styles that don't match the current site in the Stylish toolbar icon. Possible values: show, hide, submenu.
- Path to the stylish.sqlite database which stores installed style info. Default is blank, meaning look for "stylish.sqlite" in the profile folder.
- Text editor to use when editing styles. 0 - CodeMirror (with syntax highlighting) (default), 1 - plain old textbox. CodeMirror is not available in all applications and versions.
- Whether to show the editor in a tab (0) or in a separate window (1).
- Internal preference used to save the editor window position. Don't touch.
- Internal preference controlling data migration on updates. Don't touch.
- Space-seperated list of domains that can bring up install boxes and detect style install status. Default: userstyles.org.
- Whether to confirm before clearing all styles. Default: true. Useful for automated scripts.
- Whether to confirm before installing a style. Default: true.
- Whether styles will actually be applied - tied to the "Turn all styles on/off" command. Default: true.
- Whether to check for updates for styles. Default: true.
- Whether to wrap lines in the editor. Default: true.