Help:Infoboxes

Beta

Infoboxes are like fact sheets, or sidebars in magazine articles, designed to present a summary of the topic of the page. They present important points in an organized and quickly readable format. The sections of an infobox are usually the same among similar articles to create consistency across a community, and are made using templates.

How to use an infobox
You can add an infobox through source mode on an article by copying the syntax on the template's documentation page (found at the bottom of the infobox template's page) and pasting it at the top of an article, changing the words after the equals signs to provide the information needed. For example:

Creating new infoboxes


First, create new template with any name you like - Template:ExampleInfobox, for example. Next, we'll start with a basic infobox, with a title and an image.

This wikitext will tell your template to use name and image variables for title and image elements. Additionally you can provide the default tag, whose value will be used when a user does not specify a name/image/etc. on the article.

Now we just need two more fields containing additional information, so let's add one:

After adding one last field with source set to first and label to First seen, we end up with the following:

We can now use the template in an article and get a working infobox:

Styling and display
Infoboxes using this kind of code are automatically styled, using your community's theme. If any of the variables are empty, the relevant row of the template will not be displayed (unless the 'default' tag has been used).

Layout options
Two alternative layout options are available for infoboxes:

...  ...
 * default layout - &lt;data> tag labels displayed above the value
 * tabular layout - &lt;data> tag labels displayed on the left side of the value

Custom theming
Default infobox theming can be overwritten using either theme or theme-source attributes of the infobox tag, allowing infoboxes to be styled via local community CSS.

If both attributes are used inside the infobox tag the theme attribute is treated as the default.
 * The theme attribute is used a specify a custom CSS class for the infobox.
 * The theme-source attribute allows you to vary the CSS class via a template parameter.

For example, theme="delta" will add a class called portable-infobox-theme-delta to the infobox HTML, which can then be customized using CSS:
 * Theme

.portable-infobox-theme-delta { //custom styles }

For example, theme-source="location" means that, when location is specified in an article's infobox, it will use the value of it as the class.
 * Theme-source

For example:  ...

The available class to theme the template will thus be:

.portable-infobox-theme-africa { //custom styles }

Advanced usage
Now, that you have created a simple infobox, you can learn how to use more advanced fields. In this section we are going to build the infobox shown on the right.

Multiple ordering options for simple tags
There are three normal key-value fields, then title and image fields. As you can see, the title field does not have to be the first field, but you can only use it once per infobox.

Grouping information inside the group tags
The next field will let you put a number of fields into group, each of which can be given a header. Remember: fields that are declared but don't have a value won't appear. This rule also applies to groups - if none of the fields (excluding the header tag) inside any particular group have a value, the whole group won't show up.

Details



Alternative layout for group tags
Group tags can have an alternative horizontal layout where all the content is displayed next to each other in single horizontal line. This can be achieved by adding layout="horizontal" attribute to the group tag.

...

Comparing values with comparison tag
The comparison tag gives you an easy way to compare two lists - such as forces in a war-related infobox.

Comparison contains set tags, each of which defines compared values. You can put the name of the compared value in the header tag, and then use other fields introduced previously, for example the data tag.

Combatants Details Combatants

Now we can use it in an article, and the work is done:

Field formatting
If you want to prepend or append some additional information to your data - like adding some icons, categories - or to process the passed values, the field formatting allows you to do that.


 * When the tag format is specified for node, the variable provided in source= is then formatted/modified as specified inside the format tag.
 * If the variable provided in source= is empty, the node renders values provided in default tags (or doesn't render if default tags are not specified).

A few sample use cases:
 * Extra text -
 * Links -
 * Categories -

Here, we add an icon:

The effect shown to the right can be achieved with the following syntax: Price to buy

Available tags
All infobox fields should be declared using XML convention, with attributes used for field configuration.

Examples

 * Kratos ( source )
 * Beatrix Kiddo ( source )
 * Battle of Arrakeen ( source )