Skip to content

Options

Jump to bottom
tophf edited this page Aug 16, 2021 · 17 revisions

Contents

Opening the options

Open Stylus' options in the a) popup or b) manager or b) in the right-click menu on the extension icon in the toolbar:

  • Stylus Popup

  • Stylus Manager

Option settings

All screenshots show the default options in Chrome:

Screenshot

stylus-options

Toolbar icon

toolbar-icon

Choose between the dark (default setting) or light set of icons based on your browser theme.

The three icons shown correspond to enabled, no styles and all disabled states. The "all disabled" icon is shown when the popup "Turn all styles off" checkbox is set.

  Enabled No styles All disabled
Dark
Light

Badge on the toolbar icon

badge

The badge shows how many styles are currently active on the page. When no styles are applied, the badge is not shown.

Enabled All Disabled

Number of styles active for the current site

Enable or Disable the badge.

This option is enabled by default.

Background color †

The background color seen when the badge is enabled, and the site has one or more enabled styles.

Background color when disabled †

The background color seen when "Turn all styles off" is active.

† Clicking on either of the background color buttons opens an OS specific color picker. If you have a specific color in mind, make sure to have the RGB or HSL values available. This picker, at least in Windows, does not accept a hex color value.

Popup

popup

Popup width (in pixels)

Set the pixel width of the popup window. The value can be set anywhere from 200 to 800 pixels in width.

With a wider popup, longer style names will be more readable; hovering over the title will show a tooltip of the style's full name.

The default width is 246 (px).

Open editor in a new window

Setting this option will always open the style editor in a new window.

Doing this will allow a user to edit the style in one window and immediately see the results in the other window.

This option is disabled by default.

Styles before commands

The command block contains the "Turn all styles off" label and checkbox, "Find styles" link, "Write style for" link and command buttons (Manage, Options & Wiki).

If this option is set, all styles belonging to the current page will be shown above the command block. Otherwise the command block will be at the top of the popup.

This option is enabled by default (i.e., the command block is at the bottom).

Add white border on the sides

In versions of Stylus greater than 1.5.6, this option will only be seen in Chrome browsers between v61 (Sept 2017) and v74 (Feb 2019).

In those versions of Chrome, an unstylable white border will appear above and below the popup. If you apply a style to the Stylus extension, this border may not be aesthetically pleasing. This option adds a white border to either side of the popup.

This option is disabled by default.

Updates

updates

Set the interval value to the number of hours to check the installed styles for updates.

While updating:

  • A usercss style with an @updateURL meta value will have that set url checked, unless the style was installed locally (from a file:// url) for testing.
  • Or, the style's original install location will be checked.

Set the interval to zero (0) to disable updating of all styles.

There is no maximum interval limitation set on this option (e.g. set it to 1000000 if you want).

The default setting is 24 hours.

Advanced

advanced

Expose iframes via HTML[stylus-iframe]

When enabled, the top site domain is exposed within each iframe. This allows the writing of iframe-specific CSS like this:

html[stylus-iframe*="twitter.com"] h1 {
  display:none;
}

In other words, because the parent page (e.g. https://twitter.com) css cannot target any elements within the iframe, this method allows targeting the element from within the iframe.

The HTML tag within the iframe will have an attribute of stylus-iframe set to the URL of the site which includes the iframe.

<!-- iframe embedded on twitter.com -->
<html stylus-iframe="https://twitter.com">
  <head></head>
  <body>
    <h1>Header to hide</h1>
  </body>
  <!-- style injected by Stylus -->
  <style id="stylus-99" type="text/css" class="stylus">
  html[stylus-iframe*="twitter.com"] h1 {
    display:none;
  }
  </style>
</html>

If the iframe is embedded from another domain, you'll need to include a specific @-moz-document to target the iframe's domain as well:

/* Main target of the userstyle - darken an anime site */
@-moz-document domain("my-favorite-anime-site.com") {
  body {
    background: #000 !important;
    color: #ddd !important;
  }
}

/* Only target the chat-app when it's embedded on the anime site */
@-moz-document domain("chat-app.com") {
  html[stylus-iframe*="my-favorite-anime-site.com"] body {
    background: #000 !important;
    color: #ddd !important;
  }
}

This option is disabled by default.

Add 'Delete' in editor context menu

If enabled, right-clicking selected text within the editor will show a "Delete" option within the context menu.

This option is enabled by default.

Actions

actions

These action buttons are in the footer of the option settings.

Reset options

Reset all Stylus settings to their default value.

Manage styles

Open the style manager page in a new tab.

Update styles

Force an update of all installed styles.

Using this action will check all styles for updates using the same function that autoupdate styles. This will also reset the autoupdate interval timer.

Shortcuts

Allows setting the browser shortcut keys to:

  • Open the popup (Activate the extension).
  • Open the style manager.
  • Toggle turning all styles off.

Chrome

The browser will navigate to chrome://extensions/shortcuts.

Key Combinations (source external link).

Enter a key or combination of keys (e.g. Ctrl+Shift+Z) to activate the shortcut.

If a key combination is already used by the browser (for example, Ctrl+P), or by an existing add-on, then you can't override it. You will be allowed to define it, but it won't perform the Stylus action when used.

  1. (Required) Ctrl, Command or Alt.

  2. (Optional) Include Shift modifier; other modifiers are not allowed.

  3. (Required) Include a supported key:

    • A through Z, 0 through 9
    • Comma, Period, Home, End, PageUp, PageDown, Space, Insert, Delete
    • Arrow keys (Up, Down, Left, Right)
    • Media Keys‡ (MediaNextTrack, MediaPlayPause, MediaPrevTrack, MediaStop).

    ‡ Modifiers (Ctrl, Alt or Shift) are not allowed in combination with Media Keys

Modern Firefox

There's a built-in native UI.

image

  1. Open about:addons (CtrlShiftA on PC)
  2. click the small gear icon in the top right corner
  3. click Manage extension shortcuts

Old Firefox

A popup overlaying the options will open

Key Combinations (source external link):

  1. (Required; except for function keys) Ctrl (or Command), or Alt
  2. (Optional) Include Shift modifier or any one of Ctrl, Alt, Command and MacCtrl, which has not been used as the main modifier.
  3. (Required) Include a supported key:
    • A through Z, 0 through 9
    • F1 through F12
    • Comma, Period, Home, End, PageUp, PageDown, Space, Insert, Delete
    • Arrow keys (Up, Down, Left, Right)

Note: Although the sequence in which you are pushing the modifier keys is arbitrary, the order in the options input field is not. According to item 1, Shift+Alt+S is invalid whereas Alt+Shift+S is a valid input value.

Home

Clone this wiki locally