userstyles.org - Posting user styles

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:

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 options chosen affect the CSS provided to the user. Uses of settings include:

Style settings can change a single value in your CSS or change entire blocks of code.

Types of settings

Depending on the type of setting you choose, the user may be presented with pre-defined options of your choosing or be asked to provide a specific kind of value. The types of settings are:

Editing settings

On the edit screen, you can add, edit, delete, and move settings and options. The attributes of settings are:

The attributes of options are:

Setting install keys must be unique. Option install keys must be unique within a setting.

Placeholders

The placeholder is the location in your CSS where the option's value is inserted. It is defined with a specially-formatted comment containing the associated setting's install key.

For a setting with an install key of "font" with two options with values "Times New Roman" and "Helvetica", the CSS you provide would look like this:

div {
	font-face: "/*[[font]]*/" !important;
}

Which, depending on the user's selection, will result in either:

div {
	font-face: "Times New Roman" !important;
}

Or:

div {
	font-face: "Helvetica" !important;
}

Placeholders can be include inside other options, effectively nesting options. Only two levels of nesting is supported.

Updating

(Stylish does not yet support updating styles with settings, but will soon...)

When the user installs your style, Stylish will record the install keys of the settings and options the user chose. If you subsequently delete or rename install keys, anyone who chose the options with those install keys will not be update the style. Changing labels or values, reordering settings and options, and adding new options will still allow users to update.

In other words, try to maintain your install keys when you change your style, if possible.

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:

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.

Advertisement