This is a documentation for Board Game Arena: play board games online !

Template:InfoBox: Difference between revisions

From Board Game Arena
Jump to navigation Jump to search
(reduce the vertical spacing on the title bar)
 
(20 intermediate revisions by the same user not shown)
Line 1: Line 1:
<div style="max-width:{{{maxWidth|600}}}px;display:flex;flex-flow:column wrap;margin:0.5rem;border-radius:{{{corner|0.5}}}rem;background:{{{colour|linear-gradient(to bottom right,{{{topLeftColour|#c00}}},{{{middleColour|#703}}},{{{bottomRightColour|#307}}})}}};"><div style="color:{{{titleColour|#fff}}};text-align:{{{titleAlign|center}}};font-weight:bold;">{{{title}}}</div><div style="margin:0.25rem;border-radius:calc({{{corner|0.5}}}rem / 2);padding:0.25rem;background:{{{bodyBackgroundColour|#fffc}}};">
<div style="float:{{{float|none}}};clear:both;display:flex;margin:8px;"><div class="mw-collapsible mw-{{{state|}}}" style="display:flex;flex-flow:column wrap;min-width:{{{minWidth|}}};max-width:{{{maxWidth|600}}}px;border-radius:{{{corner|0.5}}}rem;background:{{{color|linear-gradient(to bottom right,{{{colorA|#c00}}},{{{colorB|#703}}},{{{colorC|#307}}})}}};"><div class="mw-collapsible-toggle" style="box-sizing:border-box;width:100%;padding:0.5rem;text-align:{{{titleAlign|center}}};color:{{{titleColor|#fff}}};font-weight:bold;overflow-wrap:break-word;hyphens:auto;"><span>{{{title}}}</span></div><div class="mw-collapsible-content" style="box-sizing:border-box;width:calc(100% - 0.5rem);margin:0 0.25rem 0.25rem;padding:0.25rem;border-radius:calc({{{corner|0.5}}}rem - 0.25rem);background:{{{bodyBgColor|#fffc}}};color:{{{bodyColor|#202122}}};overflow-wrap:break-word;hyphens:auto;"><span>{{{body}}}</span></div></div></div><noinclude>
{{{body}}}
</div></div><noinclude>
To insert this info box template into a BGA wiki page, simply type <code><nowiki>{{infoBox}}</nowiki></code> ''(or <code><nowiki>{{infoBoxes}}</nowiki></code> for a pair of info boxes)'' when editing the page.


== Available parameters ==
To use this infoBox template, type:
<pre>
{{infoBox
|title=Example
|body=
}}
</pre>


<div style="display:grid;grid-template-columns:repeat(4,max-content);gap:1rem;overflow:hidden;text-overflow:ellipsis;">
with the title and body when editing the page.
 
== Parameters ==
 
<div style="display:grid;grid-template-columns:repeat(4,max-content) 1fr;gap:0 0.25rem;overflow:auto;text-overflow:ellipsis;">
   <div style="font-weight:bold;width:8rem;">Parameter</div>
   <div style="font-weight:bold;width:8rem;">Parameter</div>
   <div style="font-weight:bold;width:8rem;">Default value</div>
   <div style="font-weight:bold;width:8rem;">Default value</div>
   <div style="font-weight:bold;width:8rem;">Example</div>
   <div style="font-weight:bold;width:8rem;">Example</div>
  <div style="font-weight:bold;width:8rem;">Result</div>
   <div style="font-weight:bold;width:8rem;">Description</div>
   <div style="font-weight:bold;width:8rem;">Description</div>
   <div><code>title</code></div>
   <div><code>title</code></div>
   <div><code>null</code></div>
   <div><code>null</code></div>
   <div><code><nowiki>{{infoBox |title=Your title text}}</nowiki></code></div>
   <div><code><nowiki>{{infoBox |title=Example}}</nowiki></code></div>
   <div><b><i>Optional:</i></b> specify a title for the infoBox.</div>
   <div>{{infoBox |title=Example}}</div>
  <div>'''''Optional:''''' specify a title.</div>
   <div><code>body</code></div>
   <div><code>body</code></div>
   <div><code>null</code></div>
   <div><code>null</code></div>
   <div><code><nowiki>{{infoBox |body=Your body content}}</nowiki></code>.</div>
   <div><code><nowiki>{{infoBox |body=Body content}}</nowiki></code></div>
   <div><b><i>Optional:</i></b> specify any body content.</div>
  <div>{{infoBox |title=Example |body=Body content}}</div>
  <div>'''''Optional:''''' specify any body content.</div>
  <div><code>state</code></div>
  <div><code>null</code></div>
  <div><code><nowiki>{{infoBox |state=collapsed}}</nowiki></code></div>
  <div>{{infoBox |title=Example |body=Body content |state=collapsed}}</div>
  <div>'''''Optional:''''' collapsed by default.</div>
   <div><code>float</code></div>
  <div><code>none</code></div>
  <div><code><nowiki>{{infoBox |float=right}}</nowiki></code></div>
  <div>{{infoBox |title=Example |body=Body content |float=right}}</div>
  <div>'''''Optional:''''' Place on the <code>left</code> or <code>right</code> side of its container, allowing text to wrap around it.</div>
  <div><code>minWidth</code></div>
  <div><code>null</code></div>
  <div><code><nowiki>{{infoBox |minWidth=100%}}</nowiki></code></div>
  <div>{{infoBox |title=Example |body=Body content |minWidth=100%}}</div>
  <div>'''''Optional:''''' specify the minimum width as a [https://developer.mozilla.org/en-US/docs/Web/CSS/length CSS length] e.g. <code>500px</code>.</div>
   <div><code>maxWidth</code></div>
   <div><code>maxWidth</code></div>
   <div><code>600</code></div>
   <div><code>600</code></div>
   <div><code><nowiki>{{infoBox |maxWidth=400}}</nowiki></code></div>
   <div><code><nowiki>{{infoBox |maxWidth=80}}</nowiki></code></div>
   <div><b><i>Optional:</i></b> specify the maximum width of the infoBox in px units.</div>
   <div>{{infoBox |title=Example |body=Body content |maxWidth=80}}</div>
   <div><code>topLeftColour</code></div>
  <div>'''''Optional:''''' specify the maximum width in px units.
   <div><code>#c30</code></div>
 
   <div><code><nowiki>{{infoBox |topLeftColour=red}}</nowiki></code></div>
 
   <div><b><i>Optional:</i></b> specify the top left corner colour gradient of the infoBox as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS colour] e.g. <code>blue</code>.</div>
