Skip to content

FAQ

Jump to bottom
Rob Garrison edited this page Jul 9, 2019 · 55 revisions

Contents

Contact, Feedback, Support

See Stylus Wiki Home.

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.
    • UserCSS allows using preprocessors like LESS or STYLUS or even using an external editor.
    • UserCSS supports user-customizable variables which can be live-switched.

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), other extensions 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 (Ctrl + a).
  • Cut (Ctrl + x).
  • Paste (Ctrl + v) the content back into the editor.
  • A "Paste the Mozilla-format code" dialog box will open. Use the "Overwrite style" button.

Why did all my styles disappear?

We've heard from a few users that their extension database had been purged. In those cases we found it was due to:

Before this happens to you, please make sure to export your styles regularly. It saves a JSON to your local drive.

If this happened to you, then recovering the styles may not be possible. Please open an issue and let us know your circumstances (OS & version, browser & version and any associated software).

Where are my styles stored?

Before resorting to backing up, or restoring all installed styles. It is best to export/import your styles as a JSON file directly from Stylus' manager. The file can me imported & exported from your local drive or Dropbox.

If you need the actual database file (SQLite), then these instructions will help you locate the folder in Chrome & Firefox.

The first step is to find your extension ID.

  • Click on Stylus' icon and open the manager.
  • The URL should look something like this:
    • Chrome: chrome-extension://fpemabieoeblkfplgknpncjfllcnenom/manage.html
    • Firefox: moz-extension://6dcf80f8-51c1-4cdc-9624-1304bc1f7c01/manage.html
  • The ID is the part between the // and the /manage.html.
  • You don't need to memorize it, just remember the first four or five characters.

Locate the profile & database folder:

For Firefox:

  • Go to about:support.
  • Find the "Profile Folder" entry and click on the "Open Folder" button.
  • You should end up in a folder like C:\Users\{username}\AppData\Roaming\Mozilla\Firefox\Profiles\ne06nrtc.default (Windows). Note the default indicates a stable version of Firefox, this will be different for Firefox nightly, developer edition, etc.
  • Enter the storage\default folder.
  • Open the moz-extension+++{extension ID} folder. This is where you need to remember the ID from step 1.
  • The idb folder contains the database files, but it might be best to copy the entire moz-extension folder.

For Chrome:

  • Go to chrome://version/.
  • Find the "Profile Path" entry.
  • Copy it. It should look something like: C:\Users\{username}\AppData\Local\Google\Chrome\User Data\Default (Windows).
  • Paste it into File explorer path entry.
  • Open the IndexedDB folder.
  • The folder you're looking for is similar to this chrome-extension_{extension ID}_0.indexeddb.leveldb. This is where you need to remember the ID from step 1.
  • Copy this entire folder in order to back it up.

How do I install Stylus from GitHub?

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

How do I maintain my local changes?

When a userstyle is installed from a page, Stylus stores the url of that page internally along with the CSS style.

If that userstyle is then modified or even renamed, it will still maintain the original install location, but all automatic updates of the modified userstyle will be blocked. A manual update of that userstyle is required to update, but be warned that an update will overwrite all changes, i.e. all modifications will be lost!

To get around this, create a "companion style". Please refer to the Writing Styles page for more details.

What is the easiest way to duplicate a style?

Copy and paste the source code into a new style. We recommend doing this only for styles that won't ever be updated from the original source as the copy will be a "local" style only.

  1. Copy the style
    • Open the selected style in the Editor.
    • Click the "Export" button under "Mozilla Format". If it is a UserCSS style there is no "Mozilla Format" button. You can copy the code directly from the edit window.
    • If not all content is automatically selected in the popped up window, use (Ctrl + a), then Copy (Ctrl + c) the style.
  2. Paste into a new style
    • Click "Write new style" in the manager.
    • Paste (Ctrl + v) the style into the code block area.
    • If you created a non-UserCSS style, a "Paste the Mozilla-format code" dialog box will open. Use the "Overwrite style" button.
    • Give the style a name, then save.

Home

Clone this wiki locally