TenthFleet:Styling and theme system

This page explains how the wiki's look is built, so you can adjust it safely. The wiki uses a dark theme, and almost all of it is driven by a small set of color variables defined in one place.

For maintainers
Changing site styling affects every page at once. Test on one page first, and remember that readers must do a hard refresh (Ctrl+Shift+R) before they see a CSS change.

Where the styling lives

There are two layers:

• MediaWiki:Common.css holds the site-wide styling: the dark theme, headings, tables, and the callout boxes used in this documentation. Only administrators can edit it.
• Per-template stylesheets hold the styling for a single template. Each is a sub-page named styles.css, for example Template:Infobox-award/styles.css, and the template pulls it in with .

The color variables

The whole theme is built from a handful of variables set at the top of Common.css. Use these names instead of typing raw color codes, so the theme stays consistent.

Variable	Color	Used for
--d-bg	#0B0B0D	the page background
--d-panel	#141416	the main content panel
--d-panel2	#1c1c20	raised elements and input fields
--d-gold	#F5BD3F	headings and highlights
--d-gold2	#F4A345	secondary gold, such as labels
--d-text	#E9E6E0	body text
--d-muted	#9A9792	dimmed text
--d-border	#2A2A2C	borders
--d-red	#BE2F24	the branch red
--d-link	#E7B84B	links

To use one in a rule, write color: var(--d-gold);.

Styling one namespace only

Some rules apply to a single namespace. The software adds a class to the page body such as ns-6002 for the Awards namespace or ns-special for special pages, so a rule can start with body.ns-6002 to target only those pages. This is how the Awards pages get their extra polish without affecting anything else.

How to change a color

1. Open MediaWiki:Common.css.
2. Change the value of the variable near the top, for example --d-gold.
3. Save, then hard refresh to see it. Because everything points at the variable, the new color flows through the whole site.

See also

• Infobox construction
• Navbox construction