Help:Infoboxes

Info-boxes 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 organised and quickly readable format. Info-boxes are generally made using templates, to create consistency across a community.

Wikia has developed a new way to code info-boxes, called portable info-boxes to enable them to display well across different devices, which this page details. There are no changes to how you use an info-box on an article — instead, the changes affect how it is written on a template page. A tool to help with the migration of existing info-boxes has also been created. More information about this can be found on Help:Infobox migration.


 * Useful links :
 * For a basic intro to the visual info-box editor, see Help:Infoboxes/editing.
 * For a detailed list of all the standard options available for portable info-boxes, including samples of wiki-text to use and their HTML output, see Help:Infoboxes/Tags.
 * For detailed information about how to use CSS to theme an info-box, including detailed guides, see Help:Infoboxes/CSS.
 * For instructions on how to migrate from a 'classic' info-box to a portable info-box, see Help:Infobox migration.
 * For a guide to using the Info-box Preview feature, see Help:Infobox preview.
 * PORTABILITY HUB: Guides, examples, and personal mentoring for migrating, customising, and theming your info-boxes.

How to add an info-box to an article
You can add an info-box to an article the same way as you would any other template, either via the editor's built-in tools, or through the editor's source mode. In the VisualEditor, portable info-boxes can quickly be inserted via the Info-box option on the 'Insert' drop-down.

Meanwhile, in source mode, you would generally start by copying the syntax from the template's documentation (normally found towards the bottom of the template's page) and pasting it into an article, changing the words after the equals signs to provide the desired information. For example:

With portable info-boxes, this works just the same as with any other template. However, the template page markup is a little different, as detailed below.

How to create an info-box
First, start a new template with any name you like. To do this, create a new page with the title "Template:[name of your choice]" (e.g. Template:Example). While in the past you may have used tables and divs, we now use info-box tags. We'll begin with a basic 'stacked' info-box, with a title and an image:

This wiki-text 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, inserting the following parameters to get a working info-box:

Hiding values
Any field or element without a value will automatically be hidden. This applies to all tags with the exception of groups that are forcibly shown (see ). When all elements are empty the info-box itself will not appear.

How to alter the info-box layout
Info-boxes using this kind of code are automatically styled, taking cues from your community's custom 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 info-boxes:

Custom theming
The default info-box theming can be overridden in two ways. There is a variable on your community's Special:WikiFeatures page entitled Europa Infobox Theme. When you enable it, your info-boxes will pull the colours you chose for your Wiki Navigation.

Your other option is to use local community CSS. Using the theme or theme-source attributes on the info-box tag will make it easy to target specific info-box templates using classes.


 * The theme attribute is used to specify a custom CSS class for the info-box template.
 * The theme-source attribute allows you to vary the CSS class via a template parameter.

For lots more information about how to use these attributes and theme an info-box, including detailed guides, please check out Help:Infoboxes/CSS, or find example styles and themes on the Portability Hub.

Accent colours
The colours of title and header backgrounds and text can be further repainted per-info-box by using the accent colour feature. Like theme-source, the colour used is the value of the template parameter indicated in accent-color-source (for backgrounds) and accent-color-text-source (for text).

As an example: if the info-box template declares accent-color-source="bkg" and the article's info-box declares bkg = #FFF, the background colour of the headers and titles will be #FFF (the HEX value for the white colour). The colours declared in this way must be in #FFF or #FFFFFF HEX format, or the recolouring will silently fail.

Accent colours will override colours declared using themes as well as defaults.

This also includes a parameter for default colour, so using accent-color-default="#FFF" sets the colour for all titles and headers backgrounds, and accent-color-text-default="#000000" works in a similar manner by setting the default text colour using hex formats.

How to use multiple images or videos
To use multiple images in one location in an info-box, you can simply pass a  tag.

For more information about this feature, see this thread.

To add a video into an info-box, simply use the  tag, just as you would with an image. When a video is inserted instead of an image, a thumbnail with a play icon and duration info will be shown in the info-box, and clicking on the video will pop up a video player. If you want to add multiple videos, add a new  tag per each video.

How to group data
Now that you have created a simple info-box, you can learn how to use more advanced options. In the section below we show how to build the info-box seen on the right.

This info-box begins with three  fields, then single   and   fields. As you can see, the  field does not have to be the first field.

Grouping information inside the group tags
The  field will let you group fields together and give them 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 (other than the header tag) inside a group have a value, that whole group won't show up.

Details

Horizontal layout for groups
Instead of a vertical list,  fields can have a horizontal layout where all the content is displayed next to each other in single line. This can be achieved by adding layout="horizontal" attribute to the group tag.

Smart layout for groups
Similar to horizontal layout (which provides rigid, structured rows) is "smart" layout. This allows data fields to flow in a single group from one row to the next. When the number of fields reaches a defined limit, the next data field will appear on a new row. The items in a row will adjust to fill all available width.

To use smart groups, add row-items="3" (or some other number that sets the limit). All items in a smart group use horizontal layout by default, so it is not necessary to add that attribute if you are using smart groups. However, it is possible to mix horizontal and vertical data fields in a smart group by adding the layout="default" attribute to an individual  tag.

To make a given data field take up more than a single space, use the span="2" attribute in a  tag.

Force all group elements to be displayed
Using show="incomplete", you can force all group elements to be displayed, even when empty, unless all are empty — then the group is not rendered at all.

Now adding all this together, we come to the final template code:

Details  Combatants

Now we can use it in an article:

Collapsible groups
Groups can be made collapsible by adding either collapse="open" or collapse="closed" to the  tag. This will make the group header row clickable (to expand and collapse the group), and the group will initially start open or closed, respectively.

Note: A header row containing content must immediately follow the group tag for this to work.

Formatting
If you want to 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 format tag is used, the variable provided in source= is then formatted or modified as specified inside the format tag. For this purpose, the parameter has to be provided in triple braces; e.g.,  for.
 * If the variable provided in source= is empty, the node renders the value as provided in the default tag (or doesn't render if no default tag is specified). The contents of default is never available to parser functions; e.g., parameter  would remain empty. It can be thought of as meaning 'default format', not 'default value'.

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

For example, we can insert a  template:

The effect can be achieved with the following syntax:

Parser functions
Parser functions can be added to any info-box. However, the results will be automatically hidden if the parameter, tag, or data source do not contain any text.

It would not make sense to test for the empty string in the switch statement; e.g.,, because that is already covered by the default tag.

Examples

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

Further help and feedback

 * For information on the 'classic' method of writing info-boxes, see Help:Classic infoboxes.
 * For more info-box help, see the Portability Wiki.