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
(class="mw-collapsible mw-{{{state|}}}" class="mw-collapsible-toggle" class="mw-collapsible-content")
(renamed template parameters)
Line 1: Line 1:
<div style="display:flex;"><div class="mw-collapsible mw-{{{state|}}}" 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 class="mw-collapsible-toggle" style="padding:0.5rem;color:{{{titleColour|#fff}}};text-align:{{{titleAlign|center}}};font-weight:bold;">{{{title}}}</div><div class="mw-collapsible-content" style="margin:0 0.25rem 0.25rem;border-radius:calc({{{corner|0.5}}}rem / 2);padding:0.25rem;background:{{{bodyBackgroundColour|#fffc}}};">{{{body}}}</div></div></div><noinclude>
<div style="display:flex;"><div class="mw-collapsible mw-{{{state|}}}" style="max-width:{{{maxWidth|600}}}px;display:flex;flex-flow:column wrap;margin:0.5rem;border-radius:{{{corner|0.5}}}rem;background:{{{color|linear-gradient(to bottom right,{{{color1|#c00}}},{{{color2|#703}}},{{{color3|#307}}})}}};"><div class="mw-collapsible-toggle" style="padding:0.5rem;color:{{{titlecolor|#fff}}};text-align:{{{titleAlign|center}}};font-weight:bold;">{{{title}}}</div><div class="mw-collapsible-content" style="margin:0 0.25rem 0.25rem;border-radius:calc({{{corner|0.5}}}rem - 0.25rem);padding:0.25rem;background:{{{bodyBackgroundcolor|#fffc}}};">{{{body}}}</div></div></div><noinclude>
{{infoBox |state=collapsed}}
 
To insert this info box template into a BGA wiki page, simply type <code><nowiki>{{infoBox}}</nowiki></code> when editing the page.
To use this infoBox template, type:
 
<pre>
{{infoBox
|title=Example
|body=
}}
</pre>
 
with the title and body when editing the page.


== Available parameters ==
== Available parameters ==


