This is a documentation for Board Game Arena: play board games online !
Template:InfoBox: Difference between revisions
Jump to navigation
Jump to search
Sammy McSam (talk | contribs) (remove flex wrap) |
Sammy McSam (talk | contribs) (Template:InfoBox update: optimisation, renaming of variables) |
||
| Line 1: | Line 1: | ||
<div style="float:{{{float|none}}};clear:both;display:flex;margin:8px;"><div class="mw-collapsible mw-{{{state|}}}" style="display:flex;flex-direction:column;min-width:{{{minWidth|}}};max-width:{{{maxWidth|600}}}px;border-radius:{{{corner|0.5}}}rem;background:{{{ | <div style="float:{{{float|none}}};clear:both;display:flex;margin:8px;"><div class="mw-collapsible mw-{{{state|}}}"style="display:flex;flex-direction:column;min-width:{{{minWidth|}}};max-width:{{{maxWidth|600}}}px;border-radius:{{{corner|0.5}}}rem;background:{{{background|linear-gradient(135deg,{{{gradientA|#c00}}},{{{gradientB|#703}}},{{{gradientC|#307}}})}}};"><div class="mw-collapsible-toggle"style="padding:0.5rem;text-align:{{{titleAlign|center}}};color:{{{titleColor|#fff}}};font-weight:bold;overflow-wrap:break-word;hyphens:auto;">{{{title|Title}}}</div><div class="mw-collapsible-content"style="margin:0 0.25rem 0.25rem;padding:0.25rem;border-radius:calc({{{corner|0.5}}}rem - 0.25rem);background:{{{bodyBackground|#fffc}}};color:{{{bodyColor|#202122}}};overflow-wrap:break-word;hyphens:auto;">{{{body|Body}}}</div></div></div><noinclude> | ||
To use this infoBox template, type: | To use this infoBox template, type: | ||
< | :{{code|<nowiki>{{infoBox</nowiki>}} | ||
{{infoBox | :{{code|<nowiki>|title=YourTitle</nowiki>}} | ||
|title= | :{{code|<nowiki>|body=YourBody</nowiki>}} | ||
|body= | :{{code|<nowiki>}}</nowiki>}} | ||
}} | Replace {{code|YourTitle}} and {{code|YourBody}} when editing the page. | ||
</ | |||
== Parameters == | == Parameters == | ||
<div style="display:grid;grid-template-columns:repeat( | <div style="display:grid;grid-template-columns:repeat(3,max-content) 6rem 1fr;gap:0.5rem;overflow:auto;text-overflow:ellipsis;"> | ||
<div | <div>{{text|w=bold|Id}}</div> | ||
<div | <div>{{text|w=bold|Default}}</div> | ||
<div | <div>{{text|w=bold|Example}}</div> | ||
<div | <div>{{text|w=bold|Result}}</div> | ||
<div | <div>{{text|w=bold|Description}}</div> | ||
<div> | <div>{{code|title}}</div> | ||
<div> | <div>{{code|Title}}</div> | ||
<div> | <div>{{code|<nowiki>{{infoBox |title=Example}}</nowiki>}}</div> | ||
<div>{{infoBox |title=Example}}</div> | <div>{{infoBox |title=Example}}</div> | ||
<div> | <div>Title</div> | ||
<div> | <div>{{code|body}}</div> | ||
<div> | <div>{{code|Body}}</div> | ||
<div> | <div>{{code|<nowiki>{{infoBox |body=Content}}</nowiki>}}</div> | ||
<div>{{infoBox | <div>{{infoBox |body=Content}}</div> | ||
<div> | <div>Text, images, other templates..</div> | ||
<div> | <div>{{code|state}}</div> | ||
<div> | <div>expanded</div> | ||
<div> | <div>{{code|<nowiki>{{infoBox |state=collapsed}}</nowiki>}}</div> | ||
<div>{{infoBox | <div>{{infoBox |state=collapsed}}</div> | ||
<div> | <div>Collapse into a button (wiki only).</div> | ||
<div> | <div>{{code|float}}</div> | ||
<div> | <div>{{code|none}}</div> | ||
<div> | <div>{{code|<nowiki>{{infoBox |float=right}}</nowiki>}}</div> | ||
<div>{{infoBox | <div>{{infoBox |float=right}}</div> | ||
<div> | <div>Place on the {{code|left}} or {{code|right}} side of its container, allowing text to wrap around it.</div> | ||
<div> | <div>{{code|minWidth}}</div> | ||
<div> | <div>none</div> | ||
<div> | <div>{{code|<nowiki>{{infoBox |minWidth=100%}}</nowiki>}}</div> | ||
<div>{{infoBox | <div>{{infoBox |minWidth=100%}}</div> | ||
<div> | <div>Minimum width as a [https://developer.mozilla.org/en-US/docs/Web/CSS/length CSS length] e.g. {{code|500px}}.</div> | ||
<div> | <div>{{code|maxWidth}}</div> | ||
<div> | <div>{{code|600}}</div> | ||
<div> | <div>{{code|<nowiki>{{infoBox |maxWidth=80}}</nowiki>}}</div> | ||
<div>{{infoBox | <div>{{infoBox |maxWidth=80}}</div> | ||
<div> | <div>Maximum width in px units. | ||
'''''Tip:''''' {{code|<nowiki>{{infoBox |maxWidth=}}</nowiki>}} removes the maxWidth limit.</div> | |||
'''''Tip:''''' | <div>{{code|background}}</div> | ||
<div> | <div>gradient</div> | ||
<div> | <div>{{code|<nowiki>{{infoBox |background=green}}</nowiki>}}</div> | ||
<div>{{infoBox |background=green}}</div> | |||
<div>A solid color as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS color] e.g. {{code|green}}.</div> | |||
<div>{{code|gradientA}}</div> | |||
<div>{{code|#c00}} (red)</div> | |||
<div> | <div>{{code|<nowiki>{{infoBox |gradientA=lightgreen}}</nowiki>}}</div> | ||
<div>{{infoBox | | <div>{{infoBox |gradientA=lightgreen}}</div> | ||
<div> | <div>Top left color as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS color] e.g. {{code|green}}.</div> | ||
<div> | <div>{{code|gradientB}}</div> | ||
<div> | <div>{{code|#703}} (dark pink)</div> | ||
<div> | <div>{{code|<nowiki>{{infoBox |gradientB=lightgreen}}</nowiki>}}</div> | ||
<div>{{infoBox | | <div>{{infoBox |gradientB=lightgreen}}</div> | ||
<div> | <div>Middle color as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS color] e.g. {{code|green}}.</div> | ||
<div> | <div>{{code|gradientC}}</div> | ||
<div> | <div>{{code|#307}} (dark blue)</div> | ||
<div> | <div>{{code|<nowiki>{{infoBox |gradientC=lightgreen}}</nowiki>}}</div> | ||
<div>{{infoBox | | <div>{{infoBox |gradientC=lightgreen}}</div> | ||
<div> | <div>Bottom right color as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS color] e.g. {{code|green}}.</div> | ||
<div> | <div>{{code|bodyBackground}}</div> | ||
<div> | <div>{{code|#fffc}} (translucent white)</div> | ||
<div> | <div>{{code|<nowiki>{{infoBox |bodyBackground=lightgreen}}</nowiki>}}</div> | ||
<div>{{infoBox | | <div>{{infoBox |bodyBackground=lightgreen}}</div> | ||
<div> | <div>Body background color as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS color] e.g. {{code|green}}.</div> | ||
<div> | <div>{{code|titleColor}}</div> | ||
<div> | <div>white</div> | ||
<div> | <div>{{code|<nowiki>{{infoBox |titleColor=lightgreen}}</nowiki>}}</div> | ||
<div>{{infoBox | | <div>{{infoBox |titleColor=lightgreen}}</div> | ||
<div> | <div>Title text color as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS color] e.g. {{code|green}}.</div> | ||
<div> | <div>{{code|bodyColor}}</div> | ||
<div> | <div>{{code|#202122}} (black)</div> | ||
<div> | <div>{{code|<nowiki>{{infoBox |bodyColor=green}}</nowiki>}}</div> | ||
<div>{{infoBox | <div>{{infoBox |bodyColor=green}}</div> | ||
<div> | <div>Body color as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS color] e.g. {{code|green}}.</div> | ||
<div> | <div>{{code|titleAlign}}</div> | ||
<div> | <div>{{code|center}}</div> | ||
<div> | <div>{{code|<nowiki>{{infoBox |titleAlign=left}}</nowiki>}}</div> | ||
<div>{{infoBox | <div>{{infoBox |titleAlign=left}}</div> | ||
<div> | <div>Title alignment ({{code|left}} or {{code|right}}).</div> | ||
<div> | <div>{{code|corner}}</div> | ||
<div> | <div>{{code|0.5}}</div> | ||
<div> | <div>{{code|<nowiki>{{infoBox |corner=1}}</nowiki>}}</div> | ||
<div>{{infoBox | <div>{{infoBox |corner=1}}</div> | ||
<div> | <div>Corner radius in [https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length#rem rem units].</div> | ||
<div> | |||
<div> | |||
<div> | |||
<div>{{infoBox | |||
<div> | |||
</div> | </div> | ||
---- | ---- | ||
{{infoBoxes}} | {{infoBoxes}} | ||
Double infoBox: | |||
:{{code|<nowiki>{{</nowiki>infoBox'''es'''}} | |||
< | :{{code|<nowiki>|</nowiki>title'''1'''<nowiki>=</nowiki>}} | ||
{{ | :{{code|<nowiki>|</nowiki>body'''1'''<nowiki>=</nowiki>}} | ||
| | :{{code|<nowiki>|</nowiki>title'''2'''<nowiki>=</nowiki>}} | ||
| | :{{code|<nowiki>|</nowiki>body'''2'''<nowiki>=</nowiki>}} | ||
| | :{{code|<nowiki>}}</nowiki>}} | ||
| | |||
}} | |||
</ | |||
== Additional parameters == | == Additional parameters == | ||
<div style="display:grid;grid-template-columns:repeat(3,max-content) 1fr;gap:1rem;overflow:auto;text-overflow:ellipsis;"> | <div style="display:grid;grid-template-columns:repeat(3,max-content) 1fr;gap:1rem;overflow:auto;text-overflow:ellipsis;"> | ||
<div | <div>{{text|w=bold|Id}}</div> | ||
<div | <div>{{text|w=bold|Default}}</div> | ||
<div | <div>{{text|w=bold|Example}}</div> | ||
<div | <div>{{text|w=bold|Description}}</div> | ||
<div> | <div>{{code|title'''#'''}}</div> | ||
<div> | <div>{{code|Title'''#'''}}</div> | ||
<div> | <div>{{code|<nowiki>{{infoBoxes |title2=Example}}</nowiki>}}</div> | ||
<div>''''' | <div>Title where {{code|'''#'''}} is the InfoBox index.</div> | ||
<div> | <div>{{code|body'''#'''}}</div> | ||
<div> | <div>{{code|Body'''#'''}}</div> | ||
<div> | <div>{{code|<nowiki>{{infoBoxes |body2=Content}}</nowiki>}}</div> | ||
<div>''''' | <div>Body where {{code|'''#'''}} is the InfoBox index.</div> | ||
<div> | <div>{{code|background'''#'''}}</div> | ||
<div> | <div>gradient</div> | ||
<div> | <div>{{code|<nowiki>{{infoBoxes |background2=green}}</nowiki>}}</div> | ||
<div> | <div>Solid color of each infoBox as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS color] e.g. {{code|green}} where {{code|'''#'''}} is the InfoBox index.</div> | ||
<div> | <div>{{code|gradientD}}</div> | ||
<div> | <div>{{code|#00c}} (blue)</div> | ||
<div> | <div>{{code|<nowiki>{{infoBoxes |gradientD=green}}</nowiki>}}</div> | ||
<div> | <div>Bottom right color of the last InfoBox as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS color] e.g. {{code|green}}.</div> | ||
<div> | <div>{{code|title'''#'''color}}</div> | ||
<div> | <div>white</div> | ||
<div> | <div>{{code|<nowiki>{{infoBoxes |title2Color=black}}</nowiki>}}</div> | ||
<div> | <div>Title text color as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS color] e.g. {{code|green}} where {{code|'''#'''}} is the InfoBox index.</div> | ||
</div> | </div> | ||
| Line 150: | Line 137: | ||
{{infoBoxes3}} | {{infoBoxes3}} | ||
Triple infoBox: | |||
:{{code|<nowiki>{{</nowiki>infoBoxes'''3'''}} | |||
< | :{{code|<nowiki>|</nowiki>title1<nowiki>=</nowiki>}} | ||
{{ | :{{code|<nowiki>|</nowiki>body1<nowiki>=</nowiki>}} | ||
|title1= | :{{code|<nowiki>|</nowiki>title2<nowiki>=</nowiki>}} | ||
|body1= | :{{code|<nowiki>|</nowiki>body2<nowiki>=</nowiki>}} | ||
|title2= | :{{code|<nowiki>|</nowiki>title'''3'''<nowiki>=</nowiki>}} | ||
|body2= | :{{code|<nowiki>|</nowiki>body'''3'''<nowiki>=</nowiki>}} | ||
| | :{{code|<nowiki>}}</nowiki>}} | ||
| | |||
}} | |||
</ | |||
== Additional parameters == | == Additional parameters == | ||
<div style="display:grid;grid-template-columns:repeat(3,max-content) 1fr;gap:1rem;overflow:auto;text-overflow:ellipsis;"> | <div style="display:grid;grid-template-columns:repeat(3,max-content) 1fr;gap:1rem;overflow:auto;text-overflow:ellipsis;"> | ||
<div | <div>{{text|w=bold|Id}}</div> | ||
<div | <div>{{text|w=bold|Default}}</div> | ||
<div | <div>{{text|w=bold|Example}}</div> | ||
<div | <div>{{text|w=bold|Description}}</div> | ||
<div> | <div>{{code|gradientE}}</div> | ||
<div> | <div>{{code|#037}} (dark cyan)</div> | ||
<div> | <div>{{code|<nowiki>{{infoBoxes3 |gradientE=green}}</nowiki>}}</div> | ||
<div> | <div>Bottom right color of the last InfoBox as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS color] e.g. {{code|green}}.</div> | ||
</div> | </div> | ||
<noinclude> | |||
== [[:Category:TextTemplates]] == | |||
{{Category:TextTemplates}} | |||
== Pages using {{FULLPAGENAME}} == | |||
{{Special:WhatLinksHere/{{FULLPAGENAME}}}} | |||
</noinclude> | |||
[[Category:TextTemplates]] | [[Category:TextTemplates]] | ||
Latest revision as of 18:13, 10 February 2026
Title
Body
To use this infoBox template, type:
- {{infoBox
- |title=YourTitle
- |body=YourBody
- }}
Replace YourTitle and YourBody when editing the page.
Parameters
Id
Default
Example
Result
Description
title
Title
{{infoBox |title=Example}}
Example
Body
Title
body
Body
{{infoBox |body=Content}}
Title
Content
Text, images, other templates..
state
expanded
{{infoBox |state=collapsed}}
Title
Body
Collapse into a button (wiki only).
float
none
{{infoBox |float=right}}
Title
Body
Place on the left or right side of its container, allowing text to wrap around it.
minWidth
none
{{infoBox |minWidth=100%}}
Title
Body
Minimum width as a CSS length e.g. 500px.
maxWidth
600
{{infoBox |maxWidth=80}}
Title
Body
Maximum width in px units.
Tip: {{infoBox |maxWidth=}} removes the maxWidth limit.
background
gradient
{{infoBox |background=green}}
Title
Body
A solid color as a CSS color e.g. green.
gradientA
#c00 (red)
{{infoBox |gradientA=lightgreen}}
Title
Body
Top left color as a CSS color e.g. green.
gradientB
#703 (dark pink)
{{infoBox |gradientB=lightgreen}}
Title
Body
Middle color as a CSS color e.g. green.
gradientC
#307 (dark blue)
{{infoBox |gradientC=lightgreen}}
Title
Body
Bottom right color as a CSS color e.g. green.
bodyBackground
#fffc (translucent white)
{{infoBox |bodyBackground=lightgreen}}
Title
Body
Body background color as a CSS color e.g. green.
titleColor
white
{{infoBox |titleColor=lightgreen}}
Title
Body
Title text color as a CSS color e.g. green.
bodyColor
#202122 (black)
{{infoBox |bodyColor=green}}
Title
Body
Body color as a CSS color e.g. green.
titleAlign
center
{{infoBox |titleAlign=left}}
Title
Body
Title alignment (left or right).
corner
0.5
{{infoBox |corner=1}}
Title
Body
Corner radius in rem units.
Title1
Body1
Title2
Body2
Double infoBox:
- {{infoBoxes
- |title1=
- |body1=
- |title2=
- |body2=
- }}
Additional parameters
Id
Default
Example
Description
title#
Title#
{{infoBoxes |title2=Example}}
Title where # is the InfoBox index.
body#
Body#
{{infoBoxes |body2=Content}}
Body where # is the InfoBox index.
background#
gradient
{{infoBoxes |background2=green}}
gradientD
#00c (blue)
{{infoBoxes |gradientD=green}}
Bottom right color of the last InfoBox as a CSS color e.g. green.
title#color
white
{{infoBoxes |title2Color=black}}
Title1
Body1
Title2
Body2
Title3
Body3
Triple infoBox:
- {{infoBoxes3
- |title1=
- |body1=
- |title2=
- |body2=
- |title3=
- |body3=
- }}
Additional parameters
Id
Default
Example
Description
gradientE
#037 (dark cyan)
{{infoBoxes3 |gradientE=green}}
Bottom right color of the last InfoBox as a CSS color e.g. green.
Category:TextTemplates
Text Templates
Pages using Template:InfoBox
- Help (transclusion) (← links)
- Gamehelpraceforthegalaxy (transclusion) (← links)
- Gamehelpquoridor (transclusion) (← links)
- Gamehelpyatzy (transclusion) (← links)
- Gamehelpdudo (transclusion) (← links)
- Gamehelphive (transclusion) (← links)
- Gamehelphanabi (transclusion) (← links)
- Gamehelpbelote (transclusion) (← links)
- Tips hanabi (transclusion) (← links)
- BGA Studio Cookbook (transclusion) (← links)
- Tips chess (transclusion) (← links)
- Gamehelptaluva (transclusion) (← links)
- Gamehelpchess (transclusion) (← links)
- Gamehelpnxs (transclusion) (← links)
- Gamehelpmarrakech (transclusion) (← links)
- Tips ninetynine (transclusion) (← links)
- Gamehelpbarbu (transclusion) (← links)
- Tips piratenkapern (transclusion) (← links)
- Gamehelpmrjack (transclusion) (← links)
- Gamehelplinkage (transclusion) (← links)
- Tips taluva (transclusion) (← links)
- Wiki formatting (transclusion) (← links)
- Gamehelpgolf (transclusion) (← links)
- Gamehelptickettorideeurope (transclusion) (← links)
- Gamehelpsplendorduel (transclusion) (← links)
- Gamehelpsevenknightsbewitched (transclusion) (← links)
- Gamehelpdistilled (transclusion) (← links)
- Gamehelpelpasogwt (transclusion) (← links)
- Gamehelpcardia (transclusion) (← links)
- Gamehelpschottentotten (transclusion) (← links)
- User:SwHawk/Create Modular Code (transclusion) (← links)
- User:Sammy McSam/Hanabi/Examples (transclusion) (← links)
- User:Sammy McSam/Hanabi (transclusion) (← links)
- User:Sammy McSam/Hanabi page 2 (transclusion) (← links)
- Template:InfoBox (transclusion) (← links)
- Template:InfoBoxes (transclusion) (← links)
- Template:InfoBoxes3 (transclusion) (← links)
- Template:GameIcon (transclusion) (← links)
- Template:D6 (transclusion) (← links)