'''''Tip:''''' use <code><nowiki>{{infoBox |maxWidth=}}</nowiki></code> (empty) to remove the maxWidth limit.</div>
   <div><code>middleColour</code></div>
   <div><code>color</code></div>
   <div><code>#707</code></div>
   <div><pre>linear-gradient(
   <div><code><nowiki>{{infoBox |middleColour=green}}</nowiki></code></div>
to bottom right,
   <div><b><i>Optional:</i></b> specify the middle colour gradient of the infoBox as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS colour] e.g. <code>blue</code>.</div>
{{{colorA|#c00}}},
   <div><code>bottomRightColour</code></div>
{{{colorB|#703}}},
   <div><code>#70c</code></div>
{{{colorC|#307}}})</pre></div>
   <div><code><nowiki>{{infoBox |bottomRightColour=blue}}</nowiki></code></div>
   <div><code><nowiki>{{infoBox |color=green}}</nowiki></code></div>
   <div><b><i>Optional:</i></b> specify the bottom right corner colour gradient of the infoBox as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS colour] e.g. <code>blue</code>.</div>
   <div>{{infoBox |title=Example |body=Body content |color=green}}</div>
   <div><code>titleColour</code></div>
  <div>'''''Optional:''''' specify a single color of the infoBox as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS color] e.g. <code>green</code>.</div>
   <div><code>#fff</code></div>
  <div><code>colorA</code></div>
   <div><code><nowiki>{{infoBox |titleColour=black}}</nowiki></code></div>
  <div><code>#c00</code> (red)</div>
   <div><b><i>Optional:</i></b> specify the title text colour as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS colour] e.g. <code>blue</code>.</div>
  <div><code><nowiki>{{infoBox |colorA=lightgreen}}</nowiki></code></div>
  <div>{{infoBox |title=Example |body=Body content |colorA=lightgreen}}</div>
  <div>'''''Optional:''''' specify the top left corner color gradient of the infoBox as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS color] e.g. <code>green</code>.</div>
   <div><code>colorB</code></div>
   <div><code>#703</code> (dark pink)</div>
   <div><code><nowiki>{{infoBox |colorB=lightgreen}}</nowiki></code></div>
   <div>{{infoBox |title=Example |body=Body content |colorB=lightgreen}}</div>
  <div>'''''Optional:''''' specify the middle color gradient of the infoBox as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS color] e.g. <code>green</code>.</div>
   <div><code>colorC</code></div>
   <div><code>#307</code> (dark blue)</div>
   <div><code><nowiki>{{infoBox |colorC=lightgreen}}</nowiki></code></div>
   <div>{{infoBox |title=Example |body=Body content |colorC=lightgreen}}</div>
  <div>'''''Optional:''''' specify the bottom right corner color gradient of the infoBox as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS color] e.g. <code>green</code>.</div>
  <div><code>bodyBgColor</code></div>
  <div><code>#fffc</code> (translucent white)</div>
  <div><code><nowiki>{{infoBox |bodyBgColor=lightgreen}}</nowiki></code></div>
  <div>{{infoBox |title=Example |body=Body content |bodyBgColor=lightgreen}}</div>
  <div>'''''Optional:''''' specify the body background color as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS color] e.g. <code>green</code>.</div>
   <div><code>titleColor</code></div>
   <div><code>#fff</code> (white)</div>
   <div><code><nowiki>{{infoBox |titleColor=lightgreen}}</nowiki></code></div>
   <div>{{infoBox |title=Example |body=Body content |titleColor=lightgreen}}</div>
  <div>'''''Optional:''''' specify the title color as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS color] e.g. <code>green</code>.</div>
  <div><code>bodyColor</code></div>
  <div><code>#202122</code> (black)</div>
  <div><code><nowiki>{{infoBox |bodyColor=green}}</nowiki></code></div>
  <div>{{infoBox |title=Example |body=Body content |bodyColor=green}}</div>
  <div>'''''Optional:''''' specify the title color as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS color] e.g. <code>green</code>.</div>
  <div><code>titleAlign</code></div>
  <div><code>center</code></div>
  <div><code><nowiki>{{infoBox |titleAlign=left}}</nowiki></code></div>
  <div>{{infoBox |title=Example |body=Body content |titleAlign=left}}</div>
  <div>'''''Optional:''''' specify the title alignment as <code>left</code> or <code>right</code>.</div>
   <div><code>corner</code></div>
   <div><code>corner</code></div>
   <div><code>0.5</code></div>
   <div><code>0.5</code></div>
   <div><code><nowiki>{{infoBox |corner=1}}</nowiki></code></div>
   <div><code><nowiki>{{infoBox |corner=1}}</nowiki></code></div>
   <div><b><i>Optional:</i></b> specify the corner radius of the infoBox in rem units.</div>
   <div>{{infoBox |title=Example |body=Body content |corner=1}}</div>
  <div>'''''Optional:''''' specify the corner radius in rem units.</div>
