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) No edit summary |
Sammy McSam (talk | contribs) (maxWidth variable, parameters documentation) |
||
| Line 1: | Line 1: | ||
<div style="display:flex;flex-flow:column wrap;margin:0.5rem;border-radius:{{{corner|0.5}}}rem;background:{{{colour|linear-gradient(to bottom right,{{{topLeftColour|#c30}}},{{{middleColour|#707}}},{{{bottomRightColour|#70c}}})}}};"><div style="padding:1rem;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="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|#c30}}},{{{middleColour|#707}}},{{{bottomRightColour|#70c}}})}}};"><div style="padding:1rem;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}}};"> | ||
{{{body}}} | {{{body}}} | ||
</div></div> | </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 == | |||
<div style="display:grid;grid-template-columns:repeat(4,max-content);gap:1rem;overflow:hidden;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>{{quoridorboard |title=Your title text}}</nowiki></code></div> | |||
<div><b><i>Optional:</i></b> specify a title for the infoBox.</div> | |||
<div><code>body</code></div> | |||
<div><code>null</code></div> | |||
<div><code><nowiki>{{quoridorboard |body=Your body content}}</nowiki></code>.</div> | |||
<div><b><i>Optional:</i></b> specify any body content.</div> | |||
<div><code>maxWidth</code></div> | |||
<div><code>600</code></div> | |||
<div><code><nowiki>{{quoridorboard |maxWidth=400}}</nowiki></code></div> | |||
<div><b><i>Optional:</i></b> specify the maximum width of the infoBox.</div> | |||
<div><code>topLeftColour</code></div> | |||
<div><code>#c30</code></div> | |||
<div><code><nowiki>{{quoridorboard |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> | |||
<div><code>middleColour</code></div> | |||
<div><code>#707</code></div> | |||
<div><code><nowiki>{{quoridorboard |middleColour=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><code>bottomRightColour</code></div> | |||
<div><code>#70c</code></div> | |||
<div><code><nowiki>{{quoridorboard |bottomRightColour=blue}}</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><code>titleColour</code></div> | |||
<div><code>#fff</code></div> | |||
<div><code><nowiki>{{quoridorboard |titleColour=black}}</nowiki></code></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>corner</code></div> | |||
<div><code>0.5</code></div> | |||
<div><code><nowiki>{{quoridorboard |corner=1}}</nowiki></code></div> | |||
<div><b><i>Optional:</i></b> specify the corner radius of the infoBox in rem units.</div> | |||
</div> | |||
</noinclude> | |||
Revision as of 20:51, 3 February 2022
{{{title}}}
{{{body}}}
To insert this info box template into a BGA wiki page, simply type {{infoBox}} (or {{infoBoxes}} for a pair of info boxes) when editing the page.
Available parameters