TemplateStyles

For All Mankind Wiki
Coding Help

• Coding help
• CSS (overview)
• CSS classes & styles
• CSS variables
• TemplateStyles
• Fandom core CSS
• Fonts
• Referencing
• Code snippets
• Icons
• Placeholder graphics

Index

•

Rules

•

Docs

TemplateStyles is a MediaWiki extension activated by default on all Fandom wikis since July 2024.

General information

TemplateStyles allow to use CSS styles without the need to have it in the site's css files, which can only be edited by administrators. It allows to add CSS rules to templates (hence the name) but also any other types of pages, directly or through said templates. It does this by loading the CSS rules into the body of the page, using a prefixed class so that only classes and elements within the page-content it is used on can be addressed. It also uses a special content model called "sanitized css", which has some restrictions. More about this further down.

TemplateStyles allow to style templates and pages individually and by anyone, without the restrictions that inline styles have, and without the need to have code that is only used on a single page or group of pages to be loaded for everyone all the time.

Other than inline styles, and even different to the site CSS files, TemplateStyles apply to both the desktop and the mobile skin.

Usage

To add TemplateStyles to pages, two things are needed:

1. A page with the sanitized CSS content model to put the styles in it.
2. Loading these styles into the content of the page or template in question.

Creating the CSS page

Sanitized css model

TemplateStyles only work with code that is stored on pages with the "sanitized css" content model.

There are two ways a page gets that model:

1. Subpages created in the template namespace ending with .css get that content model by default.
2. Local admins can change a page's content model using Special:ChangeContentModel.

Note

A page with the sanitized content model can be created in the template namespace and then moved to any other namespace without losing that content model. However, this method can be a little tricky for inexperienced users. Don't hesitate to ask an admin if you need help creating a sanitized css file.

Create the CSS page

1. Normally, the CSS page would be created on a subpage of the template it is supposed to be used for. It is recommended to name it styles.css, but it can also be named differently.

Example: For the template Template:Foo create a page on Template:Foo/styles.css

1. Put the following CSS comment on top of the page.
   This is to indicate what page this is, and also categorizes the CSS file accordingly.

/* ┌───────────────────────────────────────────────────────┬────────────┐ */
/* │ TemplateStyles                                        │ {{csscat}} │ */
/* └───────────────────────────────────────────────────────┴────────────┘ */

Note: There are other variants of that header ready for copy/paste available here.

1. Add your CSS rules below that header.

1. Save the page.

Where to store

Technically, TemplateStyles pages can be located anywhere. There are preferred places though.

Templates

TemplateStyles of templates should always be stored on a subpage of that template.

Sometimes, the styles are used by more than one template. In that case, store it in a subpage of the most relevant template.

User pages

TemplateStyles for profiles or other userpages should always be stored on a user subpage.

Project articles

TemplateStyles for articles in the project namespace are usually stored on a subpage of that article.

In some cases, shared styles may be stored in the MediaWiki namespace.

Main articles

TemplateStyles for main namespace articles can be stored as subpage of that article.

However, this has some flaws:

• The TemplateStyles subpage is erroneously counted as article in the top right article counter.
• The TemplateStyles page may appear in several special pages, like Special:DeadendPages, Special:FewestRevisions, Special:ShortPages, and others.
• Edits on the TemplateStyles will appear in the recent wiki activity list in the side rail.

As an alternative, TemplateStyles for certain articles can be stored as a subpage of Template: Styles.

This is not a template, but serves as container for TS subpages used on main articles.

Integrate the CSS page

After the CSS page has been created, it has to be added to the template or page the styles are meant to be used for.

This is done by adding the following code to the template or page, ideally on top:

pagename is the name of the template (by default, namespace Template is assumed).

If the page containing the TemplateStyles is stored anywhere else than in the Template namespace, the namespace has to be added. For the main namespace, add a colon in front of the pagename.

filename is the name of the page with the styles. It is recommended to use styles.css or give it another meaningful name. It must end with the extension .css

Examples:

        (file in main namespace)

        (file in MediaWiki namespace)

    (file in user namespace)

→ If you mess up with the path to the styles file, an error message will occur on the top of the page where you're trying to integrate it.

Categorization

Templates & pages

Templates or pages using TemplateStyles (directly) should be categorized, and a notice about its use placed on it.

Note

This means that a template using TemplateStyles has to be categorized, not every page this template is used on.

Pages (like articles) only have to be categorized if TemplateStyles are used by that page directly.

There is a template to do this: {{TemplateStyles}}

That template has several modes for where it is used:

• On a template
• On a template's documentation
• On another page, like an article

Read that template's documentation for how to use it.

Templates and other pages using TemplateStyles are tracked in the category Pages using TemplateStyles and its subcategories.

CSS files

Pages containing the CSS rules (mostly referred to as "CSS files") should also be categorized.

