FANDOM


Default

<infobox>
	<title source="Box title"><format><center>{{{Box title}}}</center></format><default><center>No Title</center></default></title>
	<image source="image"><caption source="caption"><format><center>{{{caption}}}</center></format></caption></image>
	<data source="Row 1 info"><label>'''{{{Row 1 title}}}'''</label></data>
	<data source="Row 2 info"><label>'''{{{Row 2 title}}}'''</label></data>
	<data source="Row 3 info"><label>'''{{{Row 3 title}}}'''</label></data>
	<data source="Row 4 info"><label>'''{{{Row 4 title}}}'''</label></data>
	<data source="Row 5 info"><label>'''{{{Row 5 title}}}'''</label></data>
	<data source="Row 6 info"><label>'''{{{Row 6 title}}}'''</label></data>
	<data source="Row 7 info"><label>'''{{{Row 7 title}}}'''</label></data>
	<data source="Row 8 info"><label>'''{{{Row 8 title}}}'''</label></data>
	<data source="Row 9 info"><label>'''{{{Row 9 title}}}'''</label></data>
	<data source="Row 10 info"><label>'''{{{Row 10 title}}}'''</label></data>
</infobox>

Tabber

Image parameter

Common.css
/* New portable infoboxes modification for Template:Infobox LINK Characters */
.portable-infobox-theme-tabber .portable-infobox-navigation {
    padding: 5px 10px;
    text-align: center;
}
 
.portable-infobox-theme-tabber .tabbertab img {
     height: auto;
     max-width: 240px;
}
 
.portable-infobox-theme-tabber .portable-infobox-image-navigation img {
     height: auto;
     max-width: 240px;
}
 
.portable-infobox .group-layout-horizontal .portable-infobox-item-label {
     white-space: normal;
}
Infobox
{{Animal infobox
|example=<gallery>
Dog 1.jpg|Boxer
Dog 2.jpg|Beagle
Dog 3.jpg|Golden Retriever
</gallery>
}}

{{Animal infobox
|example=<tabber>
Boxer = Dog 1.jpg |-|
Beagle = Dog 2.jpg |-|
Golden Retriever = Dog 3.jpg
</tabber>
}}

If statements

(Sample)

<infobox layout="tabular">
	<title source="name"><format><center>{{{name}}}</center></format><default><center>{{PAGENAME}}</center></default></title>
	<image source="image"/>
	<header><center>Basic Information</center></header>
	<data source="episode"><label>'''Episode'''</label></data>
	<data source="attack type"><label>'''Attack Type'''</label><format>[[File:{{{attack type}}}.png]] [[:Category:{{{attack type}}}|{{{attack type}}}]]</format></data>
	<data source="realm"><label>'''Realm'''</label><format>[[File:{{{realm}}}.png]] [[:Category:{{{realm}}}|{{{realm}}}]]</format></data>
	<data source="previous"><label>'''Previous idol'''</label></data>
	<data source="next"><label>'''Next idol'''</label></data>
	<header><center>Allied Idol info</center></header>
	<data source="ally health"><label>'''Health'''</label></data>
	<data source="damage"><label>'''Damage'''</label></data>
	<data source="power"><label>'''Power'''</label></data>
	<header><center>Enemy God info</center></header>
	<data source="level"><label>'''Level'''</label></data>
	<data source="enemy health"><label>'''Health'''</label></data>
	<data source="battle idol 1"><label>'''Battle Idols'''</label><format>{{{battle idol 1}}}{{#if: {{{battle idol 2|}}} | <br/>{{{battle idol 2}}} }}{{#if: {{{battle idol 3|}}} | <br/>{{{battle idol 3}}} }}{{#if: {{{battle idol 4|}}} | <br/>{{{battle idol 4}}} }}</format></data>
</infobox>

CSS elements

/* You invoke the new style by adding theme="yourtheme" to the <infobox> tag; other wise .portable-infobox */

/* Overall */
.pi-theme-yourtheme.pi-background { }   /* overall background */

.pi-theme-yourtheme { }  /* overall border, color, font, etc. */

.pi-theme-yourtheme .pi-font { } /* value font */

.pi-theme-yourtheme .pi-item /* almost everything gets this, so be careful */ { }

/* Images */
.pi-theme-yourtheme .pi-image { } /* alignment of image box */

.pi-theme-yourtheme .pi-image-thumbnail { /* for adjusting the image */
/*    max-width:          123px; Size of image, typically use the same width as infobox, minus borders*/
/*    max-height:         123px; (if needed) */
/*    width:              auto;  (if needed) */
/*    height:             auto;  Preserves the image ratio */
}

/* Elements */
.pi-theme-yourtheme .pi-item-spacing { } /* padding between each element */

/* Title */
.pi-theme-yourtheme .pi-title { } /* title padding, margin, font... */

/* Captions */
.pi-theme-yourtheme .pi-caption { } /* caption font, color, etc. */

/* Groups */
.pi-theme-yourtheme .pi-group { } /* group border, etc. */

.pi-theme-yourtheme .pi-border-color { } /* group and data border color */

.pi-theme-yourtheme .pi-horizontal-group { } /* table styles for horizontal group */

.pi-theme-yourtheme .pi-horizontal-group-item { } /* cell padding/margin */

.pi-theme-yourtheme .pi-horizontal-group .pi-data-label { } /* label in horizontal group */

.pi-theme-yourtheme .pi-horizontal-group-item { } /* table cells in horizontal group */

/* Headers */
.pi-theme-yourtheme .pi-header { } /* header alignment, border etc. */

.pi-theme-yourtheme .pi-secondary-font { } /* header, label font */

.pi-theme-yourtheme .pi-secondary-background { } /* header background */

/* Data */
.pi-theme-yourtheme .pi-data { } /* div around label and value */

.pi-theme-yourtheme .pi-data-label { } /* label alignment, wrapping, flex */
{
/*    flex-basis:    50%; */ /* Changes ratio of left/right column width */
}

/* Left column width and align */
.pi-data-label {
        flex-basis: 165px;
        text-align: left;
        font-size: 90%;
}

/* Right column align */
.pi-data-value {
        text-align: right;
        font-size: 90%;
}

/* Center both columns */
.pi-data .pi-data-label {
align-items: center;
display: flex;
justify-content: center;
} 

.pi-theme-yourtheme .pi-data .pi-secondary-font { } /* make font of data block different than header */

.pi-theme-yourtheme .pi-data-value { } /* value field (right column) */

.pi-theme-yourtheme .pi-data-value:not(:first-child) { } /* padding/margin between data columns */
{
/*    padding-left:       0;   */  /* As you think best */
/*    margin-left:        4px; */
}

/* Navigation */
.pi-theme-yourtheme .pi-navigation { } /* nav tag */

Collapsible elements

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

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.