Posting user styles - userstyles.org

Writing styles requires a working knowledge of CSS. If you don't know CSS, there are many tutorials available online. It may also be helpful to inspect the source of other styles to see how things work.

To post new styles on userstyles.org, you will have to create a user account. Once logged in, you'll see a Create new style link on your user home page.

For help with writing styles, see the wiki. Topics not specifically about writing user styles, but about posting styles to userstyles.org are covered below.

Limits on user styles

Styles are limited in a few ways:

Maximum size is 100,000 bytes. Exemptions are possible by contacting me, I won't grant exemptions if you're using embedded images.
No @import directives. If an @import is done to a slow-loading server, it will cause browser hangs.
No XBL due to potential security issues.
There are various checks done to determine if the posted code is valid CSS. While the code is not actually validated, it does check that the number of braces match. These checks can sometimes be confused by commented out code.

Getting a better editor inside Stylish for Firefox

You can use It's All Text! to integrate Stylish's code editor with an external editor of your choice.

Sharing user styles

The best way to share user styles is to post them to this site. Doing this makes it easy for others to find and install your styles and lets them easily receive updates should you change your style.

An alternate way is to provide put your code in a CSS file and host it somewhere. This will still allow for updates, but there won't be an easy button for users to click to install, and they will have to provide a name for the style themselves.

A final way is to simply provide the code and make users copy and paste it into Stylish. No updates are possible this way.

Deleting user styles off of userstyles.org

To delete a style off the site, go to the edit screen, then click the link for deleting. There is no way to truly delete a style; rather, the style no longer shows up in search results, and a large warning is displayed to anyone accessing it directly. This is so that previous users of the style know what happened to it. Please do not "blank out" the style instead of deleting.

Style settings

Style settings let you give users options for installing your style. The easiest way to explain is with an example.

Here is the code:

* {
	color: /*[[mycolor]]*/;
	font-face: /*[[myfont]]*/;
}

Here is what you define as the settings

A style setting form showing two settings. The first's label is 'Choose your color' and the placeholder is 'mycolor'. The second's label is 'Choose your font' and the placeholder is 'myfont'. The second has two options defined, one for serif and one for sans-serif.

The first input for each setting is displayed to the user. The second input matches the placeholder in your code. The indented lines after the second setting define the valid options for that setting.

This will show the user this UI:

If the user selected "#FFFFFF" for the color and "Sans-serif" for the font, they would receive this code:

* {
	color: #FFFFFF;
	font-face: Times New Roman, serif;
}

There are three types of settings. Text settings are the most versatile and can be used with anything - even whole code blocks. Color settings let the user pick a color from a color chooser; you do not give them predefined values. Image settings let you define certain images, but allow the user to provide their own.

Styles with style settings are not updatable by Stylish.

Format of style descriptions

Some HTML is allowed in style descriptions. You can use these tags, with allowed attributes in parentheses: a (href), abbr (title), b, blockquote (cite), br, cite, code, dd, dfn (title), dl, dt, em, i, kbd, li, mark, ol, p, pre, q (cite), s, samp, small, strike, strong, sub, sup, time (datetime, pubdate), u, ul, var.

Additionally, you can create links automatically by:

Writing "style 1" (without quotes) - will create a link to the style with ID 1.
Writing "user 1" (without quotes) - will create a link to the user with ID 1.
Writing a URL - will create a link to that URL.

Screenshots

Screenshots are an important way to show to others what your style does. There are two ways to specify a screenshot.

Automatic screenshots

Automatically generating screenshots is recommended for styles that affect webpages in a way that is very obvious visually. The screenshot will consist of the first screenful of the page.

The URL visited to generate the screenshot will be determined based on the @-moz-document rules in the CSS. This URL will not always be a valid URL for the site. You can specify a different URL by providing an example URL on the edit page. The URL must be accessible from North America. The URL must not require a login, except for Facebook, GMail, Tumblr, and Orkut (a test account will be used with these services).

Generating the screenshot will take a few days. The screenshot will be periodically updated by the site.

Manual screenshots

Providing your own screenshot is recommended for cases where automatic screenshots are not suitable. These include subtle changes, changes to sites that require logins, changes to sites that are not visible in the first screenful, and changes to the Firefox UI.