How do you make "infoboxes" in mediawiki?

Infoboxes are just tables with a right side float and some additional formatting.

{| style="float:right;border:1px solid black"
| My fantastic infobox
|-
| More info
|}

For best practice, you should include your infobox formatting in a class in your wiki's CSS, and define an infobox template instead of creating separate tables on every page.

To make simple yet elegant and flexible infoboxes, 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 names you've given to your parameters:

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

Not sure how fresh @Sophivorus post is - there is no date so I assume it's from 2018, if not - sorry.

I was searching for a tutorial that would explain the nasty infoboxes and their creation process with no luck. Wiki itself was no help. After 2,5 evening I finally gave up and found Sophivorus' post. It gave me a hint that maybe creating an infobox in HTML with simple CSS is a better ad easier idea.. I thought that the Wiki must convert its s&&&ty infoboxes to HTML and I wasn't wrong! :) I have a nice infobox without learning wiki's scribunto-lua-srua-wikitext monster and much knowledge in HTML and CSS.

I would like to share the solution for dummies like me in a step-by-step way.

Go to a wikipage with an infobox you like (in my case Formica fusca page).
Select whole content of the infobox and right click on its title at the top of the infobox.
Choose to inspect the element (naming might differ between browsers - I use Opera)
Look to the right (a window opened).
Move cursor above the entries in the right window and look for <table class"[..] marker. Note that the whole infobox was highlighted as you moused over the <table class="
Right click on it and go to Copy, then select Copy outerHTML.
Create Template:Examplenamehere page on your MediaWiki, edit it and place copied HTML code there. Edit it as you wish.
As Sophivorus said go to MediaWiki:Common.css and add some styling - you might use the code he/she mentioned.
Styling. In HTML code add classes to elements you wish to style through CSS page (from step 8). You will need at least those: 1) give the whole infobox (in this case it wil be <table class="infobox" bla bla bla>) 2) titles/headers class infobox-subtitle (or whatever; <th class="infobox-subtitle" bla bla>) 3)give sub-title a class if you wish any sub-titles (<td class="infobox-subtitle" bla bla>).

Copy CSS from here or create your code in CSS by yourselves using classes mentioned above

.infobox {
background-color: #ffff00;
border: 2px solid #008600;
float: right;
margin: 0 0 1em 1em;
padding: 1em;
width: 400px;
}      
.infobox-title {
border: 1px solid #000000;
font-size: 1.5em;
text-align: center;
background-color: #ff0000;
}
.infobox-subtitle {
font-size: 1em;
text-align: center;
background-color: #fff00;
}
.infobox-image {
text-align: center;
background-color: #ffff00;
}

In HTML: In places you want the user to add the information paste {{{somenamehere}}} and then create .. a template you will have to place on other pages to invoke your Examplenamehere template:

 {|Examplenamehere
 |{{{somenamehere1}}}
 |{{{somenamehere2}}}
 |etc. etc.
 |}

To place a header with page name: {{{nazwa|{{PAGENAME}}}}} instead of a title at the top of the table.

If you wish to check or copy my template, go here: http://wiki.mrowki.ovh/index.php?title=Szablon:Opis and inspect the page

How do you make "infoboxes" in mediawiki?

Tags:

Mediawiki

Sidebar

Related

Recent Posts