TemplateStyles allow custom CSS pages to be used to style content without an interface 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.


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

Workflow for conversion

  1. In Template:myTemplate, identify all of the inline styles that can be moved to a separate stylesheet.
  2. Create Template:myTemplate/styles.css containing all the classes that will replace the inline styles. Use template-specific class names where possible.
  3. In Template:myTemplate (or its Template:myTemplate/sandbox 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).
  4. Amend the template (or sandbox) to replace the inline styles with the classes you defined in Template:myTemplate/styles.css
  5. 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).
  6. 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.
  7. Request or amend the protection level of Template:myTemplate/styles.css to match that of Template:myTemplate as necessary.
  8. Add ((Uses TemplateStyles)) to the template's documentation to show which TemplateStyles stylesheets it uses.


Overriding TemplateStyles

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.

  1. 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 {}.
  2. However, in the HTML each TemplateStyles style is always placed after your personal CSS file loads. Accordingly, the new rule would need to be more specific. 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.
  3. 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 like style and width are actually necessary. See also phab:T200632.)


See also

External links