Template:Mbox: Difference between revisions
Robertbaxter (talk | contribs) No edit summary |
Robertbaxter (talk | contribs) No edit summary |
||
(29 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
<includeonly><!-- | <includeonly><!-- | ||
--> | --><div class="mbox {{{class|}}}" style="background:{{{background|#FFFFFF}}}; border: {{{border|1px solid #F1F3F5}}}; {{#if:{{{color_bar|}}}|border-left: 12px solid {{{color_bar}}};|}} max-width:{{{max_width|80%}}}; display: flex; align-items:center; {{{style|}}}"><!-- | ||
{{#if:{{{ | -->{{#if:{{{icon|}}}|<div class="icon" style="font-size:2rem; margin-right:1.25rem; {{#if:{{{color_bar|}}}|color:{{{color_bar}}};|}}>{{#fas:{{{icon}}}}}</div>}} | ||
<div class="message"> | |||
{{#if:{{{title|}}}|<div class="title" style="font-size:1.125rem;font-weight: bold;">{{{title}}}</div>}} | |||
<div class="text">{{{text}}}</div> | |||
</div><!-- | |||
--></div><!-- | |||
--></includeonly><templatestyles src="mbox/styles.css" /><!-- | --></includeonly><templatestyles src="mbox/styles.css" /><!-- | ||
--><noinclude> | --><noinclude> | ||
Line 12: | Line 14: | ||
This box should be used within message-specific templates (e.g. [[Template:Class template]]) which parse their own inputs into the display fields of the message box. | This box should be used within message-specific templates (e.g. [[Template:Class template]]) which parse their own inputs into the display fields of the message box. | ||
Plain boxes can be called with <code><nowiki>{{mbox}}</nowiki></code> while providing <code>text</code> and an optional <code>title</code> | Plain boxes can be called with <code><nowiki>{{mbox}}</nowiki></code> while providing <code>text</code> and an optional <code>title</code>—they will auto-size to the width of their contents, and wrap text at full width. They can include markup and full wiki-text (including transcluding other templates). | ||
<pre>{{mbox|text=Sample message | <pre>{{mbox|text=Sample message text in a plain box.}}</pre> | ||
{{mbox|text=Sample message | {{mbox|text=Sample message text in a plain box.}} | ||
<pre>{{mbox|title=Sample ''styled'' title|text=<p>A plain box with a title and '''some markup''' in the text and other templates like {{Ink chip|Light Teal}} or [[links]]. A bunch of extra text has been added to this section to show the text-wrapping within the box. The <code><p/></code> tags are included to make sure the ink chip displayed uses its small size.</p>}}</pre> | |||
{{mbox|title=Sample ''styled'' title|text=<p>A plain box with a title and '''some markup''' in the text and other templates like {{Ink chip|Light Teal}} or [[links]]. A bunch of extra text has been added to this section to show the text-wrapping within the box. The <code><p/></code> tags are included to make sure the ink chip displayed uses its small size.</p>}} | |||
=== Styling === | |||
The main differentiation provided is in a wide color bar on the left side of the box, which can be set with <code>color_bar</code>. Both the <code>background</code> and <code>border</code> styles can be set, as well as a CSS <code>class</code> for the box or custom <code>style</code>. The max-width is provided at 80%, but can be set with <code>max_width</code>. | |||
<pre>{{mbox|title=Orchid box|text=A box with an orchid side bar.|color_bar=#BB76CF}}</pre> | |||
{{mbox|title=Orchid box|text=A box with an orchid side bar.|color_bar=#BB76CF}} | |||
<pre>{{mbox|title=Orchid icon box|text=A box with an orchid side bar and an icon.|color_bar=#BB76CF|icon=clock}}</pre> | |||
{{mbox|title=Orchid icon box|text=A box with an orchid side bar and an icon.|color_bar=#BB76CF|icon=clock}} | |||
== TemplateData == | == TemplateData == | ||
Line 22: | Line 36: | ||
"params": { | "params": { | ||
"class": { | "class": { | ||
"label": "Class | "label": "Class", | ||
"description": "Custom class to add to the table.", | "description": "Custom class to add to the table.", | ||
"type": "string", | "type": "string", | ||
Line 30: | Line 44: | ||
"label": "Background", | "label": "Background", | ||
"description": "Background color for the box (neutral grey if not specified). Embedded in the \"background\" CSS property.", | "description": "Background color for the box (neutral grey if not specified). Embedded in the \"background\" CSS property.", | ||
"type": "string" | "type": "string", | ||
"default": "#FFFFFF" | |||
}, | }, | ||
"border": { | "border": { | ||
"label": "Border", | "label": "Border", | ||
"description": "Border style for the box. Embedded in the \"border\" CSS property.", | "description": "Border style for the box. Embedded in the \"border\" CSS property.", | ||
"type": "string", | |||
"default": "1px solid #F1F3F5" | |||
}, | |||
"icon": { | |||
"label": "Icon", | |||
"description": "Adds an icon, using the FontAwesome Free 6.0 solid icon set. It uses the same color as color_bar.", | |||
"type": "string" | "type": "string" | ||
}, | }, | ||
Line 58: | Line 79: | ||
"type": "string", | "type": "string", | ||
"required": true | "required": true | ||
}, | |||
"max_width": { | |||
"label": "Max width", | |||
"description": "The max width for the message box (should be percentage based).", | |||
"type": "string", | |||
"default": "80%" | |||
} | } | ||
}, | }, | ||
Line 64: | Line 91: | ||
"title", | "title", | ||
"text", | "text", | ||
"color_bar", | |||
"icon", | |||
"class", | "class", | ||
"background", | "background", | ||
"border", | "border", | ||
" | "max_width", | ||
"style" | "style" | ||
], | ], |
Latest revision as of 22:40, 24 February 2025
Lightweight message box (maybe notice box) to implement top-off page warnings needed on some pages. It allows some color flags/styling to distinguish boxes from each other, but primarily only offers a title and body text.
Usage
This box should be used within message-specific templates (e.g. Template:Class template) which parse their own inputs into the display fields of the message box.
Plain boxes can be called with {{mbox}}
while providing text
and an optional title
—they will auto-size to the width of their contents, and wrap text at full width. They can include markup and full wiki-text (including transcluding other templates).
{{mbox|text=Sample message text in a plain box.}}
{{mbox|title=Sample ''styled'' title|text=<p>A plain box with a title and '''some markup''' in the text and other templates like {{Ink chip|Light Teal}} or [[links]]. A bunch of extra text has been added to this section to show the text-wrapping within the box. The <code><p/></code> tags are included to make sure the ink chip displayed uses its small size.</p>}}
Styling
The main differentiation provided is in a wide color bar on the left side of the box, which can be set with color_bar
. Both the background
and border
styles can be set, as well as a CSS class
for the box or custom style
. The max-width is provided at 80%, but can be set with max_width
.
{{mbox|title=Orchid box|text=A box with an orchid side bar.|color_bar=#BB76CF}}
{{mbox|title=Orchid icon box|text=A box with an orchid side bar and an icon.|color_bar=#BB76CF|icon=clock}}
TemplateData
A simple message box. This template is meant to implement specific message boxes, not to be invoked directly.
Parameter | Description | Type | Status | |
---|---|---|---|---|
Title | title | Header text to be used at the top of the box—this will be displayed in bold. | String | suggested |
Text | text | The body text of the message box. | String | required |
Color bar | color_bar | The color used for the left side bar of the box—no bar is displayed if left blank. Embedded in the "border-left" CSS property. | String | optional |
Icon | icon | Adds an icon, using the FontAwesome Free 6.0 solid icon set. It uses the same color as color_bar. | String | optional |
Class | class | Custom class to add to the table. | String | suggested |
Background | background | Background color for the box (neutral grey if not specified). Embedded in the "background" CSS property.
| String | optional |
Border | border | Border style for the box. Embedded in the "border" CSS property.
| String | optional |
Max width | max_width | The max width for the message box (should be percentage based).
| String | optional |
Style | style | Additional CSS styles embedded at the end of the inline styles for the box | String | optional |