Coding user styles

To write user styles, you need to have knowledge of CSS. User styles rely on support for CSS of the application that uses them, so just because a user style works in Firefox doesn't mean it'll work in other applications.

Creating selectors for sites

Writing user styles is different than writing CSS when developing a site because you're not in control of the HTML. You will have to write selectors that use what's available in the document. This usually means using the available classes and IDs.

Some sites have very complicated layouts that involve tables or few classes or IDs. To style this kind of site, you'll have to make use of attribute and positional selectors.

Attribute selectors select based on the attributes an element has. If a table cell is <td colspan="2">, you can use td[colspan=2] to select this column.

Positional selectors select based on the position of an element. If you want to select the first row of a table, you can do table > tr:first-child. To select the third row, table > tr:first-child + tr + tr.

Other selectors may come in useful, see CSS 3 attribute selectors.

Overriding sites' existing styles

Often rather than adding new styles, you need to override existing styles. To ensure that your style will override the site's style, add !important at the end of every value.

#example { color: blue !important }

Making user styles specific to a site

To make a user style only apply to certain sites, you can use -moz-document rules. The rules types available are url, url-prefix, and domain.

@-moz-document domain('images.example.com'), url-prefix('http://example.com/images') {
	/* 
		the code in here only apply to:
			-pages on the domain images.google.com
			-pages whose URLs start with http://example.com/images
	*/
}

Rather than writing this each time, you can get Stylish to automatically generate code for a certain site. When you're on the site, click the Stylish icon, click Write new style, then choose For this URL or For example.com.

When using these rules, you should keep in mind the same site can sometimes be accessed in many ways - http://example.com, http://www.example.com, https://example.com, http://example.co.uk.

There is no way to put wildcards in the values, and there is no way to select everything except a certain site.

Making user styles for a Mozilla-based program's user interface

Mozilla-based user interfaces are written in XUL, which is a flavour of XML. You can write the same kind of code to affect the user interface as you would any other page. Since the source is more difficult to access, tools such as DOM Inspector are useful.

To limit a style to the program (and not affect web sites), you can use the -moz-document rule to only affect chrome protocol pages. The chrome protocol is used for all the interface UI.

@-moz-document url-prefix('chrome://') {
	/*
		the code in here only apply to the program's user interface, not web sites
	*/
}

There is currently no way to make user styles for a non-Mozilla-based program's user interface.

Namespaces

XML namespaces are what allow different flavours of XML to have the same elements and attributes but mean different things. One example is label - both HTML and XUL define elements named label, but they're different things.

CSS understands XML namespaces. You can define namespaces for your styles.

@namespace html url(http://www.w3.org/1999/xhtml);
@namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

html|label { /* this will affect HTML labels */ }
xul|label { /* this will affect XUL labels */ }
label { /* this will affect labels of any type */ }

You can define a certain namespace as the default to use for all element selectors. Stylish's editor's Insert drop down includes options to insert these codes.

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

label { /* this will affect only XUL labels */ }

Replacing images in <img> tags

While replacing background images is easy with CSS, replacing images created with <img> tags is not. You need to do the following trick to switch <img> tag images.

#yourSelectorHere {
	height: 0 !important;
	width: 0 !important;
	/* these numbers match the new image's dimensions */
	padding-left: 125px !important;
	padding-top: 25px !important;
	background: url(http://example.com/your/image/here) no-repeat !important;
}

Embedding images in user styles

If your styles require images, it's often useful to embed the images inside the styles. Doing so eliminates the delay in downloading the image from a server and makes it so that anyone can just install the file without placing additional images on their machines.

data URIs can be used to embed images in styles. These URIs include encoded data about the image, so are very long. To generate data URIs, from the Stylish edit dialog, choose Insert, Data URI, then choose the file you wish to embed.

Getting a better editor inside Stylish

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

You can also use Diavolo to have syntax highlighting with Stylish's editor, but it's buggy.

Sharing user styles

The best way to share user styles is to post them to userstyles.org. 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.