TemplateStyles enable the use of customCSS pages to style content without requiring aninterface administrator to edit sitewide CSS. This feature allows editors to create and maintain template-specific styles, improving flexibility and avoiding the need for global CSS changes, likeMediaWiki:Common.css, that could have unintended effects elsewhere on the site.
TemplateStyles make it easier to ensuretemplates display consistently across differentskins (for example,Vector) when sitewide CSS rules would otherwise interfere.
TemplateStyles work on all types of pages, not only templates, despite the name.
Styles must apply only to the associated template's output by using specificCSS selectors.
Styles 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.
The naming convention is to save the stylesheet for an associated page, template or module in a subpage of said page called/styles.css.
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:myTemplate/styles.css orTemplate:myTemplate/styles-foo.css, but notTemplate:styles-foo.css norTemplate:foo.css.
In general, follow MediaWiki CSS coding conventions. Some specifics:
Use specific selectors unique to the template. This reduces the chance of conflicting CSS rules arising accidentally. For example,.myTemplate-row rather than.row, and.myTemplate tr rather thantr.
Avoid#id selectors where ID is the HTML ID attribute.[a] 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!important unless absolutely required, except in mobile view to override style input from the associated template. Use of!important is exceptionally difficult to override because of the loading order of styles (personal CSS then TemplateStyles).
In templates that will besubstituted, instead oftranscluded, nest the stylesheet inside the second parameter of{{ifsubst}} to ensure it isnot included when substituted.[b]
For example,{{ifsubst| | <templatestyles src="..." /> }}, and{{allcaps}}. Inline styles may be used in the first parameter in a substituted template. Example:{{smallcaps}}.
A simplified step-wise workflow to convert inline styles in templates to use a CSS stylesheet with TemplateStyles.
InTemplate:myTemplate, identify all of the inline styles that can be moved to a separate stylesheet.
CreateTemplate:myTemplate/styles.css containing all the classes that will replace the inline styles. Use template-specific class names where possible.
InTemplate:myTemplate (or itsTemplate:myTemplate/sandbox if you want to test first), add<templatestylessrc="myTemplate/styles.css"/> (you do not have to specify theTemplate: namespace). It is preferable to include it as the first wikitext, as only the wikitext after it is called will have the styles applied to it. It also ensures that it is prominent and avoids aflash of unstyled content.
It needs to be on its own line if the template starts with wiki markup that must start on anewline, as is the case withwikitables:
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.
For templates used inline (versus block 'box' content), specifically ensure the template is not transcluded inside awikilink. TemplateStyles of templates will not work inside links (as of 2025[update]).
If you used the sandbox, either make anedit request or copy the changes across to the main template yourself if you are confident in your changes.
Request to have amended or amend the protection level ofTemplate:myTemplate/styles.css to match that ofTemplate:myTemplate as necessary.
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.
TemplateStyles pages can be created outside of the template or module namespaces by either first creating them in template namespace and moving them (perhaps atTemplate:TemplateStyles sandbox), or by usingSpecial:ChangeContentModel as an admin or template editor. Regardless of what method is used, creating a .css page in userspace can only be done by the user in question or an interface admin, but once it is created anyone can edit it.
Moving a sanitized CSS page will not create a redirect.
Because of the way TemplateStyles is implemented, overriding TemplateStyles in your personal CSS requires a little more effort than normal. The rules on a specific TemplateStyles sheet are not the full CSS rules, nor can you match the selectors to override them.
Each selector is 'hoisted' to.mw-parser-output, so to override a rule in a TemplateStyles sheet that looks like.documentation {}, a naive override in your personal CSS file would need to look like.mw-parser-output .documentation {}.
However, in the HTML each TemplateStyles style isalways placed after your personal CSS file loads. Accordingly, the new rule would need to be morespecific. That can come in a couple ways. The easiest is to select the HTML element also as in:.mw-parser-output div.documentation {}. Another way would be to double one of the class selectors, as in.mw-parser-output.mw-parser-output .documentation {} or.mw-parser-output .documentation.documentation {}. This latter way is a little more future-proof but looks a little weirder.
Lastly,!important can always override styles in your personal CSS. The usual caveats regarding!important apply. Prefer one of the two options in bullet two if possible. (You must do this to override inline styles, regardless of any of the above; some templates cannot move everything to TemplateStyles per the flexibility given to template users. Implementers of templates should consider whether parameters likestyle andwidth are actually necessary. See alsophab:T200632.)
^For example, for<tableid="wikibase-full-name"class="wikibase-item"/> avoid usingtable#wikibase-full-name but rathertable.wikibase-item.
^When a template is substituted, its wikitext is copied directly into the page rather than being transcluded. If the</templatestyles> tag remains after substitution, this may confuse non-technical users.
