Help:Infoboxes

This is a ShoutWiki help page, hosted at ShoutWiki Hub. If you want to suggest changes, leave a message on its talk page. If you want to replace this page with a custom help page for your wiki, click the create button above.

A guide to help you create basic infoboxes for your wiki.

The start code

This code can be used to help you create an infobox. Copy it to the template page you want to create. This example creates Template:Person.

{|
| style="text-align: center;" |
 <p style="font-size: larger;">'''{{{name|{{PAGENAME}}}}}'''</p>
 <div style="background-color: #fff; margin: 0 25px;">[[File:{{{image}}}|250px|link=]]</div>
 <p>{{{caption}}}</p>
|-
| style="text-align: center;" | <u>'''{{{subject}}} information'''</u>
{| style="margin: 0 auto; text-align: left;"
{{#if:{{{field1|}}}|
{{!}} style="text-align: right; width: 80px;" {{!}} {{{title1}}}:
{{!}} {{{field1}}} }}
{{#if:{{{field2|}}}|
{{!}}-
{{!}} style="text-align: right;" {{!}} {{{title2}}}:
{{!}} {{{field2}}} }}
{{#if:{{{field3|}}}|
{{!}}-
{{!}} style="text-align: right;" {{!}} {{{title3}}}:
{{!}} {{{field3}}} }}
{{#if:{{{field4|}}}|
{{!}}-
{{!}} style="text-align: right;" {{!}} {{{title4}}}:
{{!}} {{{field4}}} }}
{{#if:{{{field5|}}}|
{{!}}-
{{!}} style="text-align: right;" {{!}} {{{title5}}}:
{{!}} {{{field5}}} }}
|}
|}

Customizing the code

The code above can be transformed into any infobox you want. The parameters can be replaced with constant strings or renamed. We shall make field1 into the Age field:

{{#if:{{{field1|}}}|
{{!}} style="text-align: right; width: 80px;" {{!}} {{{title1}}}:
{{!}} {{{field1}}} }}

The variables here are {{{field1}}} and {{{title1}}}. {{{title1}}} is the label displayed when you use the infobox, and we'll turn this to "Age". {{{field1}}} will be what the user submits, and it's best to rename this to {{{age}}} to make it easy to use. Doing these things will give us:

{{#if:{{{age|}}}|
{{!}} style="text-align: right; width: 80px;" {{!}} Age:
{{!}} {{{age}}} }}

Now, if you save this and type the following on another page:

{{Person
| age = 8
}}

you will see "Age: 8" displayed on the page.

Ifs

If you're wondering what the "{{#if:{{{age|}}}|" does, it checks if there is something in the age field, and, if so, it displays the field. So if you modify the above example to

{{Person
| age =
}}

or even

{{Person}}

the age field does not display.

Completing the Person Infobox

You can add as many fields as you want to your infobox, but, for the sake of simplicity, we stick to the five in the original code.

Below is a full Person infobox. Notice that as well as changing the fields and titles, we've also replaced {{{subject}}} with Person.

{|
| style="text-align: center;" |
 <p style="font-size: larger;">'''{{{name|{{PAGENAME}}}}}'''</p>
 <div style="background-color: #fff; margin: 0 25px;">[[File:{{{image}}}|250px|link=]]</div>
 <p>{{{caption}}}</p>
|-
| style="text-align: center;" | <u>'''Personal information'''</u>
{| style="margin: 0 auto; text-align: left;"
{{#if:{{{age|}}}|
! style="text-align: right; width: 80px;" {{!}} Age:
{{!}} {{{age}}} }}
{{#if:{{{country|}}}|
{{!}}-
! style="text-align: right;" {{!}} Country:
{{!}} {{{country}}} }}
{{#if:{{{job|}}}|
{{!}}-
! style="text-align: right;" {{!}} Job:
{{!}} {{{job}}} }}
{{#if:{{{family|}}}|
{{!}}-
! style="text-align: right;" {{!}} Family:
{{!}} {{{family}}} }}
{{#if:{{{religion|}}}|
{{!}}-
! style="text-align: right;" {{!}} Religion:
{{!}} {{{religion}}} }}
|}
|}

Say you have a page for Barack Obama. You'd then fill in the details, such as this:

{{Person
| name = Barack Obama
| image = President Barack Obama.jpg
| caption = In the White House
| age = 52
| country = United States
| job = President
| family = Wife: Michelle <br/> Children: Malia, Sasha
| religion = Christian
}}

Style

Barack Obama In the White House

Personal information Age: 52 Country: United States Job: President Family: Wife: Michelle Children: Malia, Sasha Religion: Christian

It's possible to do all sort of things to your infobox to change the style using CSS. While CSS falls out of the scope of this page, you can see an example below:

{| style="border: 1px solid #aaa; border-spacing: 0; float: right; margin: 0 0 .5em 1em; width: 300px;"
| style="background-color: {{{bgcolor|Beige}}}; text-align: center;" |
 <p style="font-size: larger;">'''{{{name|{{PAGENAME}}}}}'''</p>
 <div style="background-color: #fff; margin: 0 25px;">[[File:{{{image}}}|250px|link=]]</div>
 <p>{{{caption}}}</p>
|-
| style="text-align: center;" | <u>'''Personal information'''</u>
{| style="margin: 0 auto; text-align: left;"
{{#if:{{{age|}}}|
! style="text-align: right; width: 80px;" {{!}} Age:
{{!}} {{{age}}} }}
{{#if:{{{country|}}}|
{{!}}-
! style="text-align: right;" {{!}} Country:
{{!}} {{{country}}} }}
{{#if:{{{job|}}}|
{{!}}-
! style="text-align: right;" {{!}} Job:
{{!}} {{{job}}} }}
{{#if:{{{family|}}}|
{{!}}-
! style="text-align: right;" {{!}} Family:
{{!}} {{{family}}} }}
{{#if:{{{religion|}}}|
{{!}}-
! style="text-align: right;" {{!}} Religion:
{{!}} {{{religion}}} }}
|}
|}