WP:TemplateStyles

This page documents an English Wikipedia editing guideline.

It is a generally accepted standard that editors should attempt to follow, though it is best treated with common sense, and occasional exceptions may apply. Any substantive edit to this page should reflect consensus. When in doubt, discuss first on the talk page.

TemplateStyles allow custom CSS pages to be used to style content without an administrator having to edit sitewide CSS. TemplateStyles make it more convenient for editors to style templates; for example, those templates for which the sitewide CSS for the mobile skin or another skin (e.g. Timeless) currently negatively affects the display of the template.

Guidelines

The style must apply only to the associated template's output. It may also apply to highly-relevant nearby wikitext where the template is used. (For example, there are many table templates which should have TemplateStyles which are provided entirely in templates, or which may provide a legend to a wikitext table.) It would otherwise be confusing if adding a template to one part of a page were to completely or partially change the display or styling of an unrelated part of the page.
Style pages should be associated with a specific template or group of templates, and named accordingly. This allows style pages to be easily identified and edited. In general, this means that a style page should be a subpage of the related template, e.g.: Template:Mxt is only for examples of style and formatting. Do not use it in actual articles. or Template:Mxt is only for examples of style and formatting. Do not use it in actual articles., but not Template:!mxt is only for examples of style and formatting. Do not use it in actual articles. nor Template:!mxt is only for examples of style and formatting. Do not use it in actual articles..
Generally follow the Mediawiki coding conventions for CSS. Some specifics:
- Use selectors that are highly likely to be unique to the template being used. This reduces the chance of conflicting CSS rules arising accidentally. Examples: Use Template:Mxt is only for examples of style and formatting. Do not use it in actual articles. rather than Template:!mxt is only for examples of style and formatting. Do not use it in actual articles. or Template:Mxt is only for examples of style and formatting. Do not use it in actual articles. rather than Template:!mxt is only for examples of style and formatting. Do not use it in actual articles..
- Avoid using Template:!mxt is only for examples of style and formatting. Do not use it in actual articles. per the conventions. HTML IDs are supposed to be unique on a page. Templates are rarely used uniquely, and those that are initially single-use-per-page are often later used in unanticipated ways. Use classes instead of IDs for styling.
- Avoid using Template:!mxt is only for examples of style and formatting. Do not use it in actual articles. per the conventions, except in mobile views to override style input from the associated template.
In templates intended to be substituted, use inline CSS instead of TemplateStyles. Substituting a template which uses TemplateStyles leaves the <templatestyles /> tag in the resulting code, which may be confusing and negates many of the benefits of using TemplateStyles in the first place.
Images that do not require attribution (i.e. those in the public domain) are the only images that may be used as background images. For normal file usage, attribution is provided on the file description page, accessed by clicking the image. This is not possible if the image is being used as the background.
The protection level of style pages should match that of their associated template. If a template is high-risk, then its styles are also high-risk, and should have the same protection. If a template is not high-risk, then vandalism to cause chaos could be achieved just by editing the template itself. A higher protection level for the style page would encourage editors to add inline styles to the template, since the template would be editable but the style page would not.

Note that the Manual of Style, including the Accessibility guidelines, still applies.

Workflow for conversion

In Template:Mxt is only for examples of style and formatting. Do not use it in actual articles., identify all of the inline styles that can be moved to a separate stylesheet.
Create Template:Mxt is only for examples of style and formatting. Do not use it in actual articles. containing all the classes that will replace the inline styles. Use template-specific class names where possible.
In Template:Mxt is only for examples of style and formatting. Do not use it in actual articles. (or its Template:Mxt is only for examples of style and formatting. Do not use it in actual articles. if you want to test first), add <templatestyles src="myTemplate/styles.css" /> (you don't need to specify the Template: namespace). It's probably best at the top so that it is obvious and to avoid a flash of unstyled content, but it will need to be on its own line if the template begins with wiki markup that has to start on a new line (e.g. wiki-table).
Amend the template (or sandbox) to replace the inline styles with the classes you defined in Template:Mxt is only for examples of style and formatting. Do not use it in actual articles.
Do as much checking as you can. If you tested in the sandbox you can check the testcases page where it exists, but specifically check that the styles you affected render properly.
1. Specifically, for templates meant to be used inline, check to see if there are uses inside of links. TemplateStyles templates will not work inside links (right now).
If you used the sandbox, either make an edit request for the main template or do the update if you are confident of your changes.
Request or amend the protection level of Template:Mxt is only for examples of style and formatting. Do not use it in actual articles. to match that of Template:Mxt is only for examples of style and formatting. Do not use it in actual articles. as necessary.
Add {{Uses TemplateStyles}} to the template's documentation to show which TemplateStyles stylesheets it uses.

Tips

Uses of TemplateStyles stylesheets are recorded just like template transclusion and Scribunto module invocation. Special:WhatLinksHere and the "Templates used in this preview" section beneath the edit form will work for them in the usual manner.
To search for TemplateStyles stylesheets, you can search for contentmodel:sanitized-css. See also mw:Help:CirrusSearch#Contentmodel.
When {{Uses TemplateStyles}} is placed on a template's documentation, it adds the template to Category:Templates using TemplateStyles. If the TemplateStyles stylesheet has a different protection level, the template will be tracked in Category:Templates using TemplateStyles with a different protection level (0 pages).
TemplateStyles experiments can be created at Template:TemplateStyles sandbox, e.g. for use in Module:Sandbox module experiments.

Examples

mw:Help:TemplateStyles/examples
- mw:Template:Stylish (css)
- mw:Template:ResponsiveAmboxExample (css)
Template:Thermometer and Template:Thermometer/styles.css give a simple demonstration of how TemplateStyles may be mixed with inline styles (where a parameter is passed to change one or more styles)