Oh, the scary word 'infobox' that everyone seems to be using when you have no clue what it is! How do we create, style and use infoboxes? Tldr: it's not easy. Expanded explanation: keep reading further, Lucy is on the line!

Building

What is an infobox?

Yes, that is exactly what you have seen on all these cool fancy wikis! Infoboxes are rectangles located on the right side of a page that contain brief information about a character, an item, a game and so on. They are meant to give a gist of the topic without going into details and provide the most basic factual data. They usually include the name, a picture and a few lines like age, occupation, relatives (for a character); or genre, platforms, release date (for a game); and so on. There are certain things that are considered necessary to include in an infobox traditionally; however, there are no rules against adding a custom line to the list or removing a common one.

Types of infoboxes

There are known to be two basic types: an infobox and a portable infobox. An older one is made in a table format using {| |} syntax (and a lot of code within those brackets). A newer one, a portable one, uses XML instead and is usually more recommended (and also more understandable while writing the code).

Portable Infobox: Infobox builder

If you just want your infobox to work at least somehow and you do not need any sort of customization, you could stop reading after this part (however, you might want to pay attention to the How to call the infobox on a page part). Fandom has created a tool that makes our life easier and generates all the code for us while all we do is drag buttons from right to left.
Using the Infobox Builder is very easy: you create a template page (if you do not know how, check this other guide on templates in general), you press edit, you see a window that asks you what type of template it is going to be:

After choosing the infobox, you will be redirected to the Infobox Builder page that is intuitively clear: you choose how to call your parameters, you can add more of them or reorder them, and then you press 'save' and your template is done.

Portable Infobox: How do I understand what is going on?

