Fandom

Wikia Developers Wiki

Portable infoboxes/Tips and tricks

< Portable infoboxes

909pages on
this wiki
Add New Page
Talk0 Share
Main article: w:c:portability:Portable Infoboxes

Tips, tricks, snippets, CSS and hacks for portable infoboxes. Be sure to reference PortableInfoboxes/CSS and PortableInfoboxes/Tags to understand how each element can be used and styled.

Converting infoboxes

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

<infobox>
<navigation>
<div class="mw-collapsible mw-collapsed">
This text is not collapsible; but the next is collapsible and hidden by default:
<div class="mw-collapsible-content">
This text is collapsible.
</div></div>
</navigation></infobox>

Image formatting

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;
}

Icons

Groups

Default value for show="incomplete" groups

Suppose you have a group like the following:

<infobox>
  <title><default>An Infobox</default></title>
  <data source="foo"><default>bar</default></data>
  <group layout="horizontal" show="incomplete">
    <header>Chronology</header>
    <data source="previous"><default>N/A</default></data>
    <data source="next"><default>N/A</default></data>
  </group>
</infobox>

To prevent the group from showing, use this as the default value for both fields:

 {{#if: {{{previous|}}}{{{next|}}} |N/A}}

Resulting in:

<infobox>
  <title><default>An Infobox</default></title>
  <data source="foo"><default>bar</default></data>
  <group layout="horizontal" show="incomplete">
    <header>Chronology</header>
    <data source="previous"><default>{{#if: {{{previous|}}}{{{next|}}} |N/A}}</default></data>
    <data source="next"><default>{{#if: {{{previous|}}}{{{next|}}} |N/A}}</default></data>
  </group>
</infobox>

Multiple parameters

For same field

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

CSS

Inline styling

In many cases, specific elements can be styled using inline style declarations placed within the <format> tag and/or the <default> tag. Some wikitext can be styled directly, and other elements can be styled by placing containers such as <div> or <span> around them.

<infobox><data source="Row 1 info">
<default><span style="color:blue">{{{Row 1 info|inline styled}}}</span>
</default>
<label>Inline styled</label></data>
 
</infobox>

Styling a header

Changing a header on demand is a bit tricky because a wiki may adapt to the users' screen size, using the width parameter makes this easier.

<infobox>
<header><div style="background-color:Green;width:100%">Testing 123456</div></header>
<data><default><div >alalalalla</div></default>
<label>Data background</label>
</data>
</infobox>

Styling an entire data row

While you can apply styling inline 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.

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.