Skip to content

Options

Jump to bottom
Rob Garrison edited this page Aug 23, 2018 · 17 revisions

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

This is a Chrome only option.

In the current version 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, the HTML tag within the iframe will have an attribute of stylus-iframe set to the URL of the site which includes the iframe.

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.

  • (Required) Ctrl, Command or Alt.

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

  • (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

Firefox

A popup overlaying the options will open

Key Combinations (source external link):

  • (Required; except for function keys) Ctrl (or Command), or Alt

  • (Optional) Include Shift modifier or any one of Ctrl, Alt, Command and MacCtrl, which has not been used as the main modifier.

  • (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)

Home

Clone this wiki locally