Template:Icon box: Difference between revisions
Created page with "<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: {{{nomargin|}}}|0|10%}}; border-collapse: collapse;"><tr> <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.9e..." |
No edit summary |
||
| (5 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<includeonly><table role="{{{role|text container}}}" style="color: {{{color| | <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><noinclude> | </tr></table></includeonly><noinclude> | ||
| Line 40: | 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": " | "label": "Enable margin", | ||
"description": "If set, | "description": "If set, adds a margin from the sides of the box.", | ||
"type": "boolean", | "type": "boolean", | ||
"autovalue": "false" | "autovalue": "false" | ||
}, | }, | ||
"box-icons": { | "box-icons": { | ||
| Line 68: | Line 128: | ||
"type": "content", | "type": "content", | ||
"required": true | "required": true | ||
}, | |||
"class": { | |||
"label": "HTML class", | |||
"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" | |||
} | } | ||
}, | }, | ||
| Line 75: | Line 155: | ||
"box-text", | "box-text", | ||
"box-icons", | "box-icons", | ||
" | "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> | ||