TenthFleet:Styling and theme system

Editor's Handbook

A guided path — read the sections in order

Start here

1. Contributor's guide
2. Introduction
3. Be bold
4. Editing basics

Style & layout

5. Manual of Style
6. Guide to layout
7. Naming conventions
8. Namespaces
9. Citing sources

Building content

10. Peerage page
11. Award page
12. Ship page
13. Echelon page
14. Documenting an order
15. Posting news

Templates

16. Template guide

Deep dives

17. Styling & theme
18. Infoboxes
19. Navboxes
20. Dynamic lists (DPL)
21. Supersession
22. Categories

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