Wikia

Community Central

Comments59

Guide to Infoboxes

Infobox

As a member of the Community Support Team and long time wiki editor, one of the areas I most often get questions about are Templates. Templates allow for you to create a consistent look across your wikia, but can be tricky to set up. Here I would like to offer steps of how to customize a basic template called an infobox. This guide is meant for those with at least a basic knowledge of templates and will cover some of the more advanced techniques. It may be helpful to read about Wikia's default infobox first. This template is included on all new(er) wikias and is set up to allow quick and easy infobox creation.

Infoboxes are essentially templates that are generally organized to sit in the top right of an article to summarize what the article is about. This is a basic way to ensure information is consistent and displayed in an easily read format.

Setting the stage

Infoboxes are often confusing to some people because of they way they work. The template page itself holds all the code (the code page). Where we want the infobox to show up is an entirely different page (the target page). Often, users will try to place the template code on the template page which ends up creating an infinite loop.

First things first. Brainstorm what you want listed in the infobox. Try to think of the different pieces of information you want to gather about your topic and what variables there might be for the information. You can add everything at once or work one row at a time. What I like to do is create the shell of the infobox as a plain table with no styles and work from that. In this example, I will create a template for an NPC (non-playable character) in a video game. I want to add the name, race, profession, level and alignment.

Creating the template

This template will reside at Template:NPC infobox. I will leave links to each example on my test wikia. (Example)

{|
!colspan="2"|NPC's name
|-
!Name
|NPC's name
|-
!Race
|Elf
|-
!Profession
|Blacksmith
|-
!Level
|45
|-
!Alignment
|Evil
|}

Now that you have what you want to put into the infobox, you can work on the styling. Most infoboxes are aligned to the right side of the page with adequate margins as to not interfere with text entered on the left side. To accommodate that, we make sure to float the template to the right and give the template left and bottom margins to space the text away from it. Here, we can also add the borders, background, padding and any other styling for the overall infobox.

