Popup

Contents

• Opening the popup
  • Chrome & Opera
  • Firefox
• Closing the popup
• Options
  • Opening the options
  • Option settings
    • Popup width (in pixels)
    • Open editor in a new window
    • Styles before commands
    • Add white border on the sides
• Interface
• Keyboard Shortcuts

Opening the popup

Chrome & Opera

• Click on the Stylus extension icon to open the popup on the current page.
• Use your defined keyboard shortcut. To add a shortcut:
  1. 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.
  2. Modify the "Activate the extension shortcut" entry.

Firefox

• Click on the Stylus addon icon to open the popup on the current page.
• Use your defined keyboard shortcut. You can define them in the options.

Closing the popup

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

Options

Opening the options

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

• Chrome: chrome://extensions/

• Firefox: about:addons

• Stylus Popup

Option settings

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 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.
The default setting is "on" (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. Default is "off".

Interface

Element	Function
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	Click to toggle the style on or off. Right-click or Wheel-click to open in editor.
4. Config from homepage	Links to homepage where the style can be configured.
5. Config Usercss	Opens a usercss configuration modal within the popup.
6. Edit style	Opens the style editor.
7. Delete style	A confirmation will open before deletion.
8. 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.
9. Toggle all styles	Click to toggle all styles on or off.
10. Find styles	If "inline" is checked, popular themes from userstyles.org will appear below the command block. If "inline" is not checked, the link will open a page on userstyles.org to show styles for the current page.
11. Write a style	Click sections of the link to create a new style or the specific domain, folder or page.
12. Manage	Open Stylus' manage styles page.
13. Options	Open the browser's built-in extension options page.
14. Wiki	Open the Stylus wiki for help.

Keyboard Shortcuts

There are some handy shortcuts specifically for the opened popup. Press the following keys on your physical keyboard to perform an action:

• 0 - 9 (including numpad) - Toggle the n-th 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 *