Manager
Open Stylus' manager by clicking on the manager from the extension options page, popup or editor:
-
Extension options
-
Popup
-
Editor
All screenshots show the default options set:
Screenshot
Filter the entries using this block. The search will apply to the entries as you type. If no entries are found, a "Currently applied filters match no styles" message will appear.
Check the box to the left of the select to apply the filter to the installed style entries. Any combination of these three filters may be applied at one time.
- Only enabled styles vs. Only disabled styles - Only show enabled or disabled styles.
- Only locally created styles vs. Only external styles - Only show locally created styles (i.e. styles created by clicking the "Write new style button") or styles installed from a website.
- Only UserCSS styles vs. Only non-UserCSS styles - Only show plain or UserCSS styles. UserCSS styles are styles that can be installed from anywhere; they contain a metadata block at the top of the style.
To focus on the input, click inside, press tab to navigate to it, or press the /) keyboard shortcut.
The search will include entry text from the name, code, homepage URL and sites it is applied to unless otherwise specified.
- Plain text: Search through all entry data mentioned above. Words less than 3 letters long are ignored.
-
Exact text: Wrap the query in double quotes, e.g.
".header ~ div". -
URL only: Add a
url:prefix to matches the url you put in against all applies to fields. -
Regular expressions: Include slashes & tags to apply the regular expression to the entry text data. Include slashes and flags, e.g.
/background(-color)?/gmi.
Information similar to the above information can be accessed in a popup within the manager by clicking on the information icon (
).
Once a filter is applied, a label will be visible next to the "Filter" title showing {x} shown of {y} total meaning of the {y} total number of installed styles, only {x} styles are now visible in the manager.
In this screenshot, {x} is 4 (visible styles) and {y} is 6 (total installed styles)
- Click on the "x" inside the filter input - only clears the filter input; the filter selectors will not be modified.
- Click on the "x" to the right of the filter label
{x} shown of {y} total- Clears all filters so that all installed entries will be visible again.
By default, all installed entries are sorted by title.
Click on the sort selector and choose from the numerous sorting options.
The blocks are separated into two major groups: Title Ascending (sort from A to Z) and Title Descending (sort Z to A)
The sorting down arrow icon (
) indicates that the group will be sorted in a descending (Z to A) manner. All other groups without this icon will sort the group is an ascending (A to Z) manner. Date groups do not use this icon; instead the text explicitly states if the newest or oldest date is first to prevent confusion.
Combination of groups like "Enabled + Title" will first sort all the enabled styles to the top and disabled at the bottom; then it sorts the enabled & disabled styles separately by title from A to Z.
- Enabled, sorted from A to Z.
- Disabled, sorted from A to Z.
The triple combo "Enabled + UserCSS + Title" will result in the following order of entries:
- Enabled UserCSS, sorted from A to Z.
- Enabled non-UserCSS, sorted from A to Z.
- Disabled UserCSS, sorted from A to Z.
- Disabled non-UserCSS, sorted from A to Z.
If you feel like your preferred group sorting method is missing, please let us know by contacting us.
The "Check all styles for updates" button can be used to manually check all installed styles for updates. This uses the same method as the automatic update (see Option auto updates and Option manual updates).
If any of the styles were locally edited:
- Those styles will be skipped.
- A block under the Check all styles... button will show:
-
A message stating "No updates found".
-
And/or, a new button Apply all updates (#) will appear allowing you to force update all locally edited styles. The
(#)will show the number of styles that will be forcibly updated. -
And, another button labeled Check again, I didn't edit any styles! will appear below the Apply all updates button allowing you to check for updates again. In case individual styles were updated.
-
- Individual styles may be updated by clicking on the red action button within the style entry.
Click on the update history icon (
) to review the history of both automatic and manual updates. The log will show the date, and if a style was updated or skipped and the reason why it was skipped.
Similar to using Write style for in the popup method except this opens a generic template.
Clicking this button opens the editor.
Checking the as UserCSS box will open the editor in UserCSS mode; meaning a generic UserCSS metadata block is included in the editor.
Clicking on the external link icon (
) will open the UserCSS documentation page.
Use this checkbox to toggle between the old and new UI layout. The old layout. The new UI layout is more compact and columnar.
Only available for the new manager UI.
When this option is enabled, each applies-to domain, url and url-prefix in the applies to column will include a favicon. There are also attempts to find a valid domain & favicon within any given regular expressions.
Toggle the dropdown to show the Grayed out option which will apply a grayscale filter to all favicons. When the applies to column is hovered by the mouse cursor, the colorized favicons will be visible again.
Only available for the new manager UI.
Set the maximum number of applies to entries that are visible in the applies-to column. If there are more than the set number, an additional entry showing an ellipsis will be visible. Toggle the ellipsis button (click or tab focus & press Enter) to show all or compact the list of applies-to entries.
This value has a set range from 1 to 99. The default is 3.
Clicking this button will open the extension options.
Clicking this button will open the extension keyboard shortcuts manager.
Clicking this button will search userstyles.org for extension themes (https://userstyles.org/styles/browse/chrome-extension 
)
Hover over the Export button to expand the dropdown.
- Choose Export styles to save a JSON formatted file containing all of the installed styles. The file will be saved to your browser's set download location.
- Choose Dropbox Export to save a stylus.zip file containing the same JSON formatted file of all the installed styles to the home folder of your Dropbox account. We are discussing adding the ability to rename the zip file & change it's destination folder.
Currently, you cannot choose which styles you want to export, but you can edit the locally exported JSON file in a text editor to modify, add or remove styles.
There are several methods that can be used to import styles:
- Hover over the Import button to expand the dropdown:
- Choose the Import styles button to open the file upload dialog that allows you to choose the file from your computer to upload to the extension.
- Choose Dropbox Import to download the
stylus.zipfile from the home folder of your Dropbox account. We are discussing adding the ability to choose which stylus zip file to load.
- Drag the previously exported JSON file into the manager window, then drop it.
Screenshot
Once the styles have been imported, a "Finished importing styles" dialog window will appear and show how many styles were added and updated (meta info only, or both meta and code). At this time, you can also Undo the addition of styles.
Note that imported styles are added to or updated in the list of installed styles. No styles are removed.
Opens a tab to userstyles.org
Opens a tab to https://add0n.com/stylus.html#features (FAQs section).
Opens a tab to the Wiki Home page.
Opens a tab to our Transifex account (https://www.transifex.com/github-7/Stylus ), to make it easier for user to help contribute translations to our Stylus extension.
The main section of the manager page shows all the install entries.
All screenshots shown here are of the new manager UI layout set up in a columnar format.
The first column has a checkbox showing the state of the installed style. Checked means enabled and unchecked disables the style. Disabled entries have reduced opacity.
- The name of the installed style is shown.
- Labels highlighting the disabled state and if the style is a UserCSS are shown in this column.
- Hover the title to see the date the userstyle was installed/created and when it was last updated.
- Clicking on the title (optionally include Ctrl or Shift) to open the userstyle in the editor.
Clicking on the homepage icon () opens a new tab to the style's install location, or the style's homepage (if defined in the @homepageURL in the UserCSS metadata).
This icon is not seen when a style was created in the editor page; but may be added if a UserCSS was created with an @homepageURL metadata entry.
Clicking the delete icon (
) will delete the entry. A dialog will open to confirm the action.
This icon is always seen.
Clicking on the check for update icon (
) will manually check the selected style for updates.
The icon will change depending on the state of the style
| State | Message | Screenshot |
|---|---|---|
| Up to date | Style is up to date |  |
| Update available | Install update |  |
| Edited locally | This style was edited locally. Forcing an update will overwrite any local edits. |  |
| Complete | Update completed |  |
This icon is not seen if a style was created in the editor page.
Clicking on the UserCSS settings icon (
) will open a dialog containing customizable settings enabled by the UserCSS author.
UserCSS options may include a color picker, select dropdown, toggle switch or text input. These settings are dependent on the UserCSS author's settings provided to you.
Some UserCSS styles may not have any settings, and therefore this icon would not appear.
This column shows all of the domain, url, url-prefix and regular expression entries where the style will apply.
The visible number of entries is limited to the Number of applies-to items setting, plus one if there are more entries. The last entry is a button containing an ellipsis (...).
Clicking on the ellipsis button will toggle the view of applies to entries showing all, or the set limit of entries.
Screenshot