{| style="float: right; margin: 0 0 0.5em 1em; border: 1px solid silver;
          background: white; padding: 2px 5px"

Using parameters - how do they work?

Parameters are essentially variables assigned to a key word. They are set where the template is placed and used in the infobox. They allow for parts of the infobox to be dynamically displayed based on contents of these parameters.

In the example above, not all NPCs are going to be the same level, profession or alignment. So we can create a few parameters that will be dynamic. These data parameters will be {{{name}}}, {{{race}}}, {{{profession}}}, {{{level}}} and {{{alignment}}}.

Adding those parameters to the example (with some more basic styling) we can end up with the result below (Example):

{| style="float: right; margin: 0 0 0.5em 1em; border: 1px solid silver; 
          background: white; padding: 2px 5px"
!colspan="2"|{{{name}}}
|-
!Name
|{{{name}}}
|-
!Race
|{{{race}}}
|-
!Profession
|{{{profession}}}
|-
!Level
|{{{level}}}
|-
!Alignment
|{{{alignment}}}
|}

So when the infobox is used on a page, those parameters will show up with whatever data we assign to them (or nothing if not set).

Always use default values

It is rare that a parameter should remain empty. For instance, let's say we don't enter in the {{{level}}} for our NPC. The above template will show nothing for that value. We can use a default value to show information if the parameter isn't set, like {{{level|Unknown}}}. Then, when level is unset, the infobox will output "Unknown" when rendered.

Auto-hiding sections

The most common requested help for infoboxes is to hide a row if there is no information for the row. The easiest way to do this is to first verify if the parameter for the row you'd want to hide exists. Then, you can either set it to not display, or not include the row at all. I will show both examples below.

|-
{{#if: {{{level|}}}
  | !Level {{!!}} {{{level}}}
}}
|-

|- {{#if: {{{level|}}} | | style="display: none" }}
! Level
| {{{level|Unknown}}}
|-

The first only sends the level row to the target page if the level parameter exists. The second sends the information regardless, but hides the row if level is unset. To me, the first option is simplest, but the second option is expandable to hide full sections easily.

Bringing it all together

Now that we have a general idea of what we want to show and the parameters to use, we can finalize the infobox template. I have added more in-line CSS to our example and hidden a few sections if they would be blank. (Example)

{| style="float: right; margin: 0 0 0.5em 1em; border: 1px solid silver; background: white; padding: 2px 5px"
!colspan="2" style="padding: 3px; background-color: green; border: 1px solid black"|{{{name|{{PAGENAME}} }}}
|-
!style="padding: 3px; background-color: lightgreen; border: 1px solid black"|Name
|{{{name|{{PAGENAME}} }}}
|-
{{#if: {{{race|}}}
  | !style="padding: 3px; background-color: lightgreen; border: 1px solid black" {{!}} Race
  {{!}} {{{race}}}
}}
|-
{{#if: {{{profession|}}}
  | !style="padding: 3px; background-color: lightgreen; border: 1px solid black" {{!}} Profession
  {{!}} {{{profession}}}
}}
|-
!style="padding: 3px; background-color: lightgreen; border: 1px solid black"|Level
|{{{level|Unknown}}}
|-
{{#if: {{{alignment|}}}
  | !style="padding: 3px; background-color: lightgreen; border: 1px solid black" {{!}} Alignment
  {{!}} {{{alignment}}}
}}
|}

This is all nice, but how do I use it now?

Now that you have the infobox set up, we can place it on a page. To do that, we simply call the template and give it whatever parameters we want to show up. In our example, we had 5: name, race, level, profession and alignment. (Example)

Infobox example
{{NPC infobox
|name      = Rappy the Ruthless
|level     = 9001
|alignment = evil
|race      = Unknown
}}

Migrating to CSS

As you can see in the last example, we end up using a lot of in-line CSS to create the borders, backgrounds and padding. We can eliminate that need by creating a class or ID for the infobox and use the wikia's Common.css file to add the styles. This helps to keep the infobox coding clean while still allowing us to change the look at any time.

table.npcinfobox { /* overall style */
  float: right;
  margin: 0 0 0.5em 1em;
  border: 1px solid silver;
  background-color: white;
  padding: 2px 5px;
}
 
table.npcinfobox th, table.npcinfobox td { /* each cell in the table */
  border: 1px solid black;
  padding: 3px;
}
 
table.npcinfobox tr:first-child th { /* first header */
  background-color: green;
}
 
table.npcinfobox th:first-of-type { /* the rest of the headers */
  background-color: lightgreen;
}

The final result is an easy to read table (Example):

{| class="npcinfobox"
!colspan="2"|{{{name|{{PAGENAME}} }}}
|-
!Name
|{{{name|{{PAGENAME}} }}}
|-
{{#if: {{{race|}}}
  | !Race
  {{!}} {{{race}}}
}}
|-
{{#if: {{{profession|}}}
  | !Profession
  {{!}} {{{profession}}}
}}
|-
!Level
|{{{level|Unknown}}}
|-
{{#if: {{{alignment|}}}
  | !Alignment
  {{!}} {{{alignment}}}
}}
|}

Auto-categorization

The nice thing about using infoboxes for articles is that the infobox already holds information about each article. This data can be used to automatically categorize pages on your wikia. For instance, in my last example, you can see I used evil for my alignment. With a switch function, you can categorize the page based on that value.

{{#switch: {{{alignment|none}}}
  |good    = [[Category:Good aligned NPCs]]
  |evil    = [[Category:Evil aligned NPCs]]
  |neutral = [[Category:Neutral aligned NPCs]]
  |none    = [[Category:Unknown aligned NPCs]]
}}

You can see my final example here. This example categorizes the page based on a few parameters.

Looking for further help?

Check out the following help pages or ask itn the comments below. Our Community Forum is also a great place to get template help!

Want to receive updates on the latest Staff blog posts? Then click here to follow this blog.

Around Wikia's network

Random Wiki