13

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?

Valerio Bozz
  • 1,176
  • 16
  • 32
halmi4
  • 334
  • 1
  • 4
  • 10
  • I know that this is an old question, but I see that your example URL was redacted. Was it important? Please feel free to attach a screenshot to better clarify (instead of an external link to a personal website), since this question is still useful to some people. – Valerio Bozz Jul 03 '23 at 12:18

3 Answers3

28

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:{{PAGENAME:{{{image}}}}}|300px]]</div>}}
<table class="infobox-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, or better yet, use the TemplateStyles extension):

.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-table th {
    text-align: right;
    vertical-align: top;
    width: 120px;
}
.infobox-table 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.

Sophivorus
  • 3,008
  • 3
  • 33
  • 43
12

Wikipedia Infoboxes are just tables with a right side float and some additional style, colors, etc.

Minimal example

Here a minimal example floating table with 1 column (and 1 row):

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

To understand that syntax, read the official documentation:

https://www.mediawiki.org/wiki/Help:Tables

Example with Image

You may be surprised that, this is just a table with two columns and some rows:

Infobox preview

Here the code:

{| style="float:right;border:1px solid black"
!colspan="2" | Fantastic Page
|-
!colspan="2" | [[File:Example image.svg|260px]]
|-
! Info
| Stuff
|-
! More Info
| More Stuff
|-
! And Info
| Again Stuff
|}

Useful extra information:

  • if you know CSS, use CSS classes and use the extension TemplateStyle to create a dedicated page with your CSS rules
  • if you want to create a parametrized template, read the page about MediaWiki template so that you do not need anymore to manually type that table in every page, but you just express some parameters.

Note: this is OK for the presentational side, but for the content side one should also carefully think where to store the actual data. Especially if you want to create a wiki farm. Possibilities include standard wikitext/template syntax, SemanticMediaWiki, Wikibase.

Valerio Bozz
  • 1,176
  • 16
  • 32
David Reeve
  • 863
  • 9
  • 16
  • 3
    That's fine for the presentational side, but for the content side one should also carefully think where to store the actual data. Possibilities include standard wikitext/template syntax, SemanticMediaWiki, Wikibase. – Nemo Oct 17 '15 at 08:23
3

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.

  1. Go to a wikipage with an infobox you like (in my case Formica fusca page).
  2. Select whole content of the infobox and right click on its title at the top of the infobox.
  3. Choose to inspect the element (naming might differ between browsers - I use Opera)
  4. Look to the right (a window opened).
  5. 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="
  6. Right click on it and go to Copy, then select Copy outerHTML.
  7. Create Template:Examplenamehere page on your MediaWiki, edit it and place copied HTML code there. Edit it as you wish.
  8. As Sophivorus said go to MediaWiki:Common.css and add some styling - you might use the code he/she mentioned.
  9. 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>).

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

Magorzata Mrwka Zielona Mrwka
  • 31
  • 2