Here comes the juicy part: how do I even approach writing a code for my infobox? Or maybe someone else has done it for me, and now I need to edit it a little, but there are so many words and lines and all these <>/?/*-+{ symbols, what do I do?

First of all: no panicking! We need to start with understanding the basics.

Weird symbols

Any code needs a way to tell Fandom 'this is where I start and this is where I end'. When it comes to infoboxes, it is similar to the way HTML tags work: we use specific words to say 'this is our heading' or 'this is our picture' and we wrap them into <> to make sure Fandom knows that this word needs to be perceived as a command. Using <infobox> tells Fandom 'this is where my infobox starts', and when we use </infobox>, we say 'this is where it ends'. Notice the / in the second one, this is required to make a correct closing tag.

Weird extra words: title and data

Our infobox code uses a few different commands that help it understand what exactly we want to do with this piece of text: title, image, data. If image is pretty self-explanatory (it points at a picture), title and data might cause some confusion.
Title is only used for the first big header of our infobox, the name of our infobox. It is usually a character name or a game name or an item name, it also often corresponds with the page name.
Data is used for all the other dual lines of parameters ('Age 20', 'Occupation Dentist, Release date 2019', etc). Data basically tells Fandom 'please take the information about the character's first appearance in the show from this line of code'.

Weird extra words: source

For our Infobox to work, we need to help it understand where to get the information from. Let's say we used <title> and then nothing else. What will be displayed in the title? The word 'title'? The void? Will Fandom read our thoughts and say 'oh, they probably meant their favorite Game of Thrones character that appeared in Season 2 episode 4!!!' ? Sadly no, Fandom cannot read minds (yet). So what we do is the following: we say 'please take the text to display in the title from this toy box on my shelf'. To do that, we give our title a source: <title source="name". The text in "" can be anything, even "blablablahello", however, it will be easier for you and for everyone else using your template if you keep this logical. Most of the parameters in an infobox start with <data, so without a proper source name it will be hard to read the code further.

NOTE: the word you choose for the source will be the same word you use later on pages when you call for your template and turn placeholders into actual data. The source words are case sensitive (remember if you used 'name' or 'Name').

Weird extra words: default

What if we already know that the name in the infobox will be the same as the page name, for example, do we really need to use the 'name' on all our pages when we place our infobox there? No! We can code it the way that will make our life easier: the tag <default></default> can help us. This tag will tell Fandom this: 'hello, I want to give you my infobox name when needed. However, if I don't write anything, how about you just use this text by default?' There is also a magic word in MediaWiki that can turn into the page name when used, and that is exactly what we do here:

Poof! The name in our infobox will always be the same as the name of the page where it is located (unless we want to inform Fandom that this particular page requires another name, then we just assign the new name to our source).

Weird extra words: label

When we used the source tag, we told Fandom 'please take the information from my bottom drawer'. But after the information is received, how do we define what it is? How do we explain having a folder with 18+ movies on your pc? Easy! We give it a specific naming, or a label. After we have used <data source="release">, for example, we add <label>Release date</label></data> to make sure the information displayed in the final version looks nice and presentable, with capital letters, spaces, etc. As if you have hidden your 18+ videos calling them 'kittens in the garden'. Fandom will always know what it is but will tell your readers whatever you want them to know ;)

Let's write the code

We will be taking this infobox as an example. Let's check what we have in it: there is a picture, a name, a racer class with a link leading to Classes, a collection with a link to the article about the cartoon (on Disney Wiki), an origin with a link leading to the original character page on Disney Wiki, and a release date of the character in Disney Speedstorm.

First we create a separate page called Template:InfoboxRacer. When we press edit, we should not choose any template type for now, otherwise we will be redirected to the Infobox Builder (press 'cancel' or choose the type 'I don't know'). Then we start by letting Fandom know that our infobox will appear here, so we write <infobox> </infobox>.

Before we start, let us make sure we are on the same page: the order in which we add the parameters into the code DOES matter, so if we wanted to start with the name ('Meg' in my case) and have it higher than the picture, we would need to use the title first, then the image. But since our current example infobox is built differently, we are starting the code with image source.

Now it is time to start writing our infobox body inside. The easiest ones are picture and title, so we add

<infobox>
	<image source="image"/>
	<title source="name"><default>{{PAGENAME}}</default></title>
</infobox>

Note that the image tag can be closed quickly because it does not require any specific conditions.

This is the output we will get:

Adding links

Everything we will be writing later will start with <data source (whether it is a link or no). To add the Racer class parameter, I need to insert a data source and give it a proper label: <data source="class"><label>Racer class</label></data>. However, this will only give us "Racer class Trickster", it will not create a link for us. Then how do we do that? This is where another magical tag appears: <format>. It will basically say 'whatever is written in the source, please display it this way'. To add a link, we use double square brackets [[, then the name of the page (in our case 'Classes'), then | to separate the page name from the display name, then the name we want to have on the page (in our case, Meg is classed as Trickster in Disney Speedstorm, that is why we use 'Trickster'), and then the closing brackets ]]: [[Classes|Trickster]]. However, we have different characters and different classes, so if we just hardcode the word 'Trickster', how should we change it later on for another character who is Defender? Or Speedster? Or Brawler? That is where we use a placeholder with the same name as our data source wrapped into the curly brackets indicating that this text is a placeholder: {{{class|}}}. So what we need to write is the following: [[Classes|{{{class|}}}]]. The placeholder is only there to save us a seat, so when we need to change the class, we will ask our placeholder to turn into the word we need (saying class=Trickster or class=Brawler, etc).

So we re-write our code as <data source="class"><label>Racer class</label><format>[[Classes|{{{class|}}}]]</format></data>. The full code with the image and the title will look like this:

The only tiny detail I would personally add there is a heading on the classes page. Since each class has a separate heading on the Classes page, I would redirect my word 'Trickster' not just to the [[Classes]] page, but to [[Classes#Trickster|Trickster]]. So to add a heading there, I would need to use # and then the header name. But since the header name is changeable in our case and it is the same as the class type, I can just use the same placeholder for it: #{{{class|}}}. Then my link in format will look like this:

After we apply the code to a page, it will turn our link into [[Classes#Trickster|Trickster]] or [[Classes#Speedster|Speedster]] or any other class we assign to our placeholder.

This is the output we will get so far:

Adding external links

Two of the parameters of my infobox on Disney Speedstorm Wiki link to Disney Wiki for character origin or the cartoon original description (as both wikis serve different purposes). Adding links to external websites requires a single [, then a URL, then a space (very important!), then the name of this character that we want to be seen on the page, and then a closing ]. So the link to Meg's original page would look this way: [https://disney.fandom.com/wiki/Megara Megara (Disney character)] and only the white part of the text is displayed in the infobox.

However, we are making a template, which means we need to be able to apply it anywhere for any character, so we cannot hardcode the link to Megara, we need to use a placeholder instead to say 'yo, Fandom, the full link will come soon, for now please keep the seat empty here and wait'. But the article on Disney Wiki is called 'Megara' while I want to write 'Megara (Disney character)', so I preferred to use two different placeholders there: one for the link and one for the displayed name. My two links will look this way:

Let's now add them to the <data source part:

And then we combine this code with our main one to get this:

This is our current result:

The last thing we are missing is Release date. This one is very simple, no links, just source and label:

We add it right before the closing </infobox> tag. And our infobox template is done!

Last editing tips

To make our life easier, we should work on our template page as we see it. Remember how many placeholders we created? How is it even possible to keep them all in your head? That is why we help ourselves and write a code on our page that we can just copy paste later on.

If you don't know how to call a template on articles, please read this part of the template guide. We are moving on with what we have concocted here. Below the </infobox> we should add this code:

Where <noinclude> makes sure this part isn't displayed on the article and is only visible on the template page, and <pre> lets us write the code without actually using it, so Fandom does not see the code as a command but as plain text that just looks like a command. Notice that we have not closed the </noinclude> tag yet because we still have something else to add to the page.

The last thing we add before closing the </noinclude> tag is Example. It will help us see if our infobox works correctly without placing it onto an article. So after the closing </pre> tag we need to add the following:

How to call the infobox on a page

When the template is ready, you go to an article (a character page, an item page, a game page, etc) and open 'Edit source'. Infoboxes are usually placed at the very top of the code, so you copy the set of placeholders we gathered above, you fill them in with content, and you press 'save'.

NOTE: only the parameters you are filling in on the page will appear, there will be no empty spaces if you do not complete some of them for whatever reason. If we suddenly decide that one of our characters does not need a release date, for example, because it has not been released yet, we can just leave |release= blank in the code on our article and not add anything after the = (pay attention to the Sulley example below).
Here are some examples of the code we write in the source mode vs. the output we get to see as readers:

Styling

I am a cool kid who knows CSS

Here is the list of selectors you can use if you already know what to do with them: https://community.fandom.com/wiki/Help:Infoboxes/CSS

I don't know CSS

Styling infoboxes is not an easy task for a beginner, and it is only available for wiki administrators and bureaucrats as it involves editing MediaWiki:Common.css. First of all, you might be interested in reading this guide to understand the basics of HTML and CSS better. Briefly, all styles for all parts of the infobox are located in separate boxes called 'selectors'. Imagine if M&M'S were sold in packages based on their color: only green ones, only brown ones, etc, but combining them together would bring the most joy to sweet lovers. So basically each package of our infobox sweets is called .pi-something (pi as in Portable Infobox). If you want to have round edges for the title (Meg), you would need to look for .pi-title and add { border-radius: 10px; } to it:

.pi-title { 
    border-radius: 10px; 
}

Or if you wanted to style the whole infobox in general (like add a colorful border), you could use the full selector:

.portable-infobox {
    border: 2px solid var(--theme-link-color);
}

Where 2px is the width of the border, solid means it's not dotted or dashed, etc, and var(--theme-link-color) means variable that takes the color that is set for all the links on the wiki at the moment. So if I switch the theme from dark to light, the link color will change from cyan to blue, and so will my border around infoboxes. For more detailed information on css properties used on Fandom the most, check this guide.

Where do I find the selectors?

You could use the link I added above but if that guide sounds too complicated, you could use something that is both more difficult and much much easier at the same time, it is called dev tools. It is something that all web-designers love because it helps tremendously with figuring your code out. If you are using Google Chrome or Microsoft Edge, press F12 to open dev tools. If no, google how to open them in your browser, it usually has a simple hotkey. After you have opened the big and scary page code, you need to find an arrow (usually top left of dev tools), it looks like this: File:Arrow dev tools templates guide.png, click on it and then click on the element you would like to style. You will see a highlighted div class (sometimes a few of them in a row) that contain your styles. You copy what is highlighted, you go to MediaWiki:Common.css, you paste it, you make sure the class starts with a dot . (each new word after space if there are more than one but remove the spaces), and then you add your styles to it. Styles can be easily googled with 'round edges css', for example, or 'text color css', etc.

For example, the full code for my title's round edges looks like this:

h2.pi-item.pi-item-spacing.pi-title.pi-secondary-background {
	border-radius: 10px;
}

My character infobox has round edges for pictures as well as the title, and to do that I found that the responsible class is .pi-image + I need to tell Fandom that this class contains an image (no, it is not obvious), so this is my code for it:

.pi-image img {
    border-radius: 10px;
}

For any additional design help, feel free to check this editing guide, google or ask on Discord! Have fun!

Becoming A Community Mentor

Learn the Basics Take the Next Steps
Become A Pro