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) (float) |
||
| Line 1: | Line 1: | ||
<div style="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,{{{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> | ||
To use this infoBox template, type: | To use this infoBox template, type: | ||
| Line 34: | Line 34: | ||
<div>{{infoBox |title=Example |body=Body content |state=collapsed}}</div> | <div>{{infoBox |title=Example |body=Body content |state=collapsed}}</div> | ||
<div>'''''Optional:''''' collapsed by default.</div> | <div>'''''Optional:''''' collapsed by default.</div> | ||
<div><code>float</code></div> | |||
<div><code>none</code></div> | |||
<div><code><nowiki>{{infoBox |float=right}}</nowiki></code></div> | |||
<div>{{infoBox |title=Example |body=Body content |float=right}}</div> | |||
<div>'''''Optional:''''' Place on the <code>left</code> or <code>right</code> side of its container, allowing text to wrap around it.</div> | |||
<div><code>minWidth</code></div> | <div><code>minWidth</code></div> | ||
<div><code>null</code></div> | <div><code>null</code></div> | ||
Revision as of 14:43, 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
titlenull{{infoBox |title=Example}}Example
{{{body}}}
Optional: specify a title.
bodynull{{infoBox |body=Body content}}Example
Body content
Optional: specify any body content.
statenull{{infoBox |state=collapsed}}Example
Body content
Optional: collapsed by default.
floatnone{{infoBox |float=right}}Example
Body content
Optional: Place on the
left or right side of its container, allowing text to wrap around it.minWidthnull{{infoBox |minWidth=100%}}Example
Body content
Optional: specify the minimum width as a CSS length e.g.
500px.maxWidth600{{infoBox |maxWidth=80}}Example
Body content
Optional: specify the maximum width in px units.
{{infoBox |maxWidth=}} (empty) to remove the maxWidth limit.colorlinear-gradient(
to bottom right,
{{{color1|#c00}}},
{{{color2|#703}}},
{{{color3|#307}}}){{infoBox |color=green}}Example
Body content
Optional: specify a single color of the infoBox as a CSS color e.g.
green.color1#c00 (red){{infoBox |color1=lightgreen}}Example
Body content
Optional: specify the top left corner color gradient of the infoBox as a CSS color e.g.
green.color2#703 (dark pink){{infoBox |color2=lightgreen}}Example
Body content
Optional: specify the middle color gradient of the infoBox as a CSS color e.g.
green.color3#307 (dark blue){{infoBox |color3=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.titleAligncenter{{infoBox |titleAlign=left}}Example
Body content
Optional: specify the title alignment as
left or right.corner0.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.
color4#00c (blue){{infoBoxes |color4=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
color5#037 (dark cyan){{infoBoxes3 |color5=green}}Optional: specify the bottom right corner color of the third infoBox as a CSS color e.g.
green.