TenthFleet:Styling and theme system: Difference between revisions
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== | ||