First of all, in case you're new to Wikia, an infobox is a special template that describes the properties of a certain type of media. For example, Template:TVShow-infobox shows the title, image, description, producer, distributor, broadcaster, executive producer, format, genre, first airing, last airing, and more metadata of a television show, all in a simple, dark green table. Infoboxes save time, as you don't have to format and fill in the table yourself, but instead enter the parameters and the template will do the rest.

Let's return to the question: How do you create a userbox? The answer is complicated, and you'll need to be at least a bit experienced with source mode, Wikitext, and possibly HTML. The first step, however, is simple: Choose a subject and color for your infobox that hasn't been taken already. After that, it's time for the tricky part.

The second step will be to move your cursor over to the top of the page, where a drop-down menu says, "Contribute". Click it, and choose the option that reads, "Add a Page". A pop up menu will appear, and step three will commence. In the text box that asks for the page title, type, "Template:<subject>-infobox". Of course, you'll replace <subject> with your subject of choice. Now, let's break this down a bit. "Template:" is a fundamental part of the page, because that specifies it as not just an ordinary article, but a template. The rest is just the template's title.

Click the "Add a Page" button at the bottom of the pop up menu. You'll be led to the wikitext editor, which only shows source mode. Source mode will be necessary. Although it is more complicated, it has many more features than visual mode. The fourth step will be to write a table by typing "{|" at the beginning and "|}" at the end. Style it by adding some attributes to the table. The final code will be like this:

{| class="infobox {{{expand|noexpandable}}}" cellpadding=2 cellspacing=3 align=right width=280px style="font-family: verdana, sans-serif; padding: 2px; margin: 0 0 1em 1em; font-size: 10px; background-color: <lightcolor>; border: 4px solid <darkcolor>; color:black; text-align:left;"

Don't forget to replace <lightcolor> with a light shade of your chosen color and <darkcolor> with a dark shade of that color.

This will create an empty table, and we don't want that!

Thus, we move to step five: add a row that spans two columns, is aligned at the table's center, and has text size 145% of the default text size. This row will also contain the page's title. To insert this row, type this:

| align="center" colspan="2" bgcolor="<yourcolor>" style="font-size:145%" | {{{title|{{PAGENAME}}}}}

Don't forget to replace <yourcolor> with a dark shade of your chosen color for the infobox.

Now, you probably have a question. Why does the template "title" have three curly brackets instead of two? The answer is that title isn't a template; it's a parameter. Parameters are given values when the template is used in a page. However, "title" has a default value: the magic word "PAGENAME". Magic words are defined the same way as templates are, but they mean something special instead of copying the content of a template page. "PAGENAME" is the name of the page it is used on. Pagename used on this post would be Help/Tutorials/Infoboxes. This means that if "title" isn't defined, the page name will take its place, but if it is, "PAGENAME" has no effect.

Step six will be to add the image and description by adding a table within a table. That sounds crazy, right!? But it must be done in order to craft your infobox. Thus, in a new row that is center-aligned and spans two columns, you must type up a new table. We won't worry about the new table's contents yet. Just add this text in the existing table:

| {| align="center" style="background-color: <light-shade-of-your-color>; border:4px solid <dark-shade-of-your-color>; color:black" width="1%"

Step seven is all about this table's contents. First, we'll add a row in the new table that contains a new, centered parameter with a default value of nothing. Its name will be "image".


Our next task in this seventh step is to add another table within this table. Yes, you heard me right: a table within a table within a table. This table will be darker than the second, and contain a third parameter, "descr". Its name is short for "description".

{| align="center" style="background-color: <medium-shade-of-your-chosen-color>; border: 4px solid #3a8733; color:black" width="1%"
|<center>{{{descr|<small>''No image description available (yet)''</small>}}}</center>

Now, we'll go to step eight: create a row with two cells, containing a custom parameter. Here is the code, which will go outside of the two tables within tables:

|- style="vertical-align:top;"
{{#if:{{{<custom>|}}}|{{!}}- style="background:<medium-shade-of-your-color>; vertical-align:top;"
{{!}} '''<custom-label>'''
{{!}} '''{{{<custom>}}}'''

This contains an "if" statement, which creates a row with the parameter label and parameter, but only if the parameter has a value. If it is undefined, the row will not exist. Replace <custom> with your parameter name and <custom-label> with the label for its value. For example, <custom> could equal "publisher" while <custom-label> would equal "Publisher:".

You may notice that some infoboxes contain parameters that span two rows: one row with column-span 2 that contains the parameter label, and another row with column-span 2 that contains its value. This should be used only for parameters with big values, such as ratings for games in different countries.

This results in step nine, which will create these two rows if the parameter value isn't empty:

|- style="vertical-align: top"
{{#if:{{{<custom>|}}}|{{!}}- class="navbox {{{expand|noexpandable}}}"" style="background:<medium-color>; vertical-align:top"
{{!}} colspan="2" {{!}}'''<custom-label>'''
{{!}} colspan="2" {{!}} {{{<custom>|}}}

Don't forget to replace <custom-label> with your label, <custom> with your parameter name, and <medium-color> with a medium shade of your color.

Step ten is simple: just alternate between a medium and a light shade of your color. Every other row will be a medium shade, while the remaining rows are a light shade, the same as the infobox background color.

Step eleven is just as simple: add a description between <nowiki> tags. Use <pre> tags to show sample code for usage of your infobox, and put the meanings of the parameters inside the nowikis but outside the pres.

Step twelve is the simplest of all: click the "Publish" button at the top of the editor. Pat yourself on the back; you've just created an infobox!

The final step is thirteen (sorry for those of you who are triskadekaphobes). Use your infobox in an article, blog, or other page by simply using the template page's name as a template, minus the "Template:" part. Define the parameters' values by putting a | sign, the parameter name, "=", and the value to assign it after the template name (but within the double curly brackets). Re-publish your article, and it should show the infobox with its proper values!

Here is an example with the TVShow-infobox:


Written by InukaneYumiko

Community content is available under CC-BY-SA unless otherwise noted.