Portable Infoboxes/Tips and tricks

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

Converting infoboxes

  Main article: Infobox/Converting

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.

    <navigation>{{#ifeq: {{{showgallery}}} | yes | [[Main Page|Gallery]] |}}</navigation>

    <navigation>{{#if: {{{showgallery|}}} | [[Main Page|Gallery]] |}}</navigation>

Collapsing

Collapsing is easy
Collapsed stuff

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

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

Most formatting of infoboxes is done through the wiki's CSS, which can only be changed by admins. For more information, see w:Help:Infoboxes/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 */
}

Word-wrap and hyphenation

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.

A better method can be to use soft hyphens:

<data source="relationships">
  <label>Relation&shy;ships</label>
</data>

This tells the web browser where it is best to hyphenate the word "relationships": into "relation-ships".

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.

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.

The output of the portable infobox includes the data source for each row in the attribute data-source, that is it includes its parameter name. CSS has the ability to select for arbitrary attributes in the HTML, not only classes.

Assuming the parameter is named apples, the following CSS will select the entire data field and its header, and turn it green:

.portable-infobox [data-source="apples"]
  { background-color: green; }

By applying an additional selector—pi-data-value or pi-data-label—it is also possible to target specific data values or their labels.

Note: The CSS linter used on Fandom will complain about the above code being slow. This is because the linter is very old. Th warning can be ignored, or the selector changed to:

.portable-infobox div[data-source="apples"]

The historical div-counting method is included below for reference.

Historical div-counting method

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 div tags, 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.

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>

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}}}
|Gen|General|General item = [[Category:General items]]
|Special|Special item = [[Category:Special items]]
}}

Replacing navboxes

Portable infoboxes can be great places to collect links, provided it is done carefully.

Navinfoboxes discusses a way to do so in detail, with sample CSS and portable infobox code.

See also

• Portable Infoboxes/Best practices
• Wookieepedia: a portability case study