Template:Icon box: Difference between revisions

From Mainlining Wiki
Jump to navigation Jump to search
Knuxify (talk | contribs)
make no margin the default, replace nomargin option with margin option
Knuxify (talk | contribs)
No edit summary
 
(4 intermediate revisions by the same user not shown)
Line 1: Line 1:
<includeonly><table role="{{{role|text container}}}" style="color: {{{color|inherit}}}; background-color: {{{background|inherit}}}; border: {{{border-width|1px}}} {{{border-style|solid}}} {{{border-color|#eaecf0}}}; margin: 4px {{#if: {{{margin|}}}|0|10%}}; border-collapse: collapse;"><tr>
<noinclude>
<td style="padding: 2px 0 2px 0.9em; text-align: center; line-height: 1;"><span style="white-space: nowrap;">{{{box-icons}}}</span></td>
This is a template for a box with an icon, largely inspired by Wikipedia's Template:Mbox.
 
{{Icon box
| box-icons = [[File:Icon-numix-light-start-here.svg|28px|link=|Icon]]
| box-text = This is an example of the icon box.<br>I can also use HTML tags and [[Templates|MediaWiki syntax, like links]].
}}
 
<pre>
{{Icon box
| box-icons = [[File:Icon-numix-light-start-here.svg|28px|link=|Icon]]
| box-text = This is an example of the icon box.<br>I can also use HTML tags and [[Templates|MediaWiki syntax, like links]].
}}
</pre>
 
{{Icon box
| box-icons = [[File:Icon-numix-light-start-here.svg|28px|link=|Icon]]
| box-text = This is an example license box.
| border-color = #88a
| border-width = 3px
| background = #f7f8ff
}}
 
<pre>
{{Icon box
| box-icons = [[File:Icon-numix-light-start-here.svg|28px|link=|Icon]]
| box-text = This is an example license box.
| border-color = #88a
| border-width = 3px
| background = #f7f8ff
}}
</pre>
 
{{Icon box
| box-icons = [[File:Icon-numix-light-start-here.svg|20px|link=|Note]]
| box-text = This is a box with no side margins.
| border-color = #ac6600
| border-width = 1px
| background = #f6efe5
}}
 
<pre>
{{Icon box
| box-icons = [[File:Icon-numix-light-start-here.svg|20px|link=|Note]]
| box-text = This is a box with no side margins.
| border-color = #ac6600
| border-width = 1px
| background = #f6efe5
| nomargin = yes
}}
</pre>
 
