TenthFleet:Styling and theme system: Difference between revisions
Jump to navigation
Jump to search
Create editor documentation page |
m Add Editor's Handbook read-in-order side navbox |
||
| (One intermediate revision by the same user not shown) | |||
| 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 | {{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-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 9: | ||
* '''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 | ==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 | 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 !! | ! Variable !! Color !! Used for | ||
|- | |- | ||
| <code>--d-bg</code> || #0B0B0D || the page background | | <code>--d-bg</code> || #0B0B0D || the page background | ||
| Line 39: | Line 40: | ||
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 | ==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 | # 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== | ||
Latest revision as of 09:04, 17 July 2026
Editor's Handbook
A guided path — read the sections in order
Start here
Style & layout
Building content
Templates
Deep dives
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.
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 exampleTemplate:Infobox-award/styles.css, and the template pulls it in with<templatestyles src="Infobox-award/styles.css" />.
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
- Open MediaWiki:Common.css.
- Change the value of the variable near the top, for example
--d-gold. - Save, then hard refresh to see it. Because everything points at the variable, the new color flows through the whole site.
See also
| Tenth Fleet Wiki — Editor Documentation | |
|---|---|
| Start here | Contributor's guide · Introduction · Be bold · Editing basics |
| Style & layout | Manual of Style · Guide to layout · Naming conventions · Namespaces · Citing sources |
| Building content | Peerage page · Award page · Ship page · Echelon page · Order · News item |
| Templates | Template guide |
| Deep dives | Styling & theme · Infoboxes · Navboxes · Dynamic lists (DPL) · Supersession · Categories |
| Policies & Guidelines | |