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

Difference between revisions of "Template:InfoBox"

From Board Game Arena
Jump to navigation Jump to search
(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 21: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

Parameter
Default value
Example
Description
title
null
{{quoridorboard |title=Your title text}}
Optional: specify a title for the infoBox.
body
null
{{quoridorboard |body=Your body content}}.
Optional: specify any body content.
maxWidth
600
{{quoridorboard |maxWidth=400}}
Optional: specify the maximum width of the infoBox.
topLeftColour
#c30
{{quoridorboard |topLeftColour=red}}
Optional: specify the top left corner colour gradient of the infoBox as a CSS colour e.g. blue.
middleColour
#707
{{quoridorboard |middleColour=green}}
Optional: specify the middle colour gradient of the infoBox as a CSS colour e.g. blue.
bottomRightColour
#70c
{{quoridorboard |bottomRightColour=blue}}
Optional: specify the bottom right corner colour gradient of the infoBox as a CSS colour e.g. blue.
titleColour
#fff
{{quoridorboard |titleColour=black}}
Optional: specify the title text colour as a CSS colour e.g. blue.
corner
0.5
{{quoridorboard |corner=1}}
Optional: specify the corner radius of the infoBox in rem units.