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) (infoBoxes & infoBoxes3 documentation, infoBox flex container) |
Sammy McSam (talk | contribs) (class="mw-collapsible" id="mw-customcollapsible-title" mw-{{{state|}}}, margins) |
||
Line 1: | Line 1: | ||
<div style="display:flex;"><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="padding | <div style="display:flex;"><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 class="mw-customtoggle-title" style="padding:0.5rem;color:{{{titleColour|#fff}}};text-align:{{{titleAlign|center}}};font-weight:bold;">{{{title}}}</div><div class="mw-collapsible mw-{{{state|}}}" id="mw-customcollapsible-title" 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> | ||
To insert this info box template into a BGA wiki page, simply type <code><nowiki>{{infoBox}}</nowiki></code> when editing the page. | To insert this info box template into a BGA wiki page, simply type <code><nowiki>{{infoBox}}</nowiki></code> when editing the page. | ||
Line 5: | Line 5: | ||
== Available parameters == | == Available parameters == | ||
<div style="display:grid;grid-template-columns:repeat(4,max-content);gap:1rem;overflow: | <div style="display:grid;grid-template-columns:repeat(4,max-content);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> | ||
Line 13: | Line 13: | ||
<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=Your title text}}</nowiki></code></div> | ||
<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=Your body content}}</nowiki></code></div> | ||
<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>'''''Optional:''''' collapse 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=400}}</nowiki></code></div> | ||
<div> | <div>'''''Optional:''''' specify the maximum width in px units.</div> | ||
<div><code>topLeftColour</code></div> | <div><code>topLeftColour</code></div> | ||
<div><code>#c00</code></div> | <div><code>#c00</code></div> | ||
Line 37: | Line 41: | ||
<div><code>#fff</code></div> | <div><code>#fff</code></div> | ||
<div><code><nowiki>{{infoBox |titleColour=black}}</nowiki></code></div> | <div><code><nowiki>{{infoBox |titleColour=black}}</nowiki></code></div> | ||
<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>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> | <div>'''''Optional:''''' specify the title text 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> | <div>'''''Optional:''''' specify the corner radius in rem units.</div> | ||
</div> | </div> | ||
---- | ---- | ||
Line 54: | Line 58: | ||
== Available parameters == | == Available parameters == | ||
<div style="display:grid;grid-template-columns:repeat(4,max-content);gap:1rem;overflow: | <div style="display:grid;grid-template-columns:repeat(4,max-content);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> | ||
Line 62: | Line 66: | ||
<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=Your title text}}</nowiki></code></div> | ||
<div> | <div>'''''Optional:''''' specify a title.</div> | ||
<div><code>body<b>#</b></code></div> | <div><code>body<b>#</b></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=Your body content}}</nowiki></code></div> | ||
<div>< | <div>'''''Optional:''''' specify any body content.</div> | ||
<div><code>state</code></div> | |||
<div><code>null</code></div> | |||
<div><code><nowiki>{{infoBoxes |state=collapsed}}</nowiki></code></div> | |||
<div>'''''Optional:''''' collapse 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>{{infoBoxes |maxWidth=400}}</nowiki></code></div> | <div><code><nowiki>{{infoBoxes |maxWidth=400}}</nowiki></code></div> | ||
<div> | <div>'''''Optional:''''' specify the maximum width in px units.</div> | ||
<div><code>colour1</code></div> | <div><code>colour1</code></div> | ||
<div><code>#c00</code></div> | <div><code>#c00</code></div> | ||
<div><code><nowiki>{{infoBoxes |colour1=red}}</nowiki></code></div> | <div><code><nowiki>{{infoBoxes |colour1=red}}</nowiki></code></div> | ||
<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>colour2</code></div> | ||
<div><code>#703</code></div> | <div><code>#703</code></div> | ||
<div><code><nowiki>{{infoBoxes |colour2=green}}</nowiki></code></div> | <div><code><nowiki>{{infoBoxes |colour2=green}}</nowiki></code></div> | ||
<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>colour3</code></div> | ||
<div><code>#307</code></div> | <div><code>#307</code></div> | ||
<div><code><nowiki>{{infoBoxes |colour3=blue}}</nowiki></code></div> | <div><code><nowiki>{{infoBoxes |colour3=blue}}</nowiki></code></div> | ||
<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>colour4</code></div> | ||
<div><code>#00c</code></div> | <div><code>#00c</code></div> | ||
<div><code><nowiki>{{infoBoxes |colour4=purple}}</nowiki></code></div> | <div><code><nowiki>{{infoBoxes |colour4=purple}}</nowiki></code></div> | ||
<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>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 |title2Colour=black}}</nowiki></code></div> | ||
<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>title<b>#</b>Align</code></div> | ||
<div><code>center</code></div> | <div><code>center</code></div> | ||
<div><code><nowiki>{{infoBoxes |title2Align=left}}</nowiki></code></div> | <div><code><nowiki>{{infoBoxes |title2Align=left}}</nowiki></code></div> | ||
<div> | <div>'''''Optional:''''' specify the title text 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>{{infoBoxes |corner=1}}</nowiki></code></div> | <div><code><nowiki>{{infoBoxes |corner=1}}</nowiki></code></div> | ||
<div> | <div>'''''Optional:''''' specify the corner radius in rem units.</div> | ||
</div> | </div> | ||
Line 108: | Line 116: | ||
== Available parameters == | == Available parameters == | ||
<div style="display:grid;grid-template-columns:repeat(4,max-content);gap:1rem;overflow: | <div style="display:grid;grid-template-columns:repeat(4,max-content);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> | ||
Line 116: | Line 124: | ||
<div><code>null</code></div> | <div><code>null</code></div> | ||
<div><code><nowiki>{{infoBoxes3 |title3=Your title text}}</nowiki></code></div> | <div><code><nowiki>{{infoBoxes3 |title3=Your title text}}</nowiki></code></div> | ||
<div> | <div>'''''Optional:''''' specify a title.</div> | ||
<div><code>body<b>#</b></code></div> | <div><code>body<b>#</b></code></div> | ||
<div><code>null</code></div> | <div><code>null</code></div> | ||
<div><code><nowiki>{{infoBoxes3 |body3=Your body content}}</nowiki></code>.</div> | <div><code><nowiki>{{infoBoxes3 |body3=Your body content}}</nowiki></code></div> | ||
<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:''''' collapse 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>{{infoBoxes3 |maxWidth=400}}</nowiki></code></div> | <div><code><nowiki>{{infoBoxes3 |maxWidth=400}}</nowiki></code></div> | ||
<div> | <div>'''''Optional:''''' specify the maximum width in px units.</div> | ||
<div><code>colour1</code></div> | <div><code>colour1</code></div> | ||
<div><code>#c00</code></div> | <div><code>#c00</code></div> | ||
<div><code><nowiki>{{infoBoxes3 |colour1=red}}</nowiki></code></div> | <div><code><nowiki>{{infoBoxes3 |colour1=red}}</nowiki></code></div> | ||
<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>colour2</code></div> | ||
<div><code>#703</code></div> | <div><code>#703</code></div> | ||
<div><code><nowiki>{{infoBoxes3 |colour2=green}}</nowiki></code></div> | <div><code><nowiki>{{infoBoxes3 |colour2=green}}</nowiki></code></div> | ||
<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>colour3</code></div> | ||
<div><code>#307</code></div> | <div><code>#307</code></div> | ||
<div><code><nowiki>{{infoBoxes3 |colour3=blue}}</nowiki></code></div> | <div><code><nowiki>{{infoBoxes3 |colour3=blue}}</nowiki></code></div> | ||
<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>colour4</code></div> | ||
<div><code>#00c</code></div> | <div><code>#00c</code></div> | ||
<div><code><nowiki>{{infoBoxes3 |colour4=purple}}</nowiki></code></div> | <div><code><nowiki>{{infoBoxes3 |colour4=purple}}</nowiki></code></div> | ||
<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>colour5</code></div> | ||
<div><code>#037</code></div> | <div><code>#037</code></div> | ||
<div><code><nowiki>{{infoBoxes3 |colour5=red}}</nowiki></code></div> | <div><code><nowiki>{{infoBoxes3 |colour5=red}}</nowiki></code></div> | ||
<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>title<b>#</b>Colour</code></div> | ||
<div><code>#fff</code></div> | <div><code>#fff</code></div> | ||
<div><code><nowiki>{{infoBoxes3 |title3Colour=black}}</nowiki></code></div> | <div><code><nowiki>{{infoBoxes3 |title3Colour=black}}</nowiki></code></div> | ||
<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>title<b>#</b>Align</code></div> | ||
<div><code>center</code></div> | <div><code>center</code></div> | ||
<div><code><nowiki>{{infoBoxes3 |title3Align=left}}</nowiki></code></div> | <div><code><nowiki>{{infoBoxes3 |title3Align=left}}</nowiki></code></div> | ||
<div> | <div>'''''Optional:''''' specify the title text 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>{{infoBoxes3 |corner=1}}</nowiki></code></div> | <div><code><nowiki>{{infoBoxes3 |corner=1}}</nowiki></code></div> | ||
<div> | <div>'''''Optional:''''' specify the corner radius in rem units.</div> | ||
</div> | </div> | ||
</noinclude> | </noinclude> |
Revision as of 15:20, 26 October 2023
{{{title}}}
{{{body}}}
To insert this info box template into a BGA wiki page, simply type {{infoBox}}
when editing the page.
Available parameters
Parameter
Default value
Example
Description
title
null
{{infoBox |title=Your title text}}
Optional: specify a title.
body
null
{{infoBox |body=Your body content}}
Optional: specify any body content.
state
null
{{infoBox |state=collapsed}}
Optional: collapse by default.
maxWidth
600
{{infoBox |maxWidth=400}}
Optional: specify the maximum width in px units.
topLeftColour
#c00
{{infoBox |topLeftColour=red}}
Optional: specify the top left corner colour gradient of the infoBox as a CSS colour e.g.
blue
.middleColour
#703
{{infoBox |middleColour=green}}
Optional: specify the middle colour gradient of the infoBox as a CSS colour e.g.
blue
.bottomRightColour
#307
{{infoBox |bottomRightColour=blue}}
Optional: specify the bottom right corner colour gradient of the infoBox as a CSS colour e.g.
blue
.titleColour
#fff
{{infoBox |titleColour=black}}
Optional: specify the title text colour as a CSS colour e.g.
blue
.titleAlign
center
{{infoBox |titleAlign=left}}
Optional: specify the title text alignment as
left
or right
.corner
0.5
{{infoBox |corner=1}}
Optional: specify the corner radius in rem units.
{{{title1}}}
{{{body1}}}
{{{title2}}}
{{{body2}}}
To insert a pair of info boxes into a BGA wiki page, simply type {{infoBoxes}}
when editing the page.
Available parameters
Parameter
Default value
Example
Description
title#
null
{{infoBoxes |title2=Your title text}}
Optional: specify a title.
body#
null
{{infoBoxes |body2=Your body content}}
Optional: specify any body content.
state
null
{{infoBoxes |state=collapsed}}
Optional: collapse by default.
maxWidth
600
{{infoBoxes |maxWidth=400}}
Optional: specify the maximum width in px units.
colour1
#c00
{{infoBoxes |colour1=red}}
Optional: specify the top left corner colour of the first infoBox as a CSS colour e.g.
blue
.colour2
#703
{{infoBoxes |colour2=green}}
Optional: specify the top left colour of the second infoBox as a CSS colour e.g.
blue
.colour3
#307
{{infoBoxes |colour3=blue}}
Optional: specify the middle colour of the second infoBox as a CSS colour e.g.
blue
.colour4
#00c
{{infoBoxes |colour4=purple}}
Optional: specify the bottom right corner colour of the second infoBox as a CSS colour e.g.
blue
.title#Colour
#fff
{{infoBoxes |title2Colour=black}}
Optional: specify the title text colour as a CSS colour e.g.
blue
.title#Align
center
{{infoBoxes |title2Align=left}}
Optional: specify the title text alignment as
left
or right
.corner
0.5
{{infoBoxes |corner=1}}
Optional: specify the corner radius in rem units.
{{{title1}}}
{{{body1}}}
{{{title2}}}
{{{body2}}}
{{{title3}}}
{{{body3}}}
To insert three info boxes into a BGA wiki page, simply type {{infoBoxes3}}
when editing the page.
Available parameters
Parameter
Default value
Example
Description
title#
null
{{infoBoxes3 |title3=Your title text}}
Optional: specify a title.
body#
null
{{infoBoxes3 |body3=Your body content}}
Optional: specify any body content.
state
null
{{infoBoxes3 |state=collapsed}}
Optional: collapse by default.
maxWidth
600
{{infoBoxes3 |maxWidth=400}}
Optional: specify the maximum width in px units.
colour1
#c00
{{infoBoxes3 |colour1=red}}
Optional: specify the top left corner colour of the first infoBox as a CSS colour e.g.
blue
.colour2
#703
{{infoBoxes3 |colour2=green}}
Optional: specify the top left colour of the second infoBox as a CSS colour e.g.
blue
.colour3
#307
{{infoBoxes3 |colour3=blue}}
Optional: specify the top left corner colour of the third infoBox as a CSS colour e.g.
blue
.colour4
#00c
{{infoBoxes3 |colour4=purple}}
Optional: specify the middle colour of the third infoBox as a CSS colour e.g.
blue
.colour5
#037
{{infoBoxes3 |colour5=red}}
Optional: specify the bottom right corner colour of the third infoBox as a CSS colour e.g.
blue
.title#Colour
#fff
{{infoBoxes3 |title3Colour=black}}
Optional: specify the title text colour as a CSS colour e.g.
blue
.title#Align
center
{{infoBoxes3 |title3Align=left}}
Optional: specify the title text alignment as
left
or right
.corner
0.5
{{infoBoxes3 |corner=1}}
Optional: specify the corner radius in rem units.