Skip to content

FAQ

Jump to bottom
Tyler edited this page Oct 31, 2018 · 55 revisions

Contents

Your feedback

What is new in this version?

What is the “Stylus” extension and how does it work?

Stylus is a userstyles editor and manager based on the source code of Stylish version 1.5.2. Our objective is to maintain and improve upon the original author's version, while becoming more privacy oriented and remaining more user-friendly for style creators.

Stylus injects its own CSS into targeted pages and therefore makes you able to override the present design of a webpage. If you know CSS external link, you can write your own styles. Alternatively you can just install styles by other authors from userstyles.org external link (USO). You can search for styles for the current site on USO from within the Stylus extension.

What are the main differences and improvements over the original Stylish add-on?

  1. Any and all analytics, telemetry, and data-collection have been removed completely. We'd rather not know what you're up to.
  2. A backup feature, compatible with the one recently introduced in Stylish. To transfer your database, simply export from Stylish and import to Stylus.
  3. An automatic update feature for installed styles. You can now set your own interval for all installed styles to automatically update on their own, silently in the background.
  4. CodeMirror and CSSLint have been updated to their latest versions, respectively. Many false positive editor warnings and errors have been improved via the update, and we've added a few extra exceptions for some other common false positives.
  5. Support for handy shortcuts in the popup in addition to the global shortcuts (open popup, open manager, disable/enable all styles) also working in Firefox.
  6. A new icon state, which indicates when all styles are globally disabled.
  7. Stylus supports the installation of UserCSS styles (see Docs):
    • These files will have a .user.css or .user.styl extension.
    • These files can be hosted anywhere – GitHub repo or gist, GitLab, Bitbucket or a personal server.

How can I export my user styles from Stylish for Firefox to Stylus?

Stylish 3.0.1 or higher

Use the built-in backup function (just the same as in Chrome and Opera).
The backup file you get from Stylish has no filname-extension, so when using Stylus' import function (in the styles manager), make sure to select All files (*.*) instead of *.json in the dropdown-menu. Otherwise the desired file won't appear for choice.

You can also just drag and drop the backup file into Stylus management page. See the more detailed, illustrated instructions external link.

Before Stylish 3.0.1

Before version 3.0.1, Stylish add-on for Firefox does not support exporting. If you've already updated, your styles are not lost. There are two workarounds:

  1. All Firefox versions (including 57+)

    If you've ever used Stylish before version 2.1.1, then your styles still remain in a file stylish.sqlite in your Firefox user profile external link, no matter if you deleted or updated Stylish.

    Use the User Style Extractor external link to convert the stylish.sqlite to JSON format. For this, drag and drop the stylish.sqlite into the grey field and click All styles.
    The file you get can then be imported to Stylus (in styles manager). Don't forget to search for style updates afterwards.

  2. Only for Firefox version 38.0a1 to 56.0

    You can use the following experimental extension to generate a Stylus compatible JSON file:

    • Download this .xpi.
    • Open about:debugging in a browser tab (just enter it in the address bar).
    • In that tab, point “Load as temporary add-on” to the downloaded .xpi file.
    • Wait for a while until all your styles are converted.

    On successful conversion you will get a JSON file on your desktop. This file can be imported to the Stylus add-on (in the styles manager). Stylish add-on needs to be enabled in order for the .xpi to be able to convert styles.

Note that styles concerning the Firefox user interface will not work anymore in Firefox 57+ (see below for help).

Why doesn't my favorite style work in Firefox 57+?

Since Firefox 57 only WebExtensions external link (new extension format) are allowed. This has multiple advantages regarding speed and security, but also has the disadvantage that extensions can not style Firefox's user interface (UI) or any built-in pages anymore. Only webcontent can be styled by Stylus.

Learn how to style the Firefox UI in FF57+ from the Styling Firefox UI wiki page.

Why doesn't my favorite style work in Firefox 61+?

Firefox v61+ no longer supports @-moz-document external link:

From version 61: this feature is behind the layout.css.moz-document.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

To fix this, copy the @-moz-document entries into its corresponding “Applies to” section.

Before After
before after

The easiest way to do this is to click inside the editor, then:

  • Click the Export button under "Mozilla Format"
  • Select all content (⌘ or Ctrl + a).
  • Cut (⌘ or Ctrl + x).
  • Paste (⌘ or Ctrl + v) the content back into the editor.
  • A “Paste the Mozilla-format code” dialog box will open. Use the “Overwrite style” button.

What is the easiest way to duplicate a style?

1. From the Editor View

  • Click the Export button under "Mozilla Format"
  • Select all > Copy

2. From the Manage View

  • Click Write new style button.
  • Simply paste into the code block area.
  • A "Paste the Mozilla-format code" dialog box will open. Use the “Overwrite style” button.

How do I install Stylus from GitHub?

Please refer to the Install-Stylus-from-GitHub wiki page for detailed instructions.

Home

Clone this wiki locally