TenthFleet:Infobox construction

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 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.

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

The two parts

Take {{Infobox-award}} as the model:

• Template:Infobox-award is the layout. It starts with <includeonly>, then builds a table with the class tf-abox.
• Template:Infobox-award/styles.css is the look. It defines the tf-abox classes using the theme variables from 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:

{{#if:{{{motto|}}}|
{{!}}-
{{!}} class="tf-abox-l" {{!}} '''Motto:'''
{{!}} class="tf-abox-r" {{!}} {{{motto}}}}}

Reading that plainly: if the motto field has a value, add a table row with a bold label and the value; otherwise add nothing. The {{!}} is how you write a table pipe character inside a template.

Why the pipe helper is needed
A plain | inside a template call would be read as the start of a new parameter. The {{!}} helper tells the software you mean a literal pipe, which is what tables are made of.

Adding a field to an existing infobox

1. Open the template, for example Template:Infobox-award.
2. Copy an existing field block and change the field name and label.
3. Save, then check a page that uses the infobox to confirm the new row appears only when filled.

Creating a new infobox

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

Start from a copy
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.