</div>
----
{{infoBoxes}}
 
To use a double infoBox template, type:
 
<pre>
{{infoBoxes
|title1=Example 1
|body1=
|title2=Example 2
|body2=
}}
</pre>
 
with the title and body when editing the page.
 
== Additional parameters ==
 
<div style="display:grid;grid-template-columns:repeat(3,max-content) 1fr;gap:1rem;overflow:auto;text-overflow:ellipsis;">
  <div style="font-weight:bold;width:8rem;">Parameter</div>
  <div style="font-weight:bold;width:8rem;">Default value</div>
  <div style="font-weight:bold;width:8rem;">Example</div>
  <div style="font-weight:bold;width:8rem;">Description</div>
  <div><code>title'''#'''</code></div>
  <div><code>null</code></div>
  <div><code><nowiki>{{infoBoxes |title2=Example}}</nowiki></code></div>
  <div>'''''Optional:''''' specify a title.</div>
  <div><code>body'''#'''</code></div>
  <div><code>null</code></div>
  <div><code><nowiki>{{infoBoxes |body2=Body content}}</nowiki></code></div>
  <div>'''''Optional:''''' specify any body content.</div>
  <div><code>color'''#'''</code></div>
  <div><code>linear-gradient</code></div>
  <div><code><nowiki>{{infoBoxes |color2=green}}</nowiki></code></div>
  <div>'''''Optional:''''' specify a single color of each infoBox as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS color] e.g. <code>green</code>.</div>
  <div><code>colorD</code></div>
  <div><code>#00c</code> (blue)</div>
  <div><code><nowiki>{{infoBoxes |colorD=green}}</nowiki></code></div>
  <div>'''''Optional:''''' specify the bottom right corner color of the second infoBox as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS color] e.g. <code>green</code>.</div>
  <div><code>title'''#'''color</code></div>
  <div><code>#fff</code></div>
  <div><code><nowiki>{{infoBoxes |title2Color=black}}</nowiki></code></div>
  <div>'''''Optional:''''' specify the title color as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS color] e.g. <code>green</code>.</div>
</div>
</div>


----
{{infoBoxes3}}
To use a triple infoBox template, type:
<pre>
{{infoBoxes3
|title1=Example 1
|body1=
|title2=Example 2
|body2=
|title3=Example 3
|body3=
}}
</pre>
with the title and body when editing the page.
== Additional parameters ==
<div style="display:grid;grid-template-columns:repeat(3,max-content) 1fr;gap:1rem;overflow:auto;text-overflow:ellipsis;">
  <div style="font-weight:bold;width:8rem;">Parameter</div>
  <div style="font-weight:bold;width:8rem;">Default value</div>
  <div style="font-weight:bold;width:8rem;">Example</div>
  <div style="font-weight:bold;width:8rem;">Description</div>
  <div><code>colorE</code></div>
  <div><code>#037</code> (dark cyan)</div>
  <div><code><nowiki>{{infoBoxes3 |colorE=green}}</nowiki></code></div>
  <div>'''''Optional:''''' specify the bottom right corner color of the third infoBox as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS color] e.g. <code>green</code>.</div>
