Template:Mbox: Difference between revisions
| Robertbaxter (talk | contribs) No edit summary | IssuePress (talk | contribs)  No edit summary | ||
| Line 1: | Line 1: | ||
| <includeonly><!-- | <includeonly><!-- | ||
| --> | --><div class="ambox {{{class|}}}" style="background:{{{background|#FFFFFF}}}; border: {{{border|1px solid #F1F3F5}}}; {{#if:{{{color_bar|}}}|border-left: 11px solid {{{color_bar}}};|}} max-width:{{{max_width|80%}}}; display: flex; {{{style|}}}"><!-- | ||
| {{#if:{{{ | -->{{#if:{{{icon|}}}|<div class="icon" style="font-size:2rem; margin-right:1.5rem; {{#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 25: | Line 27: | ||
| <pre>{{mbox|text=Sample message text in a plain box.|color_bar=#BB76CF}}</pre> | <pre>{{mbox|text=Sample message text in a plain box.|color_bar=#BB76CF}}</pre> | ||
| {{mbox|title=Orchid box|text=A box with an orchid side bar.|color_bar=#BB76CF}} | {{mbox|title=Orchid box|text=A box with an orchid side bar.|color_bar=#BB76CF}} | ||
| <pre>{{mbox|text=Sample message text in a plain box.|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}} | |||
| == TemplateData == | == TemplateData == | ||
| Line 47: | Line 52: | ||
| 			"type": "string", | 			"type": "string", | ||
| 			"default": "1px solid #F1F3F5" | 			"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" | |||
| 		}, | 		}, | ||
| 		"color_bar": { | 		"color_bar": { | ||
| Line 82: | Line 92: | ||
| 		"text", | 		"text", | ||
| 		"color_bar", | 		"color_bar", | ||
|         "icon", | |||
| 		"class", | 		"class", | ||
| 		"background", | 		"background", | ||
Revision as of 03:35, 16 December 2024
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 10px 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|text=Sample message text in a plain box.|color_bar=#BB76CF}}
{{mbox|text=Sample message text in a plain box.|color_bar=#BB76CF}}
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 |