Infobox Wikia

Portable Infoboxes/Syntax

< Portable Infoboxes

223pages on
this wiki
Add New Page
Comments0 Share

A comprehensive reference to the Portable Infoboxes syntax.

Image collections


Unlike regular infoboxes which don't display tabbers properly on mobile devices, one can display images in tabs using the code below:

                monkeys = [[File:Example.png]]|-| 
                rabbits = [[File:Information_person.jpg]]|-|


Galleries provide a way to add both images and video to an article. This functionality is also available in infoboxes:


Alternate syntax

One way to have a variable number of parameters without using the gallery or tabber tag in a page is to use the #tag parser function:

<!--Template:Infobox images -->
    <image source="image">
        <caption source="caption" />
                {{{image1|}}}{{!}}Image 1 |
                {{{image2|}}}{{!}}Image 2 

The template can used by writing :

{{infobox images
   |image1 = example.png
   |image2 = example2.png

There are many other ways to do this using separate Wikitext or Lua templates.

Sample CSS

You can change the look of the tabs using CSS.

.pi-image-collection {
    margin-top: 0.5em;
    text-align: center;
ul.pi-image-collection-tabs {
    border-bottom: 1px solid #778;
    font: bold 12px Verdana,sans-serif;
    list-style: none outside none;
    margin: 0 0 2px;
    overflow: visible;
    padding: 0 0 4px;
    text-align: center;
ul.pi-image-collection-tabs li.current {
    background: none repeat scroll 0 0 #FFF;
    border-bottom: 1px solid #FFF;
    font-weight: bold;
ul.pi-image-collection-tabs li.current:hover {
    background-color: #FFF;
    border-bottom: 1px solid white;
ul.pi-image-collection-tabs li {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    display: inline;
    line-height: normal;
    list-style: none outside none;
    background: none repeat scroll 0 0 #DDE;
    border-color: #778 #778 -moz-use-text-color;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px;
    color: #448;
    margin: 0 0 0 3px;
    padding: 3px 0.5em;
    text-decoration: none;
ul.pi-image-collection-tabs li:hover {
    background: none repeat scroll 0 0 #AAE;
    border-color: #227;
    color: #000;
.pi-tab-link.pi-item-spacing {
    padding: 3px 5px 4px;

Start a Discussion Discussions about Portable Infoboxes/Syntax

  • [Suggestions] Infobox Syntax Improvement

    21 messages
    • Lytora wrote:As an attribute I'd use format="true". As I noted previously, that was suggested, and not implemented for whate...
    • Great suggestion! I'd say (or an equivalent) makes the most sense.

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.