Template:Infobox application: Difference between revisions

Help

Revision as of 05:18, 5 September 2026

Description

A dark-themed infobox for the wiki's Discord bots/applications (Super-Shiritori, Word-Curatori, Vexitori). Replaces the old {{Character}} template, which was raw Fandom "Portable Infobox" markup (<infobox type="Character">) left over from the Fandom migration -- that extension was never self-hostable, so it rendered as literal unparsed tags rather than an actual infobox, and its fields (Species, Gender, Portrayed by, Marital status...) were built for fictional characters, not bots.

Syntax

{{Infobox application
| name        =
| color       =
| bg          =
| image       = [[File:Example.png|250px]]
| caption     =
| image1      =
| caption1    =
| image2      =
| caption2    =
| type        = Discord Bot
| function    =
| aliases     =
| platform    = Discord
| developer   =
| language    =
| status      = Active
| launched    =
| hosted_from =
| hosted      =
| access      =
| counterparts =
}}

All fields are optional except name (which defaults to the page title). A blank/omitted field just doesn't render that row.

Single image: use image (full wikitext, e.g. [[File:Example.png|250px]]) and optionally caption.

Multiple images (clickable tab bar): once image2 is set, the box switches to tabbed-gallery mode -- use image1/caption1, image2/caption2, up through image6/caption6. Each caption becomes a tab label; clicking a tab swaps the picture. See Super-Shiritori for a live 4-image example. (Requires JavaScript -- with it off, only the first image shows.)

