-
Notifications
You must be signed in to change notification settings - Fork 306
FAQ
- Intro
- New users
- Issues
- How to
- Short changelog on AMO
- Short changelog on add0n.com
- Full changelog in commit history
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 , you can write your own styles. Alternatively you can just install styles by other authors from userstyles.org (USO). You can search for styles for the current site on USO from within the Stylus extension.
- Any and all analytics, telemetry, and data-collection have been removed completely. We'd rather not know what you're up to.
- A backup feature, compatible with the one recently introduced in Stylish. To transfer your database, simply export from Stylish and import to Stylus.
- 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.
- 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.
- 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.
- A new icon state, which indicates when all styles are globally disabled.
- 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.
- These files will have a
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 .
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:
-
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 , no matter if you deleted or updated Stylish.Use the User Style Extractor to convert the
stylish.sqlite
to JSON format. For this, drag and drop thestylish.sqlite
into the grey field and clickAll styles
.
The file you get can then be imported to Stylus (in styles manager). Don't forget to search for style updates afterwards. -
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).
Since Firefox 57 only WebExtensions (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.
Firefox v61+ no longer supports @-moz-document
:
From version 61: this feature is behind the
layout.css.moz-document.content.enabled
preference (needs to be set totrue
). To change preferences in Firefox, visitabout:config
.
To fix this, copy the @-moz-document
entries into its corresponding “Applies to” section.
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.
We've heard from a few users that their extension database had been purged. In those cases we found it was due to:
- CCleaner/CCEnhancer clears Firefox HTML5 storage - no longer a problem (ref: #278 & #364).
- CCleaner with Winapp2 in Chrome - no longer a problem (ref: #557).
- Chrome Canary bug - no longer a problem (ref: #528).
- Other file cleaning software?
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).
Please refer to the Install-Stylus-from-GitHub wiki page for detailed instructions.
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. 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.
We recommend doing this only for styles that won't ever be updated from the original source.
- Open the selected style in the Editor:
- Click the "Export styles" button under "Mozilla Format"
- All content should automatically be selected, if not use (⌘ or Ctrl + a), then Copy (⌘ or Ctrl + c) the style.
- From the Manager:
- Click the "Write new style" button to create a new style.
- Paste (⌘ or Ctrl + v) the style into the code block area.
- A "Paste the Mozilla-format code" dialog box will open. Use the “Overwrite style” button.
- Name, then save the new style.