TenthFleet:Styling and theme system - Revision history

MDGarcia: Add Editor's Handbook read-in-order side navbox

2026-07-17T09:04:12Z

Add Editor's Handbook read-in-order side navbox

← Older revision		Revision as of 09:04, 17 July 2026
Line 1:		Line 1:
			{{Editor handbook}}
	<div class="tf-lead">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.</div>		<div class="tf-lead">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.</div>

MDGarcia: Use American English spellings

2026-07-17T03:00:37Z

Use American English spellings

← Older revision		Revision as of 03:00, 17 July 2026
Line 1:		Line 1:
	<div class="tf-lead">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 ~~colour~~ variables defined in one place.</div>		<div class="tf-lead">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.</div>

	<div class="tf-warn"><span class="tf-lbl">For maintainers</span><br>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.</div>		<div class="tf-warn"><span class="tf-lbl">For maintainers</span><br>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.</div>
Line 8:		Line 8:
	* '''Per-template stylesheets''' hold the styling for a single template. Each is a sub-page named <code>styles.css</code>, for example <code>Template:Infobox-award/styles.css</code>, and the template pulls it in with <code><nowiki><templatestyles src="Infobox-award/styles.css" /></nowiki></code>.		* '''Per-template stylesheets''' hold the styling for a single template. Each is a sub-page named <code>styles.css</code>, for example <code>Template:Infobox-award/styles.css</code>, and the template pulls it in with <code><nowiki><templatestyles src="Infobox-award/styles.css" /></nowiki></code>.

	==The ~~colour~~ variables==		==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 ~~colour~~ codes, so the theme stays consistent.		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.
	{\| class="wikitable"		{\| class="wikitable"
	! Variable !! ~~Colour~~ !! Used for		! Variable !! Color !! Used for
	\|-		\|-
	\| <code>--d-bg</code> \|\| #0B0B0D \|\| the page background		\| <code>--d-bg</code> \|\| #0B0B0D \|\| the page background
Line 39:		Line 39:
	Some rules apply to a single namespace. The software adds a class to the page body such as <code>ns-6002</code> for the Awards namespace or <code>ns-special</code> for special pages, so a rule can start with <code>body.ns-6002</code> to target only those pages. This is how the Awards pages get their extra polish without affecting anything else.		Some rules apply to a single namespace. The software adds a class to the page body such as <code>ns-6002</code> for the Awards namespace or <code>ns-special</code> for special pages, so a rule can start with <code>body.ns-6002</code> to target only those pages. This is how the Awards pages get their extra polish without affecting anything else.

	==How to change a ~~colour~~==		==How to change a color==
	# Open [[MediaWiki:Common.css]].		# Open [[MediaWiki:Common.css]].
	# Change the value of the variable near the top, for example <code>--d-gold</code>.		# Change the value of the variable near the top, for example <code>--d-gold</code>.
	# Save, then hard refresh to see it. Because everything points at the variable, the new ~~colour~~ flows through the whole site.		# Save, then hard refresh to see it. Because everything points at the variable, the new color flows through the whole site.

	==See also==		==See also==

MDGarcia: Create editor documentation page

2026-07-17T02:34:18Z

Create editor documentation page

New page

<div class="tf-lead">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 colour variables defined in one place.</div>

<div class="tf-warn"><span class="tf-lbl">For maintainers</span><br>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.</div>

==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 <code>styles.css</code>, for example <code>Template:Infobox-award/styles.css</code>, and the template pulls it in with <code><nowiki><templatestyles src="Infobox-award/styles.css" /></nowiki></code>.

==The colour 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 colour codes, so the theme stays consistent.
{| class="wikitable"
! Variable !! Colour !! Used for
|-
| <code>--d-bg</code> || #0B0B0D || the page background
|-
| <code>--d-panel</code> || #141416 || the main content panel
|-
| <code>--d-panel2</code> || #1c1c20 || raised elements and input fields
|-
| <code>--d-gold</code> || #F5BD3F || headings and highlights
|-
| <code>--d-gold2</code> || #F4A345 || secondary gold, such as labels
|-
| <code>--d-text</code> || #E9E6E0 || body text
|-
| <code>--d-muted</code> || #9A9792 || dimmed text
|-
| <code>--d-border</code> || #2A2A2C || borders
|-
| <code>--d-red</code> || #BE2F24 || the branch red
|-
| <code>--d-link</code> || #E7B84B || links
|}

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

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

==How to change a colour==
# Open [[MediaWiki:Common.css]].
# Change the value of the variable near the top, for example <code>--d-gold</code>.
# Save, then hard refresh to see it. Because everything points at the variable, the new colour flows through the whole site.

==See also==
* [[TenthFleet:Infobox construction|Infobox construction]]
* [[TenthFleet:Navbox construction|Navbox construction]]

{{Editor documentation}}
[[Category:Metawiki]]
[[Category:Wiki documentation]]