Color scheme: color sets the accent color (tab bar, labels, header text -- default site orange #F19000); bg sets the card's background (default #2a0f00). Pick both to theme a box around its own images instead of the default orange/brown. Keep bg dark -- body text is a fixed light gray and won't stay readable on a light background.

hosted is always the current hosting location. Add hosted_from only if that location has changed since launch -- doing so splits the single "Hosted in" row into "Originally hosted" / "Currently hosted" instead. Leave hosted_from out for a bot that's never moved.

@@ Line 1: / Line 1: @@
-<includeonly><templatestyles src="Infobox application/styles.css"/><div class="infobox-application">
+<includeonly><templatestyles src="Infobox application/styles.css"/><div class="infobox-application"{{#if:{{{color|}}}{{{bg|}}}| style="{{#if:{{{color|}}}|--ia-accent: {{{color}}};}}{{#if:{{{bg|}}}| --ia-bg: {{{bg}}};}}"}}>
-<div class="infobox-application__title">{{{name|{{PAGENAME}}}}}</div>{{#if:{{{image|}}}|
+<div class="infobox-application__title">{{{name|{{PAGENAME}}}}}</div>{{#if:{{{image2|}}}|
+<div class="infobox-application__gallery">
+<div class="infobox-application__gallery-tabs">
+<div class="infobox-application__gallery-tab is-active" data-ia-tab="0">{{{caption1|Image 1}}}</div>{{#if:{{{image2|}}}|<div class="infobox-application__gallery-tab" data-ia-tab="1">{{{caption2|Image 2}}}</div>}}{{#if:{{{image3|}}}|<div class="infobox-application__gallery-tab" data-ia-tab="2">{{{caption3|Image 3}}}</div>}}{{#if:{{{image4|}}}|<div class="infobox-application__gallery-tab" data-ia-tab="3">{{{caption4|Image 4}}}</div>}}{{#if:{{{image5|}}}|<div class="infobox-application__gallery-tab" data-ia-tab="4">{{{caption5|Image 5}}}</div>}}{{#if:{{{image6|}}}|<div class="infobox-application__gallery-tab" data-ia-tab="5">{{{caption6|Image 6}}}</div>}}
+</div>
+<div class="infobox-application__gallery-slide" data-ia-slide="0">{{{image1|}}}{{#if:{{{caption1|}}}|<div class="infobox-application__gallery-caption">{{{caption1}}}</div>}}</div>{{#if:{{{image2|}}}|<div class="infobox-application__gallery-slide" data-ia-slide="1" hidden>{{{image2}}}{{#if:{{{caption2|}}}|<div class="infobox-application__gallery-caption">{{{caption2}}}</div>}}</div>}}{{#if:{{{image3|}}}|<div class="infobox-application__gallery-slide" data-ia-slide="2" hidden>{{{image3}}}{{#if:{{{caption3|}}}|<div class="infobox-application__gallery-caption">{{{caption3}}}</div>}}</div>}}{{#if:{{{image4|}}}|<div class="infobox-application__gallery-slide" data-ia-slide="3" hidden>{{{image4}}}{{#if:{{{caption4|}}}|<div class="infobox-application__gallery-caption">{{{caption4}}}</div>}}</div>}}{{#if:{{{image5|}}}|<div class="infobox-application__gallery-slide" data-ia-slide="4" hidden>{{{image5}}}{{#if:{{{caption5|}}}|<div class="infobox-application__gallery-caption">{{{caption5}}}</div>}}</div>}}{{#if:{{{image6|}}}|<div class="infobox-application__gallery-slide" data-ia-slide="5" hidden>{{{image6}}}{{#if:{{{caption6|}}}|<div class="infobox-application__gallery-caption">{{{caption6}}}</div>}}</div>}}
+</div>
+|{{#if:{{{image|}}}|
 <div class="infobox-application__image">{{{image}}}</div>}}{{#if:{{{caption|}}}|
-<div class="infobox-application__caption">{{{caption}}}</div>}}{{#if:{{{type|}}}|
+<div class="infobox-application__caption">{{{caption}}}</div>}}}}{{#if:{{{type|}}}|
 <div class="infobox-application__row"><div class="infobox-application__label">Type</div><div class="infobox-application__value">{{{type}}}</div></div>}}{{#if:{{{function|}}}|
 <div class="infobox-application__row"><div class="infobox-application__label">Function</div><div class="infobox-application__value">{{{function}}}</div></div>}}{{#if:{{{aliases|}}}|
@@ Line 10: / Line 17: @@
 <div class="infobox-application__row"><div class="infobox-application__label">Language</div><div class="infobox-application__value">{{{language}}}</div></div>}}{{#if:{{{status|}}}|
 <div class="infobox-application__row"><div class="infobox-application__label">Status</div><div class="infobox-application__value">{{{status}}}</div></div>}}{{#if:{{{launched|}}}|
-<div class="infobox-application__row"><div class="infobox-application__label">Launched</div><div class="infobox-application__value">{{{launched}}}</div></div>}}{{#if:{{{hosted|}}}|
+<div class="infobox-application__row"><div class="infobox-application__label">Launched</div><div class="infobox-application__value">{{{launched}}}</div></div>}}{{#if:{{{hosted|}}}|{{#if:{{{hosted_from|}}}|
-<div class="infobox-application__row"><div class="infobox-application__label">Hosted in</div><div class="infobox-application__value">{{{hosted}}}</div></div>}}{{#if:{{{access|}}}|
+<div class="infobox-application__row"><div class="infobox-application__label">Originally hosted</div><div class="infobox-application__value">{{{hosted_from}}}</div></div>
+<div class="infobox-application__row"><div class="infobox-application__label">Currently hosted</div><div class="infobox-application__value">{{{hosted}}}</div></div>|
+<div class="infobox-application__row"><div class="infobox-application__label">Hosted in</div><div class="infobox-application__value">{{{hosted}}}</div></div>}}}}{{#if:{{{access|}}}|
 <div class="infobox-application__row"><div class="infobox-application__label">Access</div><div class="infobox-application__value">{{{access}}}</div></div>}}{{#if:{{{counterparts|}}}|
 <div class="infobox-application__row"><div class="infobox-application__label">Related bots</div><div class="infobox-application__value">{{{counterparts}}}</div></div>}}
@@ Line 22: / Line 31: @@
 {{Infobox application
 | name        =
+| color       =
+| bg          =
 | image       = [[File:Example.png|250px]]
 | caption     =
+| image1      =
+| caption1    =
+| image2      =
+| caption2    =
 | type        = Discord Bot
 | function    =
@@ Line 32: / Line 47: @@
 | status      = Active
 | launched    =
+| hosted_from =
 | hosted      =
 | access      =
@@ Line 38: / Line 54: @@
 </pre>
-All fields are optional except <code>name</code> (which defaults to the page title). A blank/omitted field just doesn't render that row. <code>image</code> takes full wikitext, so a <code><nowiki><gallery></nowiki></code> block works too (see [[Super-Shiritori]] for an example with multiple profile pictures).
+All fields are optional except <code>name</code> (which defaults to the page title). A blank/omitted field just doesn't render that row.
+'''Single image:''' use <code>image</code> (full wikitext, e.g. <code><nowiki>[[File:Example.png|250px]]</nowiki></code>) and optionally <code>caption</code>.
+'''Multiple images (clickable tab bar):''' once <code>image2</code> is set, the box switches to tabbed-gallery mode -- use <code>image1</code>/<code>caption1</code>, <code>image2</code>/<code>caption2</code>, up through <code>image6</code>/<code>caption6</code>. Each caption becomes a tab label; clicking a tab swaps the picture. See [[Super-Shiritori]] for a live 4-image example. (Requires JavaScript -- with it off, only the first image shows.)
+'''Color scheme:''' <code>color</code> sets the accent color (tab bar, labels, header text -- default site orange <code>#F19000</code>); <code>bg</code> sets the card's background (default <code>#2a0f00</code>). Pick both to theme a box around its own images instead of the default orange/brown. Keep <code>bg</code> dark -- body text is a fixed light gray and won't stay readable on a light background.
+<code>hosted</code> is always the '''current''' hosting location. Add <code>hosted_from</code> only if that location has changed since launch -- doing so splits the single "Hosted in" row into "Originally hosted" / "Currently hosted" instead. Leave <code>hosted_from</code> out for a bot that's never moved.
 [[Category:Infobox templates]]
 </noinclude>