This is done by using the CSS comment header shown above on top of each new TemplateStyles CSS page.

Note that this header can be used on any CSS file, also your regular personal CSS at User:<username>/common.css and will categorize it accordingly as well.

All categorized CSS files of this wiki are collected and tracked in the subcategories of CSS files.

Restrictions

TemplateStyles have a couple of restrictions though. Every class defined in a TemplateStyles file gets prefixed with .mw-parser-output. That means that only elements inside that div - which wraps the current page content - can be addressed with its rules. In other words, you cannot address the site's navigation, or the side-rail, or anything else outside the scope of the page.

There is however a way to address the dark and light mode selectors. More below.

The sanitized css content model has several restrictions:

CSS 3 only

One of the most noticable is that it only recognizes css code written in CSS 3. This means that many new options and notation forms of the more modern CSS 4 specifications are not supported, and that code must be written using the older CSS 3 notation format. More about this in the section "What is not working?" below.

CSS variables are not supported

A major downside of TemplateStyles is the missing support of css variables. CSS variables are extremely useful when it comes to wikis like those on Fandom, where there are two color modes (light/dark) and a lot of predefined color-variables generated by the system accoding to the colors chosen in ThemeDesigner. Predefined as well as custom color variables can be super helpful to design things that work well in both color themes.

What does not work?

incomplete - work in progress

• Addressing .page__main which are often used to change fonts or background colors.
• Newer color notations
• Color variables (and other css variables)
• Vendor prefixes, like -webkit-, -moz-, etc.

List of not working codes

→ This list is just coming from personal experience and is in no way complete.

Not recognized		Alternative notation	Notes
	Code	Code
Color notations	rgb(255 255 255 /.3)	rgba(255, 255, 255, .3)
	rgb(255 0 0)	rgb(255, 0, 0)
	hsl(0 100% 50%)	hsl(0, 100%, 50%)
	#RRGGBBAA #RGBA	use rgba
Pseudo classes	:is()	write every rule separately
	:where()
	:matches(.test)
Sizing values	fit-content
	stretch
	contain
Selector list argument	div:nth-child(1 of .foo)		the part with (1 of .foo) is not understood
	@counter-style	::marker	Interrestingly, @counter-style, which is CSS3, is not supported, but ::marker, which is actually level 4, does work.

Best practice

• Use template or page specific classes.
  • Don't use generic classes names as there is a high risk of them interfering with regular wiki or MediaWiki classes.
  • Use specific classes that are most likely not used anywhere else.
  • Set up your rules for these specific classes.
    Example: Instead of td tr { width: 100px;} use .myTable td tr { width: 100px;}
• Avoid the use of !important

→ See also the section about the CSS loading order on the CSS overview help page.

Addressing light/dark modes

Normally, the CSS classes .theme-fandomdesktop-dark and .theme-fandomdesktop-light can be used to address the dark/light color modes by prepending them to a class. However, these classes are assigned to the <body> element of the page, which is outside the scope of TemplateStyles.

There is a specific workarround for this, which is to explictly note the class with its element:

• body.theme-fandomdesktop-dark .yourclass { ... }
• body.theme-fandomdesktop-light .yourclass { ... }

Note that there is no space between "body" and the theme class, but between the theme and your class.

Having fun with TemplateStyles

Beside the possibility to style templates, and load some page-specific css on that page only, TemplateStyles can be a great way to individualize user's profile and and other userpages. Up to the activation of the TemplateStyles extension, users were bound to use inline styles, with their restrictions in usage and them not being parsed for mobiles, or by some hacks floating around (mostly also using inline styles), or by using their personal CSSwhich only displays its rules for them.

TemplateStyles open a lot of new possibilities to design your own user page that can be seen by anyone visiting it.

Having a personal CSS file with the sanitized CSS content model in your user-space can also be very useful to test things in your personal sandbox.

If you need help to get your own sanitized CSS file for your user-space, ask an admin for help.

Internal links

• sandbox.css - used to test the support of css rules
• {{TemplateStyles}} - Template to mark and categorize pages using TemplateStyles
• Pages using TemplateStyles - main tracking category
  • Templates using TemplateStyles (65)
  • Template documentations using TemplateStyles (14)
  • Articles using TemplateStyles (11)
  • Project pages using TemplateStyles (39)
  • User pages using TemplateStyles (2)
  • Other pages using TemplateStyles (1)

External links

• Extension:TemplateStyles
• Help:TemplateStyles
• Help: TemplateStyles
• The Future of CSS: CSS4 Insights

See also

• Other coding help pages:
  • Coding help
  • CSS (overview)
  • CSS classes & styles
  • CSS variables
  • Fandom core CSS
  • Fonts
  • Referencing
  • Code snippets
  • Icons
  • Placeholder graphics
  • Lua
  • DPL3
• Table of content of all project pages