Editor
- Click on the userstyle name.
- Ctrl+click on the userstyle name to open the editor in a new tab.
- Shift+click on the userstyle name to open the editor in a new window.
- Click on the pencil icon.
- Ctrl+Click on the userstyle name.
- Right-click on the userstyle name.
- Check or uncheck the "as Usercss" checkbox to set the editor mode.
- Click on the "Write new style" button in the side bar.
- Click on a portion of the link below the "Write style for:" label.
- The link is separated by domain, subdomain and path. Clicking on that portion of the url will add the
@-moz-documentselector shown in the tooltip.
CodeMirror is the editor being used. It was set up with two different modes depending on the type of userstyle being edited. And each mode has some differences:
- Classic userstyle mode.
- Includes Mozilla Format section in the sidebar.
- Each
@-moz-documenthas a separate section. - The 'applies to' widget between sections has additional actions.
- UserCSS mode.
- No Mozilla Format section.
- No sections. The entire style can be copy/pasted as one block.
- Additional "Display 'Applies to' info" option to toggle the view of the 'applies to' line widget.
There is no current method to switch back and forth between these two modes, but you can use a combination of copy/pasting and Mozilla format importing/exporting.
UserCSS to plain CSS
- Copy the style block immediately after the metadata block.
- Close the editor.
- Click "Write new style" with the "as Usercss" unchecked (a non UserCSS style).
- Paste the style into the editor - a "Paste the Mozilla-format code" popup will open.
- Click "Overwrite style".
- Type in a name & save.
Plain CSS to UserCSS
- Click the "Export" Mozilla Format button.
- Copy the style to the clipboard.
- Go back to the manage page.
- Click "Write new style" with the "as Usercss" checked.
- Append the plain CSS style.
- Remove the empty example entry.
- Modify the
@nameentry. - Save.
All screenshots show the default options set:
Editor modes
| Plain CSS | UserCSS |
|---|---|
 |
 |
