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
(float)
(color#, colorA-E)
Line 1: Line 1:
<div style="float:{{{float|none}}};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,{{{color1|#c00}}},{{{color2|#703}}},{{{color3|#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;">{{{title}}}</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;">{{{body}}}</div></div></div><noinclude>
<div style="float:{{{float|none}}};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;">{{{title}}}</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;">{{{body}}}</div></div></div><noinclude>


To use this infoBox template, type:
To use this infoBox template, type:
Line 55: Line 55:
   <div><pre>linear-gradient(
   <div><pre>linear-gradient(
to bottom right,
to bottom right,
{{{color1|#c00}}},
{{{colorA|#c00}}},
{{{color2|#703}}},
{{{colorB|#703}}},
{{{color3|#307}}})</pre></div>
{{{colorC|#307}}})</pre></div>
   <div><code><nowiki>{{infoBox |color=green}}</nowiki></code></div>
   <div><code><nowiki>{{infoBox |color=green}}</nowiki></code></div>
   <div>{{infoBox |title=Example |body=Body content |color=green}}</div>
   <div>{{infoBox |title=Example |body=Body content |color=green}}</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>'''''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>color1</code></div>
   <div><code>colorA</code></div>
   <div><code>#c00</code> (red)</div>
   <div><code>#c00</code> (red)</div>
   <div><code><nowiki>{{infoBox |color1=lightgreen}}</nowiki></code></div>
   <div><code><nowiki>{{infoBox |colorA=lightgreen}}</nowiki></code></div>
   <div>{{infoBox |title=Example |body=Body content |color1=lightgreen}}</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>'''''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>colorB</code></div>
   <div><code>#703</code> (dark pink)</div>
   <div><code>#703</code> (dark pink)</div>
   <div><code><nowiki>{{infoBox |color2=lightgreen}}</nowiki></code></div>
   <div><code><nowiki>{{infoBox |colorB=lightgreen}}</nowiki></code></div>
   <div>{{infoBox |title=Example |body=Body content |color2=lightgreen}}</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>'''''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>colorC</code></div>
   <div><code>#307</code> (dark blue)</div>
   <div><code>#307</code> (dark blue)</div>
   <div><code><nowiki>{{infoBox |color3=lightgreen}}</nowiki></code></div>
   <div><code><nowiki>{{infoBox |colorC=lightgreen}}</nowiki></code></div>
   <div>{{infoBox |title=Example |body=Body content |color3=lightgreen}}</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>'''''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>bodyBgColor</code></div>
   <div><code>#fffc</code> (translucent white)</div>
   <div><code>#fffc</code> (translucent white)</div>
   <div><code><nowiki>{{infoBox |bodyBgColor=lightgreen}}</nowiki></code></div>
   <div><code><nowiki>{{infoBox |bodyBgColor=lightgreen}}</nowiki></code></div>
   <div>{{infoBox |title=Example |body=Body content |bodyBgColor=#fffc}}</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>'''''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>titleColor</code></div>
Line 133: Line 133:
   <div><code><nowiki>{{infoBoxes |body2=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>color4</code></div>
   <div><code>color'''#'''</code></div>
  <div><code>linear-gradient</code></div>
  <div><code><nowiki>{{infoBox |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>#00c</code> (blue)</div>
   <div><code><nowiki>{{infoBoxes |color4=green}}</nowiki></code></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>'''''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>title'''#'''color</code></div>
Line 168: Line 172:
   <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>color5</code></div>
   <div><code>colorE</code></div>
   <div><code>#037</code> (dark cyan)</div>
   <div><code>#037</code> (dark cyan)</div>
   <div><code><nowiki>{{infoBoxes3 |color5=green}}</nowiki></code></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>'''''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>
</div>


</noinclude>
</noinclude>

Revision as of 15:50, 17 November 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.
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
{{infoBox |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.