userstyles.org - Using Stylish for Firefox

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.

Installation

  1. With Firefox (or other Mozilla programs... just assume I always mean that when I say Firefox), go to the Stylish install page.
  2. Click Add To Firefox.
  3. Click Install Now.
  4. Click Restart Now.

Finding styles

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.

Installing styles

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.

Managing styles

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.

Uninstallation

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

See here.

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.

extensions.stylish.buttonStylesDisplay.app
How to show app styles in the Stylish toolbar icon. Possible values: show, hide, submenu.
extensions.stylish.buttonStylesDisplay.global
How to show global styles in the Stylish toolbar icon. Possible values: show, hide, submenu.
extensions.stylish.buttonStylesDisplay.siteMatching
How to show site styles that match the current site in the Stylish toolbar icon. Possible values: show, hide, submenu.
extensions.stylish.buttonStylesDisplay.siteNonMatching
How to show site styles that don't match the current site in the Stylish toolbar icon. Possible values: show, hide, submenu.
extensions.stylish.dbFile
Path to the stylish.sqlite database which stores installed style info. Default is blank, meaning look for "stylish.sqlite" in the profile folder.
extensions.stylish.editor
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.
extensions.stylish.editorWindowMode
Whether to show the editor in a tab (0) or in a separate window (1).
extensions.stylish.editorWindowPersist
Internal preference used to save the editor window position. Don't touch.
extensions.stylish.firstRun
Internal preference controlling data migration on updates. Don't touch.
extensions.stylish.install.allowedDomains
Space-seperated list of domains that can bring up install boxes and detect style install status. Default: userstyles.org.
extensions.stylish.promptOnClear
Whether to confirm before clearing all styles. Default: true. Useful for automated scripts.
extensions.stylish.promptOnInstall
Whether to confirm before installing a style. Default: true.
extensions.stylish.styleRegistrationEnabled
Whether styles will actually be applied - tied to the "Turn all styles on/off" command. Default: true.
extensions.stylish.updatesEnabled
Whether to check for updates for styles. Default: true.
extensions.stylish.wrap_lines
Whether to wrap lines in the editor. Default: true.
Advertisement