How do you make "infoboxes" in mediawiki?

Question

I'm making a wiki using Mediawiki. I've seen a right side bar of each page on other wikis. Like this: http://minecraft.gamepedia.com/Diamond_Ore

The right side bar has information about the thing that the wiki post explains or what ever.

I want to know if it's possible to make that on each page, and how?

I've made an Example page: [Link deleted]

That's my wiki and I want to know how I could add a sidebar to the page.

Answer 1

To make a simple yet elegant and flexible infobox, first check that the ParserFunctions extension is installed. Then create a template called "Infobox" (or whatever) with the following combination of HTML and wikitext:

<div class="infobox">
<div class="infobox-title">{{{title|{{PAGENAME}}}}}</div>{{#if:{{{image|}}}|
<div class="infobox-image">[[File:{{{image}}}|300px]]</div>}}
<table>{{#if:{{{param1|}}}|<tr>
    <th>Parameter 1</th>
    <td>{{{param1}}}</td>
</tr>}}{{#if:{{{param2|}}}|<tr>
    <th>Parameter 2</th>
    <td>{{{param2}}}</td>
</tr>}}{{#if:{{{param3|}}}|<tr>
    <th>Parameter 3</th>
    <td>{{{param3}}}</td>
</tr>}}{{#if:{{{param4|}}}|<tr>
    <th>Parameter 4</th>
    <td>{{{param4}}}</td>
</tr>}}{{#if:{{{param5|}}}|<tr>
    <th>Parameter 5</th>
    <td>{{{param5}}}</td>
</tr>}}</table>
</div>

Replace "param1", "param2", etc. with the parameters that you actually want for your infobox, such as "name", "birth-date", etc. If you need more parameters, just duplicate (with copy-paste) one of the existing parameters and modify it.

Then go to MediaWiki:Common.css and add some styling (if you don't have the necessary permissions to edit MediaWiki:Common.css, you'll have to add this CSS as inline styling to the HTML in the template):

.infobox {
    background: #eee;
    border: 1px solid #aaa;
    float: right;
    margin: 0 0 1em 1em;
    padding: 1em;
    width: 400px;
}
.infobox-title {
    font-size: 2em;
    text-align: center;
}
.infobox-image {
    text-align: center;
}
.infobox th {
    text-align: right;
    vertical-align: top;
    width: 120px;
}
.infobox td {
    vertical-align: top;
}

Finally, go to the wiki pages that require the infobox and copy the following wikitext, replacing "Infobox" with the name you've given to your template, and "param1", "param2" etc. with the parameters you defined earlier:

{{Infobox
|title = 
|image = 
|param1 = 
|param2 = 
|param3 = 
|param4 = 
|param5 = 
}}

You may safely leave empty or delete any parameters you don't use, as they are all optional. If "title" is not provided, the infobox will default to the page name, which is usually what you want.

I've had to develop infoboxes like these for countless clients, and I slowly arrived to this solution as optimal in regards to complexity and flexibility. Hope it helps someone!

PS for any advanced users: I recommend using HTML rather than wikitext for defining the main table because this way we avoid conflicts with the pipes of the #ifs. In Wikipedia this conflict is avoided by using a template called {{!}} that inserts a pipe, but this results in unreadable wikitext.