Portable Infoboxes/Tips and tricks

This page includes tips, tricks, snippets, CSS, and hacks for Portable Infoboxes. Be sure to reference the PortableInfoboxes/CSS and PortableInfoboxes/Tags help pages to understand how each element can be used and styled.

## Parser functions

Parser functions, as well as Lua, can be used within the `<default>` or `<format>` tags, as well as all tags that accept wikitext. However, they should not be used outside these tags, because they will prevent the infobox from displaying.

## Optional navigation

Even though `<navigation>` tags have no `<default>` or `<format>` subtags, you can use variable parameters to have them display only when a parameter is specified, or when it has a specific value. The first example below uses the #ifeq parser function to check whether the "showgallery" parameter was set to "yes". If so, it displays a link; if not, nothing is shown, and no navigation row is created. The second example only verifies that "showgallery" is not empty.

```

```

## Collapsing is easy

Collapsed stuff

```
<infobox>
 <group collapse="closed">
 <header>Collapsing is easy</header>
 <data>
 <default> Collapsed stuff</default>
 </data>
 </group>
</infobox>

```

## Commenting

Portable infoboxes use xml so the normal rules for commenting don't really apply to them. One trick to hide portions or add comments is to use something like :

```
<infobox>
 <group>
 <header>Tony Stark</header>
 <data>
 <default>War machine</default>
 </data>
 <data>
 <default>Iron Man</default>
 </data>
 <!-- comment
This part is hidden
 <header>Hope</header>
 <data>
 <default>Dark Goddess</default>
 </data>
 <data>
 <default>Lady death</default>
 </data>
comment-->
 </group>
</infobox>

```

## Formatting

These are some codes that admins can insert into their wiki's CSS. For more information, see Help:PortableInfoboxes/CSS.

### Text formatting

One common need is to center text or format it vertically, and this can be done using CSS (see this). The formatting for data items can be formatted using code such as :

```
.portable-infobox .pi-data {
 height: 10em; /\* sets height \*/
 display: flex;
 align-items: center; /\* vertically align items or text \*/
 justify-content: center ; /\* horizontally aligns items or text \*/
}

```

#### Preventing word-wrap

Sometimes it may be undesirable to allow text to be wrapped. One way to prevent this is by using CSS like this:

```
.portable-infobox .pi-data-label {
 flex-basis: 120px;
}

```

This sets the minimum width so the label doesn't wrap unless it is necessary.

### Image formatting

#### Automatically resizing

One approach that will adapt to all image sizes is to simply use :

```
.pi-theme-name .pi-image-thumbnail {
    width: 100%;
    height: auto;
}

```

#### In resized infoboxes

If you use a non-standard width for your infobox (via `.pi-theme-name { width: 123px; }`), you will need to resize images in the CSS as well. This is done via the .pi-image-thumbnail class, like so:

```
.pi-theme-name .pi-image-thumbnail {
    max-width: 123px; /* Typically, use the same width as your infobox, minus borders */
    height: auto; /* Preserves the image ratio */
}

```

However, this can lead to higher images than desired. If you don't need them to fill the entire width of the infobox, you can also limit their height the same way to ensure that neither value is exceeded and that image ratio is maintained:

```
.pi-theme-name .pi-image-thumbnail {
    max-width: 123px;
    max-height: 123px;
    width: auto;
    height: auto;
}

```

### Title formatting

Customizing title text is similar to customizing any other text, it is merely a matter of using the right class. For example:

```
.pi-theme-name .pi-title {
 font-family: formalscrp421 bt;
 font-weight: bold;
 color: blue;
}

```

will make the titles of all infoboxes across the wiki look like this.

## Groups

Groups are particularly versatile in portable infoboxes. They can be collapsed, or change the layout of the information. If an infobox contains a lot of information, it may be better to add them to groups and collapse them:

