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) (<span>{{{title}}}</span>, <span>{{{body}}}</span>) |
Sammy McSam (talk | contribs) m (typo) |
||
(One intermediate revision by the same user not shown) | |||
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,{{{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;"><span>{{{title}}}</span></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;"><span>{{{body}}}</span></div></div></div><noinclude> | <div style="float:{{{float|none}}};clear:both;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;"><span>{{{title}}}</span></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;"><span>{{{body}}}</span></div></div></div><noinclude> | ||
To use this infoBox template, type: | To use this infoBox template, type: | ||
Line 11: | Line 11: | ||
with the title and body when editing the page. | with the title and body when editing the page. | ||
== | == Parameters == | ||
<div style="display:grid;grid-template-columns:repeat(4,max-content) 1fr;gap:0 0.25rem;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;"> | ||
Line 135: | Line 135: | ||
<div><code>color'''#'''</code></div> | <div><code>color'''#'''</code></div> | ||
<div><code>linear-gradient</code></div> | <div><code>linear-gradient</code></div> | ||
<div><code><nowiki>{{ | <div><code><nowiki>{{infoBoxes |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>'''''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>colorD</code></div> |
Latest revision as of 02:38, 25 May 2024
{{{title}}}
{{{body}}}
To use this infoBox template, type:
{{infoBox |title=Example |body= }}
with the title and body when editing the page.
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.
{{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
{{infoBoxes |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
.