Skip to content
Rob Garrison edited this page Dec 2, 2017 · 27 revisions

Opening the popup

Chrome & Opera

  1. Click on the Stylus extension icon to open the popup on the current page.
  2. Use your defined keyboard shortcut. To add a shortcut:
    • Open the "Keyboard Shortcuts for Extensions and Apps"
      • Chrome: The "Keyboard shortcuts" link is at the bottom of the chrome://extensions/ page.
      • Opera: The "Extension keyboard shortcuts" button is at the top of the extensions page.
      • Click on the "shortcuts" button in the Stylus options panel.
      • Click the "Shortcuts" button in Stylus' popup.
    • Modify the "Activate the extension shortcut" entry.

Firefox

  1. Click on the Stylus addon icon to open the popup on the current page.

Closing the popup

  • Press Esc.
  • Click anywhere inside the current browser window.
  • Change browser tabs.

Options

Open Stylus' options by clicking on the option link (or button in Firefox) from the extensions page, or in Stylus' popup:

  • Chrome

    options-chrome-extensions

  • Firefox: about:addons

    options-firefox-addons

  • Stylus 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.

The default setting is off.

Styles before commands

The command block contains the "Turn all styles off" label and checkbox, "Find more styles..." link, "Write style for:" link and command buttons (manage, options & shortcuts).

When set this option is set, all styles pertaining to the current page will be shown above the command block. Otherwise, when this option is disabled, the command block will be at the top of the popup.

The default setting is on (the command block is at the bottom).

Add white border on the sides

This is a Chrome (webkit) 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 asthetically pleasing. This option adds a white border to either side of the popup

Default is off.

Interface

popup-final

  1. Stylus Toolbar button - Opens popup and shows number of active styles on the current page
  2. Activate style - Click to toggle the style on or off.
  3. Style title.
  4. Edit style - Opens the style editor.
  5. Delete style - A confirmation will open before deletion.
  6. Toggle style hotkey - Press the number of the style on the keyboard to toggle the style on or off. Click to reveal more details. See keyboard shortcuts section below.
  7. Toggle all styles - Click to toggle all styles on or off.
  8. Find more styles - Open a link to userstyles.org to find more styles for the current page.
  9. Write a style - Click sections of the link to create a new style or the specific domain, folder or page.
  10. Manage - Open Stylus' manage styles page.
  11. Options - Open the browser's built-in extension options page.
  12. Shortcut - Open the browser's built-in keyboard shortcuts page.

Keyboard Shortcuts

With the popup open and focused (Press Tab in Firefox), press the following keys on your physical keyboard to perform an action:

  • 1 - 9, 0 (including numpad) - Toggle the Nth style (0 is 10).
  • A - Z - Toggle the first style with a name beginning with the pressed letter.
  • Shift + Number or Letter - Opens the editor, instead of toggling, for the targeted style.
  • Numpad + (plus) - Enables all listed styles.
  • Numpad - (minus) - Disables all listed styles.
  • Numpad * (times) or ` (backtick) - Toggles initially enabled styles.
    • The toggling doesn't apply to subsequently enabled styles while the popup is open.
    • This allows you to restore the initial selection of enabled and disabled styles after testing a style.
    • For example, if you disable all styles using Numpad -, the initial settings of enabled and disabled styles can be restored by pressing Numpad *
Clone this wiki locally