{{note|'''Warning:''' Make sure to set your icon's size (like in the examples above).}}
 
</noinclude><includeonly><templatestyles src="Template:Icon box/style.css"/><table role="{{{role|text container}}}" class="icon-box {{{class|}}}" style="
{{#if: {{{color|}}}|--ib-color: {{{color|unset}}};|}}
{{#if: {{{color-dark|{{{color|}}}}}}|--ib-color-dark: {{{color-dark|{{{color|unset}}}}}};|}}
{{#if: {{{background|}}}|--ib-background: {{{background|unset}}};|}}
{{#if: {{{background-dark|{{{background|}}}}}}|--ib-background-dark: {{{background-dark|{{{background|unset}}}}}};|}}
{{#if: {{{border-color|}}}|--ib-border-color: {{{border-color|unset}}};|}}
{{#if: {{{border-color-dark|{{{border-color|}}}}}}|--ib-border-color-dark: {{{border-color-dark|{{{border-color|unset}}}}}};|}}
border-width: {{{border-width|1px}}}; border-style: {{{border-style|solid}}}; margin: 4px {{#if: {{{margin|}}}|10%|0}}; border-collapse: collapse;"><tr>
{{#if: {{{box-icons|}}}|<td style="padding: 2px 0 2px 0.9em; text-align: center; line-height: 1;"><span style="white-space: nowrap;">{{{box-icons}}}</span></td>|}}
<td style="padding: {{{padding|0.35em}}} 0.9em; width: 100%;">{{{box-text}}}</td>
<td style="padding: {{{padding|0.35em}}} 0.9em; width: 100%;">{{{box-text}}}</td>
</tr></table></includeonly><!--
</tr></table></includeonly><noinclude>
 
--><noinclude>
<templatedata>
<templatedata>
{
{
Line 42: Line 101:
"border-color": {
"border-color": {
"label": "Border color",
"label": "Border color",
"description": "Text color in any format supported by CSS (hex, rgb(...), ...)",
"description": "Border color in any format supported by CSS (hex, rgb(...), ...)",
"type": "string",
"type": "string",
"autovalue": "#eaecf0"
"autovalue": "#eaecf0"
},
"margin": {
"label": "Enable margin",
"description": "If set, adds a margin from the sides of the box.",
"type": "boolean",
"autovalue": "false"
},
},
"box-icons": {
"box-icons": {
Line 64: Line 129:
"required": true
"required": true
},
},
"margin": {
"class": {
"label": "Enable margin",
"label": "HTML class",
"description": "If set, adds a margin from the sides of the box.",
"description": "HTML class/classes to add to the box.",
"type": "boolean",
"type": "string"
"autovalue": "false",
},
"suggested": true
"color-dark": {
"label": "Text color (dark mode)",
"description": "Dark mode text color in any format supported by CSS (hex, rgb(...), ...)",
"type": "string"
},
"background-dark": {
"label": "Background color (dark mode)",
"description": "Dark mode background color in any format supported by CSS (hex, rgb(...), ...)",
"type": "string"
},
"border-color-dark": {
"label": "Border color (dark mode)",
"description": "Dark mode border color in any format supported by CSS (hex, rgb(...), ...)",
"type": "string"
}
}
},
},
Line 79: Line 157:
"margin",
"margin",
"color",
"color",
"color-dark",
"background",
"background",
"background-dark",
"border-color",
"border-color",
"border-color-dark",
"border-style",
"border-style",
"border-width",
"border-width",
"padding",
"padding",
"role"
"role",
"class"
]
]
}
}
</templatedata>
</templatedata>
</noinclude>
</noinclude>

Latest revision as of 19:15, 6 June 2026

This is a template for a box with an icon, largely inspired by Wikipedia's Template:Mbox.

Icon This is an example of the icon box.
I can also use HTML tags and MediaWiki syntax, like links.
{{Icon box
| box-icons = [[File:Icon-numix-light-start-here.svg|28px|link=|Icon]]
| box-text = This is an example of the icon box.<br>I can also use HTML tags and [[Templates|MediaWiki syntax, like links]].
}}
Icon This is an example license box.
{{Icon box
| box-icons = [[File:Icon-numix-light-start-here.svg|28px|link=|Icon]]
| box-text = This is an example license box.
| border-color = #88a
| border-width = 3px
| background = #f7f8ff
}}
Note This is a box with no side margins.
{{Icon box
| box-icons = [[File:Icon-numix-light-start-here.svg|20px|link=|Note]]
| box-text = This is a box with no side margins.
| border-color = #ac6600
| border-width = 1px
| background = #f6efe5
| nomargin = yes
}}
Note Warning: Make sure to set your icon's size (like in the examples above).


Floating box with an icon and background. Used for licensing templates, Template:Note and similar boxes.

Template parameters[Edit template data]

This template prefers block formatting of parameters.

ParameterDescriptionTypeStatus
Box textbox-text

Text inside of the box.

Contentrequired
Box iconsbox-icons

Standard wikitext containing the icons to place inside of the box, see example syntax.

Contentsuggested
Enable marginmargin

If set, adds a margin from the sides of the box.

Auto value
false
Booleanoptional
Text colorcolor

Text color in any format supported by CSS (hex, rgb(...), ...)

Auto value
inherit
Stringoptional
Text color (dark mode)color-dark

Dark mode text color in any format supported by CSS (hex, rgb(...), ...)

Stringoptional
Background colorbackground

Background color in any format supported by CSS (hex, rgb(...), ...)

Auto value
inherit
Stringoptional
Background color (dark mode)background-dark

Dark mode background color in any format supported by CSS (hex, rgb(...), ...)

Stringoptional
Border colorborder-color

Border color in any format supported by CSS (hex, rgb(...), ...)

Auto value
#eaecf0
Stringoptional
Border color (dark mode)border-color-dark

Dark mode border color in any format supported by CSS (hex, rgb(...), ...)

Stringoptional
Border styleborder-style

CSS border-style value

Example
solid
Auto value
solid
Stringoptional
Border widthborder-width

Border width with unit

Example
1px
Auto value
1px
Stringoptional
Paddingpadding

Padding to add to the box, with the unit

Auto value
0.35em
Stringoptional
HTML rolerole

HTML accessible role parameter to add to the box.

Auto value
text container
Stringoptional
HTML classclass

HTML class/classes to add to the box.

Stringoptional