</div>
[[Category:TextTemplates]]
</noinclude>
</noinclude>

Latest revision as of 21:15, 1 July 2025

{{{title}}}
{{{body}}}

To use this infoBox template, type: 

{{infoBox
|title=Example
|body=
}}

with the title and body when editing the page.

Parameters

Parameter
Default value
Example
Result
Description
title
null
{{infoBox |title=Example}}
Example
{{{body}}}
Optional: specify a title.
body
null
{{infoBox |body=Body content}}
Example
Body content
Optional: specify any body content.
state
null
{{infoBox |state=collapsed}}
Example
Body content
Optional: collapsed by default.
float
none
{{infoBox |float=right}}
Example
Body content
Optional: Place on the left or right side of its container, allowing text to wrap around it.
minWidth
null
{{infoBox |minWidth=100%}}
Example
Body content
Optional: specify the minimum width as a CSS length e.g. 500px.
maxWidth
600
{{infoBox |maxWidth=80}}
Example
Body content
Optional: specify the maximum width in px units.


Tip: use {{infoBox |maxWidth=}} (empty) to remove the maxWidth limit.
color
linear-gradient(
to bottom right,
{{{colorA|#c00}}},
{{{colorB|#703}}},
{{{colorC|#307}}})
{{infoBox |color=green}}
Example
Body content
Optional: specify a single color of the infoBox as a CSS color e.g. green.
colorA
#c00 (red)
{{infoBox |colorA=lightgreen}}
Example
Body content
Optional: specify the top left corner color gradient of the infoBox as a CSS color e.g. green.
colorB
#703 (dark pink)
{{infoBox |colorB=lightgreen}}
Example
Body content
Optional: specify the middle color gradient of the infoBox as a CSS color e.g. green.
colorC
#307 (dark blue)
{{infoBox |colorC=lightgreen}}
Example
Body content
Optional: specify the bottom right corner color gradient of the infoBox as a CSS color e.g. green.
bodyBgColor
#fffc (translucent white)
{{infoBox |bodyBgColor=lightgreen}}
Example
Body content
Optional: specify the body background color as a CSS color e.g. green.
titleColor
#fff (white)
{{infoBox |titleColor=lightgreen}}
Example
Body content
Optional: specify the title color as a CSS color e.g. green.
bodyColor
#202122 (black)
{{infoBox |bodyColor=green}}
Example
Body content
Optional: specify the title color as a CSS color e.g. green.
titleAlign
center
{{infoBox |titleAlign=left}}
Example
Body content
Optional: specify the title alignment as left or right.
corner
0.5
{{infoBox |corner=1}}
Example
Body content
Optional: specify the corner radius in rem units.
{{{title1}}}
{{{body1}}}
{{{title2}}}
{{{body2}}}

To use a double infoBox template, type: 

{{infoBoxes
|title1=Example 1
|body1=
|title2=Example 2
|body2=
}}

with the title and body when editing the page.

Additional parameters

Parameter
Default value
Example
Description
title#
null
{{infoBoxes |title2=Example}}
Optional: specify a title.
body#
null
{{infoBoxes |body2=Body content}}
Optional: specify any body content.
color#
linear-gradient
{{infoBoxes |color2=green}}
Optional: specify a single color of each infoBox as a CSS color e.g. green.
colorD
#00c (blue)
{{infoBoxes |colorD=green}}
Optional: specify the bottom right corner color of the second infoBox as a CSS color e.g. green.
title#color
#fff
{{infoBoxes |title2Color=black}}
Optional: specify the title color as a CSS color e.g. green.
{{{title1}}}
{{{body1}}}
{{{title2}}}
{{{body2}}}
{{{title3}}}
{{{body3}}}

To use a triple infoBox template, type: 

{{infoBoxes3
|title1=Example 1
|body1=
|title2=Example 2
|body2=
|title3=Example 3
|body3=
}}

with the title and body when editing the page.

Additional parameters

Parameter
Default value
Example
Description
colorE
#037 (dark cyan)
{{infoBoxes3 |colorE=green}}
Optional: specify the bottom right corner color of the third infoBox as a CSS color e.g. green.
Retrieved from "http:///index.php?title=Template:InfoBox&oldid=25659"