Template:Mbox: Difference between revisions
| Robertbaxter (talk | contribs) No edit summary Tag: Reverted | Robertbaxter (talk | contribs)  No edit summary | ||
| (45 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 {{wiki color|Light Gray|0.35}}}}}; {{#if:{{{color_bar|}}}|border-left: 12px solid {{{color_bar}}};|}} max-width:{{{max_width|80%}}}; display: flex; align-items:center; {{{style|}}}"><!-- | ||
| -->{{#if:{{{icon|}}}|<div class="icon" style="font-size:2rem; text-align:center; min-width:3rem; margin-right:1rem; {{#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> | |||
| --></includeonly><templatestyles src=" | </div><!-- | ||
| <noinclude> | --></div><!-- | ||
| --></includeonly><templatestyles src="mbox/styles.css" /><!-- | |||
| --><noinclude>{{DISPLAYTITLE:Template:mbox}} | |||
| 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 <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 text in a plain box.}}</pre> | |||
| {{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>. It's recommended you use [[Template:wiki color]] to implement the wiki color scheme. | |||
| 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={{wiki color|Orchid}}}}</pre> | |||
| {{mbox|title=Orchid box|text=A box with an Orchid side bar.|color_bar={{wiki color|Orchid}}}} | |||
| <pre>{{mbox|title=Sunflower icon box|text=A box with a Sunflower side bar and an icon.|color_bar={{wiki color|Sunflower}}|icon=clock}}</pre> | |||
| {{mbox|title=Sunflower icon box|text=A box with a Sunflower side bar and an icon.|color_bar={{wiki color|Sunflower}}|icon=clock}} | |||
| == TemplateData == | |||
| <templatedata> | <templatedata> | ||
| { | { | ||
| 	"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 19: | Line 46: | ||
| 			"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 47: | Line 81: | ||
| 			"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%" | |||
| 		} | 		} | ||
| 	}, | 	}, | ||
| 	"description": "A simple message box  | 	"description": "A simple message box. This template is meant to implement specific message boxes, not to be invoked directly.", | ||
| 	"paramOrder": [ | 	"paramOrder": [ | ||
| 		"title", | 		"title", | ||
| 		"text", | 		"text", | ||
| 		"color_bar", | |||
|         "icon", | |||
| 		"class", | 		"class", | ||
| 		"background", | 		"background", | ||
| 		"border", | 		"border", | ||
| 		" | 		"max_width", | ||
| 		"style" | 		"style" | ||
| 	], | 	], | ||
Latest revision as of 12:29, 14 October 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. It's recommended you use Template:wiki color to implement the wiki color scheme.
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={{wiki color|Orchid}}}}
{{mbox|title=Sunflower icon box|text=A box with a Sunflower side bar and an icon.|color_bar={{wiki color|Sunflower}}|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 |