<div style="display:grid;grid-template-columns:repeat(4,max-content);gap:1rem;overflow:auto;text-overflow:ellipsis;">
<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>{{infoBox |title=Example}}</div>
   <div>'''''Optional:''''' specify a title.</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>{{infoBox |title=Example |body=Body content}}</div>
   <div>'''''Optional:''''' specify any body content.</div>
   <div>'''''Optional:''''' specify any body content.</div>
   <div><code>state</code></div>
   <div><code>state</code></div>
   <div><code>null</code></div>
   <div><code>null</code></div>
   <div><code><nowiki>{{infoBox |state=collapsed}}</nowiki></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>'''''Optional:''''' collapsed by default.</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>{{infoBox |title=Example |body=Body content |maxWidth=80}}</div>
   <div>'''''Optional:''''' specify the maximum width in px units.</div>
   <div>'''''Optional:''''' specify the maximum width in px units.</div>
   <div><code>topLeftColour</code></div>
   <div><code>color</code></div>
   <div><code>#c00</code></div>
   <div><pre>linear-gradient(
   <div><code><nowiki>{{infoBox |topLeftColour=red}}</nowiki></code></div>
to bottom right,
   <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>
{{{color1|#c00}}},
   <div><code>middleColour</code></div>
{{{color2|#703}}},
   <div><code>#703</code></div>
{{{color3|#307}}})</pre></div>
   <div><code><nowiki>{{infoBox |middleColour=green}}</nowiki></code></div>
   <div><code><nowiki>{{infoBox |color=green}}</nowiki></code></div>
   <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>
   <div>{{infoBox |title=Example |body=Body content |color=green}}</div>
   <div><code>bottomRightColour</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>#307</code></div>
  <div><code>color1</code></div>
   <div><code><nowiki>{{infoBox |bottomRightColour=blue}}</nowiki></code></div>
  <div><code>#c00</code> (red)</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><code><nowiki>{{infoBox |color1=lightgreen}}</nowiki></code></div>
   <div><code>titleColour</code></div>
  <div>{{infoBox |title=Example |body=Body content |color1=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>color2</code></div>
   <div><code>#703</code> (dark pink)</div>
   <div><code><nowiki>{{infoBox |color2=lightgreen}}</nowiki></code></div>
   <div>{{infoBox |title=Example |body=Body content |color2=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>color3</code></div>
   <div><code>#307</code> (dark blue)</div>
   <div><code><nowiki>{{infoBox |color3=lightgreen}}</nowiki></code></div>
   <div>{{infoBox |title=Example |body=Body content |color3=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>titlecolor</code></div>
   <div><code>#fff</code></div>
   <div><code>#fff</code></div>
   <div><code><nowiki>{{infoBox |titleColour=black}}</nowiki></code></div>
   <div><code><nowiki>{{infoBox |titlecolor=black}}</nowiki></code></div>
   <div>'''''Optional:''''' 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>{{infoBox |title=Example |body=Body content |color=lightgreen |titlecolor=black}}</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>titleAlign</code></div>
   <div><code>center</code></div>
   <div><code>center</code></div>
   <div><code><nowiki>{{infoBox |titleAlign=left}}</nowiki></code></div>
   <div><code><nowiki>{{infoBox |titleAlign=left}}</nowiki></code></div>
   <div>'''''Optional:''''' specify the title text alignment as <code>left</code> or <code>right</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>{{infoBox |title=Example |body=Body content |corner=1}}</div>
   <div>'''''Optional:''''' specify the corner radius in rem units.</div>
   <div>'''''Optional:''''' specify the corner radius in rem units.</div>
</div>
</div>
Line 54: Line 83:
{{infoBoxes}}
{{infoBoxes}}


To insert a pair of info boxes into a BGA wiki page, simply type <code><nowiki>{{infoBoxes}}</nowiki></code> when editing the page.
To use a double infoBox template, type:


== Available parameters ==
<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(4,max-content);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 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;">Description</div>
   <div style="font-weight:bold;width:8rem;">Description</div>
   <div><code>title<b>#</b></code></div>
   <div><code>title'''#'''</code></div>
   <div><code>null</code></div>
   <div><code>null</code></div>
   <div><code><nowiki>{{infoBoxes |title2=Your title text}}</nowiki></code></div>
   <div><code><nowiki>{{infoBoxes |title2=Example}}</nowiki></code></div>
   <div>'''''Optional:''''' specify a title.</div>
   <div>'''''Optional:''''' specify a title.</div>
   <div><code>body<b>#</b></code></div>
   <div><code>body'''#'''</code></div>
   <div><code>null</code></div>
   <div><code>null</code></div>
   <div><code><nowiki>{{infoBoxes |body2=Your body content}}</nowiki></code></div>
   <div><code><nowiki>{{infoBoxes |body2=Body content}}</nowiki></code></div>
   <div>'''''Optional:''''' specify any body content.</div>
   <div>'''''Optional:''''' specify any body content.</div>
   <div><code>state</code></div>
   <div><code>color4</code></div>
  <div><code>null</code></div>
   <div><code>#00c</code> (blue)</div>
  <div><code><nowiki>{{infoBoxes |state=collapsed}}</nowiki></code></div>
   <div><code><nowiki>{{infoBoxes |color4=green}}</nowiki></code></div>
  <div>'''''Optional:''''' collapsed by default.</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>maxWidth</code></div>
   <div><code>title'''#'''color</code></div>
  <div><code>600</code></div>
  <div><code><nowiki>{{infoBoxes |maxWidth=400}}</nowiki></code></div>
  <div>'''''Optional:''''' specify the maximum width in px units.</div>
  <div><code>colour1</code></div>
   <div><code>#c00</code></div>
   <div><code><nowiki>{{infoBoxes |colour1=red}}</nowiki></code></div>
   <div>'''''Optional:''''' specify the top left corner colour of the first infoBox as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS colour] e.g. <code>blue</code>.</div>
  <div><code>colour2</code></div>
  <div><code>#703</code></div>
  <div><code><nowiki>{{infoBoxes |colour2=green}}</nowiki></code></div>
  <div>'''''Optional:''''' specify the top left colour of the second infoBox as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS colour] e.g. <code>blue</code>.</div>
   <div><code>colour3</code></div>
  <div><code>#307</code></div>
  <div><code><nowiki>{{infoBoxes |colour3=blue}}</nowiki></code></div>
  <div>'''''Optional:''''' specify the middle colour of the second infoBox as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS colour] e.g. <code>blue</code>.</div>
  <div><code>colour4</code></div>
  <div><code>#00c</code></div>
  <div><code><nowiki>{{infoBoxes |colour4=purple}}</nowiki></code></div>
  <div>'''''Optional:''''' specify the bottom right corner colour of the second infoBox as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS colour] e.g. <code>blue</code>.</div>
  <div><code>title<b>#</b>Colour</code></div>
   <div><code>#fff</code></div>
   <div><code>#fff</code></div>
   <div><code><nowiki>{{infoBoxes |title2Colour=black}}</nowiki></code></div>
   <div><code><nowiki>{{infoBoxes |title2color=black}}</nowiki></code></div>
   <div>'''''Optional:''''' 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>'''''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>title<b>#</b>Align</code></div>
  <div><code>center</code></div>
  <div><code><nowiki>{{infoBoxes |title2Align=left}}</nowiki></code></div>
  <div>'''''Optional:''''' specify the title text alignment as <code>left</code> or <code>right</code>.</div>
  <div><code>corner</code></div>
  <div><code>0.5</code></div>
  <div><code><nowiki>{{infoBoxes |corner=1}}</nowiki></code></div>
  <div>'''''Optional:''''' specify the corner radius in rem units.</div>
</div>
</div>


Line 112: Line 124:
{{infoBoxes3}}
{{infoBoxes3}}


To insert three info boxes into a BGA wiki page, simply type <code><nowiki>{{infoBoxes3}}</nowiki></code> when editing the page.
To use a triple infoBox template, type:


== Available parameters ==
<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(4,max-content);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 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;">Description</div>
   <div style="font-weight:bold;width:8rem;">Description</div>
   <div><code>title<b>#</b></code></div>
   <div><code>color5</code></div>
  <div><code>null</code></div>
   <div><code>#037</code> (dark cyan)</div>
   <div><code><nowiki>{{infoBoxes3 |title3=Your title text}}</nowiki></code></div>
   <div><code><nowiki>{{infoBoxes3 |color5=green}}</nowiki></code></div>
  <div>'''''Optional:''''' specify a title.</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><code>body<b>#</b></code></div>
  <div><code>null</code></div>
  <div><code><nowiki>{{infoBoxes3 |body3=Your body content}}</nowiki></code></div>
  <div>'''''Optional:''''' specify any body content.</div>
  <div><code>state</code></div>
  <div><code>null</code></div>
  <div><code><nowiki>{{infoBoxes3 |state=collapsed}}</nowiki></code></div>
  <div>'''''Optional:''''' collapsed by default.</div>
  <div><code>maxWidth</code></div>
  <div><code>600</code></div>
  <div><code><nowiki>{{infoBoxes3 |maxWidth=400}}</nowiki></code></div>
  <div>'''''Optional:''''' specify the maximum width in px units.</div>
  <div><code>colour1</code></div>
  <div><code>#c00</code></div>
   <div><code><nowiki>{{infoBoxes3 |colour1=red}}</nowiki></code></div>
  <div>'''''Optional:''''' specify the top left corner colour of the first infoBox as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS colour] e.g. <code>blue</code>.</div>
  <div><code>colour2</code></div>
  <div><code>#703</code></div>
  <div><code><nowiki>{{infoBoxes3 |colour2=green}}</nowiki></code></div>
  <div>'''''Optional:''''' specify the top left colour of the second infoBox as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS colour] e.g. <code>blue</code>.</div>
  <div><code>colour3</code></div>
  <div><code>#307</code></div>
  <div><code><nowiki>{{infoBoxes3 |colour3=blue}}</nowiki></code></div>
  <div>'''''Optional:''''' specify the top left corner colour of the third infoBox as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS colour] e.g. <code>blue</code>.</div>
  <div><code>colour4</code></div>
  <div><code>#00c</code></div>
  <div><code><nowiki>{{infoBoxes3 |colour4=purple}}</nowiki></code></div>
  <div>'''''Optional:''''' specify the middle colour of the third infoBox as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS colour] e.g. <code>blue</code>.</div>
  <div><code>colour5</code></div>
  <div><code>#037</code></div>
  <div><code><nowiki>{{infoBoxes3 |colour5=red}}</nowiki></code></div>
   <div>'''''Optional:''''' specify the bottom right corner colour of the third infoBox as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS colour] e.g. <code>blue</code>.</div>
  <div><code>title<b>#</b>Colour</code></div>
  <div><code>#fff</code></div>
  <div><code><nowiki>{{infoBoxes3 |title3Colour=black}}</nowiki></code></div>
  <div>'''''Optional:''''' 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>title<b>#</b>Align</code></div>
  <div><code>center</code></div>
  <div><code><nowiki>{{infoBoxes3 |title3Align=left}}</nowiki></code></div>
  <div>'''''Optional:''''' specify the title text alignment as <code>left</code> or <code>right</code>.</div>
  <div><code>corner</code></div>
  <div><code>0.5</code></div>
  <div><code><nowiki>{{infoBoxes3 |corner=1}}</nowiki></code></div>
  <div>'''''Optional:''''' specify the corner radius  in rem units.</div>
</div>
</div>


</noinclude>
</noinclude>

Revision as of 19:09, 26 October 2023

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

To use this infoBox template, type: 

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

with the title and body when editing the page.

Available 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.
maxWidth
600
{{infoBox |maxWidth=80}}
Example
Body content
Optional: specify the maximum width in px units.
color
linear-gradient(
to bottom right,
{{{color1|#c00}}},
{{{color2|#703}}},
{{{color3|#307}}})
{{infoBox |color=green}}
Example
Body content
Optional: specify a single color of the infoBox as a CSS color e.g. green.
color1
#c00 (red)
{{infoBox |color1=lightgreen}}
Example
Body content
Optional: specify the top left corner color gradient of the infoBox as a CSS color e.g. green.
color2
#703 (dark pink)
{{infoBox |color2=lightgreen}}
Example
Body content
Optional: specify the middle color gradient of the infoBox as a CSS color e.g. green.
color3
#307 (dark blue)
{{infoBox |color3=lightgreen}}
Example
Body content
Optional: specify the bottom right corner color gradient of the infoBox as a CSS color e.g. green.
titlecolor
#fff
{{infoBox |titlecolor=black}}
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.
color4
#00c (blue)
{{infoBoxes |color4=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
color5
#037 (dark cyan)
{{infoBoxes3 |color5=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=18542"