Tutorial/Custom CSS

<< Return to Tutorial

Method 1: CSS parser tag

The simplest method to add custom CSS to a page is to use the css parser tag:

{{#css:
.example-selector {
  example-property: example-value;
}
}}

The parser tag approach allows for any valid selector to be used, but some css features are filtered for security reasons. The following is a comprehensive list of all disallowed features:

• Functions:
  • url()
  • image()
  • image-set()
• Properties:
  • accellerator
  • -o-link
  • -o-link-source
  • -o-replace
• At-rules:
  • @import
• Misc:
  • any instance of "url" within attr()

The filtering of url() means you cannot add images using CSS when using the css parser tag.

Method 2: Templatestyles

Templatestyles is an extension installed on this wiki which allows for the creation of CSS templates which can be reused across any number of pages. To create a CSS template, simply create a page with a title in the format Template:CSS template name here.css. Create your template page with any valid CSS such as the following.

.example-selector {
  background-image: url("https://camp2.rectangle.zone/subwikifiles/wc2/images/9/94/Nerpawhite.png");
}

Templatestyles uses a linter to validate CSS, and does not allow all features, but does allow url() which is its primary use case on the wiki. For example, templatestyles does not allow :is() or :has(). Most importantly however, templatestyles prepends .mw-parser-output to the start of every selector in a template, meaning anything outside of the article body cannot be affected by a CSS template. You cannot, for example, give a background image to body, as the selector body gets transformed into .mw-parser-output body which will fail.

With all that said, make sure your CSS is valid before proceeding to the next step. If not, you will get an error and need to edit your CSS into something that the linter approves of.

To make your template page into a working CSS template, go to Special:ChangeContentModel to change the content model to Sanitized CSS. Once the template's content model has been changed, you can now use your CSS template on pages. To use, simply put on the page you would like to include the styles on.