Template:Icon box: Difference between revisions
add class property |
No edit summary |
||
| (2 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<includeonly><table role="{{{role|text container}}}" {{#if: {{{ | <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> | ||
<templatedata> | <templatedata> | ||
{ | { | ||
| Line 42: | Line 101: | ||
"border-color": { | "border-color": { | ||
"label": "Border color", | "label": "Border color", | ||
"description": " | "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 63: | Line 128: | ||
"type": "content", | "type": "content", | ||
"required": true | "required": true | ||
}, | }, | ||
"class": { | "class": { | ||
"label": "HTML class", | "label": "HTML class", | ||
"description": "HTML class/classes to add to the box, | "description": "HTML class/classes to add to the box.", | ||
"type": "string" | |||
}, | |||
"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" | "type": "string" | ||
} | } | ||
| Line 84: | 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", | ||
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
}}
| 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.
| Parameter | Description | Type | Status | |
|---|---|---|---|---|
| Box text | box-text | Text inside of the box. | Content | required |
| Box icons | box-icons | Standard wikitext containing the icons to place inside of the box, see example syntax. | Content | suggested |
| Enable margin | margin | If set, adds a margin from the sides of the box.
| Boolean | optional |
| Text color | color | Text color in any format supported by CSS (hex, rgb(...), ...)
| String | optional |
| Text color (dark mode) | color-dark | Dark mode text color in any format supported by CSS (hex, rgb(...), ...) | String | optional |
| Background color | background | Background color in any format supported by CSS (hex, rgb(...), ...)
| String | optional |
| Background color (dark mode) | background-dark | Dark mode background color in any format supported by CSS (hex, rgb(...), ...) | String | optional |
| Border color | border-color | Border color in any format supported by CSS (hex, rgb(...), ...)
| String | optional |
| Border color (dark mode) | border-color-dark | Dark mode border color in any format supported by CSS (hex, rgb(...), ...) | String | optional |
| Border style | border-style | CSS border-style value
| String | optional |
| Border width | border-width | Border width with unit
| String | optional |
| Padding | padding | Padding to add to the box, with the unit
| String | optional |
| HTML role | role | HTML accessible role parameter to add to the box.
| String | optional |
| HTML class | class | HTML class/classes to add to the box. | String | optional |