Help:TemplateStyles/examples

Expand Me

Advantage over inline CSS

The content below is styled using TemplateStyles :

The Zebra	Looks	Really	good
and	cute	With	lots
of stripes	That make	a horse	Jealous

The Zebra	Looks	Really	good
and	cute	With	lots
of stripes	That make	a horse	Jealous

The two tables were created by putting {{Stylish}} in the source code for the page. In this example, both tables display the same content, but are styled differently. The wikitext transcluded from Template:Stylish when {{Stylish}} is used in a page's source begins with a <templatestyles> tag.

Written as <templatestyles src="Template:Stylish/styles.css" />, that tag creates a reference to the stylesheet Template:Stylish/styles.css.

In that stylesheet, the classes column-demo and zebra are defined.

The template's code contains two copies of the information for a table formatted using the wikitext markup found at Help:Tables#Wiki table markup summary, neither copy with any styling information.

For the table on the left, the markup begins with {| class="column-demo", and for the right, {| class="zebra". Apart from this, the code for the tables is identical.

Despite those classes being undefined in the template's code, because the code references a CSS stylesheet with definitions for them, the code for those classes in the stylesheet is used. The classes give them their colors and set their alignment.

The code for those two classes uses the :nth-child() pseudo-class to style separate rows differently - :nth-child() cannot be used in inline CSS (i.e. it only works in code referenced from a stylesheet). For security reasons, CSS on most Wikimedia wikis is not true CSS - rather, it is a feature of wikitext with a subset of all possible CSS properties, and will usually only allow "external" stylesheet references to wiki-hosted stylesheets with the "sanitized-CSS" content model - this is set automatically in some namespaces, but otherwise must be done manually by an administrator.

Responsive templates

Another good use case is making templates responsive. "Responsive", in this case, means that elements dynamically grow, shrink, move around or become hidden depending on a device's features, such as height or width. Template:ResponsiveAmbox is a modified version of Template:Ambox that uses Template:ResponsiveAmbox/styles.css. The styles will hide the image to the left if the browser window is narrow enough. Here's an example:

Just like with the previous example, this cannot be done using inline styles.

Help:TemplateStyles/examples

Advantage over inline CSS

Responsive templates

See also