In plain userstyle mode, the style name is added & edited within the name input.
In UserCSS mode, the style name input is disabled. The style name is set from the UserCSS @name metadata entry.
This checkbox allows toggling the overall state of the style. On or off. Altering the checkbox has no effect until the style is saved.
This option is not available upon creating a new style. Once the style has been saved, this option appears.
When active, the live preview method will apply the style to the affected page while actively editing the CSS in the editor. This mode does not automatically save the modifications, so leaving the editor will prompt you to save the updated style.
An alert icon will become visible next to the live preview label if there are any parsing errors. Click on it to open a popup showing the issue.
Live preview parsing error
Action button to save the modified style. It becomes disabled if the style was not modified to any changes were undone.
Once saved, all pages effected by the style will be automatically updated.
Once this button is clicked, the style will be beautified by re-indenting and applying the selected formatting rules.
A popup will appear (defaults shown)
Every select dropdown has two options, a space or \n (symbol for a carriage return). Modifying these dropdowns will automatically apply the changes to the style in the editor.
Preserve new lines, when enabled, will prevent removal of any extra carriage returns within the style, e.g. double carriage returns between certain blocks of CSS will be maintained.
Indent @media, @supports, when enabled, will indent the style within these blocks. Without this enabled, the code within the blocks will be indented to the same level as the wrapper.
Close the popup and keep the beautify changes, if any.
Undo will revert the beautification, but it will not close the popup. To reapply the beautification, alter one of the options in the popup.
Closes the editor and prompts you if the page was modified and not saved. Then goes back to the manage page.
This section is only visible when the editor is in plain userstyle mode.
This section is required because in plain userstyle mode, the @-moz-document wrappers are not visible within the editor. Adding these document rules is accomplished using the 'applies to' block at the bottom of every section. In order to preserve these rules, importing & exporting of the Mozilla format is necessary.
Clicking on the information icon (
) shows the following message: The Mozilla format of the code can be submitted to userstyles.org and used with the classic Stylish for Firefox.
- Clicking "Import" will open a "Paste the Mozilla-format code" popup window.
- Paste in the full userstyle, which includes
@-moz-documentsections into the editor. - Use the "Overwrite style" button to replace any style currently within the editor with the newly pasted in style.
- Use the "Append to style" button to add the newly pasted in style to the end of the style currently in the editor.
- Clicking "Export" will open a "Style in Mozilla format" popup window.
- All content will be initially selected.
- Copy the content using (Ctrl or ⌘) + c (depending on the keymap) or right-click and select copy.
- Paste the style elsewhere.
When enabled, lines are wrapped at the screen edge. If disabled, no wrapping occurs and a horizontal scrollbar is necessary to view all the code.
When enabled, CodeMirror will use the context-sensitive indentation that the mode provides (or just indent the same as the line before).
When enabled, smart indentation is added as a tab instead of the number of spaces as set by the "Tab size" option.
CodeMirror will auto-close brackets and quotes when typed. By default, it'll auto-close ()[]{}''""
When enabled, show autocomplete hints.
When enabled, double-clicking will include tokens, e.g. clicking on #bada55 will select the hash (#) and the hex color (bada55). If disabled, only the hex color will be selected.
When enabled, a clickable color swatch will appear next to every color definition. Clicking or using the defined shortcut key – click the configuration icon (
) next to the label to open the popup – will allow choosing a color.
See the Colorpicker wiki page for more details on how to use the popup & set the shortcut key.
This option is only visible when the editor is in UserCSS mode.
When enabled, an "Applies to" line widget is visible above each @-moz-document block within the style. If disabled, the editor will not show any line widgets and appears to contain one uninterrupted style.
Sets the width of a tab character. Defaults to 4 spaces.
Set the desired hotkey mapping. Click on the info icon () to open a searchable keymap list.
Keymap popup
Select the syntax highlighting theme to be applied to the editor.
Control the automatic highlighting of current word/selection occurrences in the style editor. The occurrences will highlight within the scrollbar.
- Token under cursor - Highlight the occurrences of the word/token under cursor even if nothing is selected.
- Selection only - Highlight the occurrences of the currently selected text.
- Disabled - Disable highlighting.
Switch between or disable all linters.
- CSSLint - Reports syntax linting issues. Meaning it performs an analysis of the style. It does basic syntax checking and it applies a set of rules that can look for problematic patterns or signs of inefficiency. This linter cannot check Stylus language or LESS CSS syntaxes.
- Stylelint - Uses rules to catch errors, apply limits and enforce stylistic conventions. This linter can check LESS and other SugarSS CSS-like syntaxes. Our inclusion of Stylus language support may not be fully supported by this linter.
- Disabled - Disable all syntax linting. Parsing errors will still be reported if live preview is enabled.
Click the configuration icon () next to the dropdown to open the currently selected linter's rule configuration popup.
linter config popup
The default rule set contains a minimal set of enabled rules. Modify the settings keeping in mind that the editor must contain valid JSON before it can be saved. A link to the full set rules for the selected linter will also be available within the popup.
The issues section will only appear if the CSS Linter is not disabled.
- The issues header includes the number of reported linting errors.
- Next to the header is an information icon (). Clicking on it will open an "Issues popup" (shown in the screenshot). The popup contains a link to all the rules supported by the current linter, and links to specific rules with a reported error.
- The Code # header reports which block of CSS (relevant only to the plain CSS mode).
- A red x or yellow warning sign will appear reporting the set severity (by the config) of the linting issue.
- Next to the icon will be the line number where the issue occurred.
- Followed by the reported issue. The issue message may be truncated, but hovering over the issue will show the full text.
- Clicking on the issue will scroll the editor window and highlight the line where the issue occurs.
- Within the editor, the same issue icon will appear on the line. Hovering over the icon will report the same error message.
Based on the number of @-moz-document entries, there will be the same number of independent editor windows open. Meaning you will not be able to select all of the CSS for the style unless the Mozilla format export button is used.
An "Applies to" block will appear after every editor.
-
Select the
@-moz-document
rule to apply:-
URL (
url()) matches an exact URL. -
URLs starting with (
url-prefix()) matches if the document URL starts with the value provided. -
URLs on the domain (
domain()) matches if the document URL is on the domain provided (or a subdomain of it). -
URLs matching the regexp (
regexp()) matches if the document URL is matched by the regular expression provided. The expression must match the entire URL. Make sure to escape special characters as needed using two backslashes (.becomes\\.)
-
URL (
-
Enter the URL, partial URL or regular expression in the input next to the dropdown. For more detailed info see our wiki on writing styles.
-
Use the
-button to delete the entry. Deleting the last entry will hide the dropdown & input and show "Everything". Meaning the style will be applied to every page.
-
Use the
+button to add a new dropdown & input to include even more URLs or regular expressions.
-
Add another section When only one section is open, this button is visible. Clicking on it will add a new editor instance and applies to block.
-
Clone when clicked will duplicate the style and all entries of the applies to block.
-
Beautify when clicked will apply the same stylistic formatting as the global beautify except only to the specific section.
-
Remove section is visible with more than one section is active in the userstyle. Clicking it will remove the section above the button and the applies to block.
-
Add performs the same actions as "Add another section" but is only visible when more than one section is active.
-
Up and Down arrows will move the selected section before or after the surrounding sections, respectively.
-
Restore removed section button is only visible after removing a section allowing you to undo the last action. Hovering over the button will show a short preview of the CSS contained in the section that was removed.
Right-clicking (or use Ctrl or ⌘ + v depending on the keymap) and pasting CSS that contains a @-moz-document wrapper into any editor section will open a "Paste the Mozilla-format code" popup.
Paste Mozilla-format popup
Use Overwrite style to replace all the current CSS in the editor with the newly pasted in code, or use Append to style to add a new section with the pasted in code added to the end of the current style.
In this mode, there will only be one instance of the editor. In this case, you will be able to select all of the CSS for the style to copy & paste it elsewhere.
An "Applies to" block will appear before every @-moz-document block.
- Select the
@-moz-document rule to apply:
-
URL (
url()) matches an exact URL. -
URLs starting with (
url-prefix()) matches if the document URL starts with the value provided. -
URLs on the domain (
domain()) matches if the document URL is on the domain provided (or a subdomain of it). -
URLs matching the regexp (
regexp()) matches if the document URL is matched by the regular expression provided. The expression must match the entire URL. Make sure to escape special characters as needed using two backslashes (.becomes\\.)
-
URL (
- Enter the URL, partial URL or regular expression in the input next to the dropdown. For more detailed info see our wiki on writing styles.
- Use the
-button to delete the entry. Deleting the last entry will show a popup stating that you cannot remove the last 'applies to' entry. To make the style apply to every page, remove the@-moz-documentwrapper. - Use the
+button to add a new dropdown & input to include even more URLs or regular expressions.
Right-clicking (or use Ctrl or ⌘ + v depending on the keymap) and pasting CSS that contains a @-moz-document wrapper into the editor while in UserCSS mode will paste the CSS at the current cursor position and add a new applies to block above it the wrapper.