```
<infobox>
 <group layout="horizontal">
 <data source="apples"/>
 <data source="pear"/>
 <data source="mangos"/>
 </group>
 <group layout="horizontal">
 <data source="avocados"/>
 <data source="grapes"/>
 <data source="tomatoes"/>
 </group>
 <group collapse="closed">
 <header>Good food</header>
 <data source="potatoes"/>
 <data source="passion\_fruit"/>
 <data source="pineapples"/>
 </group>
</infobox>

```

## Multiple parameters

### For same field

Janedoe

```
<infobox>
 <data source="women">
 <default>{{{ladies|Janedoe}}}</default>
 </data>
</infobox>

```

## CSS

### Styling an entire data row

While you can apply inline styling to some elements, it won't be enough to affect an entire data entry and its header collectively – for example, to change the background color of an entire row. That is because each `<data>` row consists of its value (and its `<format>` if any) within a `<div>`, within a `<div>`. Therefore, to fill it in completely, you need to target that top-level `<div>` with your background color. To do so, you will need to determine which of your infobox's divs you are targeting.

Going from top to bottom, go through your infobox code and count every `<data>` tag until you reach the one you wish to style. Do **not** count `<title>`, `<image>`, or `<navigation>` tags, as those are not contained in div elements. For this example, suppose you have a title, an image, then three data tags in this order: Age, Gender, and City.

* **Important:** If your infobox includes data tags that do not have a default value, those will not show when left empty, and therefore the numbering of your rows will change. See below for possible solutions to this issue.

Once you know the number of your div relative to the top of the infobox, you can use the following code, replacing the **1** in `div:nth-of-type(1)` with the appropriate value (in our example, 1 for Age, 2 for Gender, or 3 for City).

```
.pi-theme-name div:nth-of-type(1) {
    background-color: #000000;
}

```

The code above will select the entire first row (Age), header included. To affect only the div containing the value, use:

```
.pi-theme-name div:nth-of-type(1) div:first-of-type {
    background-color: #000000;
}

```

The extra `div:first-of-type` at the end selects the container between the full row and the actual content, so the header is not affected. Note that `first-of-type` (or `nth-of-type(1)`) is always used for this selection, no matter which row you are targeting.

Of course, this trick can be used to add any other properties for elements that would be difficult to style inline, such as lists. You can even go deeper using CSS selectors to affect only certain list items, such as every other item (`li:nth-child(2n+2)`), only the first, etc., from a single declaration.

#### How to deal with optional fields

If your infobox contains optional fields with no default value, ascertaining the position of a given row/div can prove impossible and cause this trick to style unintended rows. Depending on the order of your content, however, you can work around this in a few ways:

1. Place your row at or near the bottom of your infobox. If you don't know how many rows come before but know for certain how many rows come after, you can count from the bottom up. To do this, target it using `div:nth-last-of-type(1)` instead of `div:nth-of-type(1)`. In our example, this would select City first.
2. Depending on your content, you may consider using `<navigation>` tags for entries that are difficult to pinpoint. Since they use `<nav>` HTML elements instead of divs, you can count them separately and potentially identify their position regardless of optional content, unless you also use several navs that potentially will not display. Simply select them using `nav:nth-of-type(1)` or `nav:nth-last-of-type(1)` as appropriate.

### Adding categories based on a data source

Input from the infobox data sources are available as named template variables. A common use is to add additional categories to the page, based on a given value in the infobox:

```
<infobox>
    <data source="item_type">
        <default>General item</default>
    </data>
    <!--- more here -->
</infobox>
{{#switch: {{{item_type}}}
}}

```

### Starting template for customizing a portable infobox

This is a bare-bones set of CSS selectors that you can use to customize a portable infobox.

Add the code stored in Themes/starter\_theme.css to your `MediaWiki:Wikia.css` file and add styles where desired.

## See also

* The Styling of a Portable Infobox
* Portable Infoboxes/Best practices
* Wookieepedia: a portability case study

## References

1. ↑ http://www.w3.org/Style/Examples/007/center.en.html