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