TenthFleet:Infobox construction - Revision history

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

2026-07-17T09:04:13Z

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 infoboxes are built, so you can add a field to an existing one or create a new one. Every infobox on this wiki follows the same simple pattern.</div>		<div class="tf-lead">This page explains how the wiki's infoboxes are built, so you can add a field to an existing one or create a new one. Every infobox on this wiki follows the same simple pattern.</div>

MDGarcia: Use American English spellings

2026-07-17T03:00:38Z

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 infoboxes are built, so you can add a field to an existing one or create a new one. Every infobox on this wiki follows the same simple pattern.</div>		<div class="tf-lead">This page explains how the wiki's infoboxes are built, so you can add a field to an existing one or create a new one. Every infobox on this wiki follows the same simple pattern.</div>

	An infobox is really two pages working together: the '''template''' that lays out the box, and a '''stylesheet''' that ~~colours~~ it.		An infobox is really two pages working together: the '''template''' that lays out the box, and a '''stylesheet''' that colors it.

	==The two parts==		==The two parts==

MDGarcia: Create editor documentation page

2026-07-17T02:34:15Z

Create editor documentation page

New page

<div class="tf-lead">This page explains how the wiki's infoboxes are built, so you can add a field to an existing one or create a new one. Every infobox on this wiki follows the same simple pattern.</div>

An infobox is really two pages working together: the '''template''' that lays out the box, and a '''stylesheet''' that colours it.

==The two parts==
Take {{tl|Infobox-award}} as the model:
* <code>Template:Infobox-award</code> is the layout. It starts with <code><nowiki><includeonly><templatestyles src="Infobox-award/styles.css" /></nowiki></code>, then builds a table with the class <code>tf-abox</code>.
* <code>Template:Infobox-award/styles.css</code> is the look. It defines the <code>tf-abox</code> classes using the theme variables from [[TenthFleet:Styling and theme system|Common.css]].

==How a field works==
Each row of the box is wrapped so it only appears when the editor fills that field in. The pattern looks like this:
<pre>{{#if:{{{motto|}}}|
{{!}}-
{{!}} class="tf-abox-l" {{!}} '''Motto:'''
{{!}} class="tf-abox-r" {{!}} {{{motto}}}}}</pre>
Reading that plainly: ''if the'' <code>motto</code> ''field has a value, add a table row with a bold label and the value; otherwise add nothing.'' The <code><nowiki>{{!}}</nowiki></code> is how you write a table pipe character inside a template.

<div class="tf-note"><span class="tf-lbl">Why the pipe helper is needed</span><br>A plain <code>|</code> inside a template call would be read as the start of a new parameter. The <code><nowiki>{{!}}</nowiki></code> helper tells the software you mean a literal pipe, which is what tables are made of.</div>

==Adding a field to an existing infobox==
# Open the template, for example <code>Template:Infobox-award</code>.
# Copy an existing field block and change the field name and label.
# Save, then check a page that uses the infobox to confirm the new row appears only when filled.

==Creating a new infobox==
# Create <code>Template:Infobox-yourname/styles.css</code> first, copying an existing stylesheet such as <code>Infobox-award/styles.css</code> and renaming the classes.
# Create <code>Template:Infobox-yourname</code>, pull in the stylesheet, and build the rows with the if-guard pattern above.
# Wrap the whole thing in <code><nowiki><includeonly>...</includeonly></nowiki></code> so the raw markup does not show on the template's own page, and add documentation in a <code><nowiki><noinclude>...</noinclude></nowiki></code> block.

<div class="tf-tip"><span class="tf-lbl">Start from a copy</span><br>The fastest and safest way to make a new infobox is to copy the closest existing one and adjust it, rather than starting from a blank page.</div>

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