Help:Infobox 101

One of the most asked questions on Miraheze is how to make an Infobox, a panel (or table, or both!) with relevant information about the topic, such as the full name of something, a flag, type, etc.

Infoboxes can be very simple or very complex and may change according to the skin you're using (CSS modifications). Make sure to read the basics about MediaWiki so you can understand each section without much complexity. It's recommended to have at least a basic knowledge of how HTML and CSS works so you can customize and organize your infobox (and any template).

Creating a basic Infobox
Let's create a basic infobox with some info about someone, and the default values will be about Albert Einstein. Go to the address (in the Template namespace) you want to create (such as /wiki/Template:Infobox Person and start creating the page. The panel will have a picture of the person, full name, birthday, nationality and day of death (if applicable).

Table
Most infoboxes are made of a basic table.

This is a very basic table with the "wikitable" class (the same one used on Wikipedia, for example). But it's still missing a lot of things.

The first cell (with subj ) will have the name of the subject, in this case, Einstein. But the cell needs to be stretched so it can match the width of the others. Adding colspan="2" will make the cell span 2 columns (the total of our table).

Because it's the header of our table, and there's also other cells as "sub-headers", change the pipe character ( | ) for an exclamation mark instead ( ! ) so that specific cell will be a header cell with bold text and centralized text.

Image
Images are great to grant more info and also more visual appeal to the page. Usually, an infobox has a single image, however it can have multiple or even none, if the specific page doesn't need one.

Below the subj cell, we'll add the cell image. Don't forget the colspan="2" and to set a maximum width of the image (let's use 200px). Let's set a caption for the image as well.

Looking good! The usage of the image with the parameter shown here is very basic. It's totally possible to restrict and be more specific, such as:

Sets two new values, so when transcluding the template you can modify the format (JPG, PNG, GIF, etc.) and the width.

It's also possible to be broad, so the user will need to insert the brackets with the image (useful when multiple parameters of the image needs to be modified)

Page without image
Sometimes a page doesn't have (or doesn't need) an image so we have to add a parser function to that. Using if: we can make the cell disappear when there's nothing on the img tag. Because the caption is related to the image, use the same parameter to the entire row of the caption ( |- )

Now, everytime you don't set a value for img, the cell won't display anything. The same thing can also be done with every cell:

died set

died unset

Styling
Styles are optional but it can help fit the wiki's overall design. It's totally possible to create a new class for tables. On /wiki/MediaWiki:Common.css or /wiki/MediaWiki:.css :

In this case, make sure to add text-align: center to the subj cell

With some CSS knowledge, you can customize your infobox any way you want. This one has the basic float, making it go to the right side of the container and allowing text to be displayed on the side (unlike the tables before). This style also adds 5px of padding, 3px of margin (on the left), makes the background a different color, adds a blue border, and it will cover 25% of the container (modify the values on mobile view, depending on the skin you're using).

The styles can also be applied directly to the template, without Common.css, using style="..." . Adding style this way is effective when one element needs to have a specific CSS, however, if you'll use multiple instances of the same style it's better just to make a class for it.