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>