Template:Mbox: Difference between revisions

From stencil.wiki
(Created page with "<includeonly><!-- --><div class="ambox {{{class|}}}" style="background: {{{background|#ffffff}}}; border: {{{border|1px solid black}}}; {{#if:{{{color_bar|}}}|border-left: 10px solid {{{color_bar}}};|}} {{{style|}}}">{{{text}}}</div><!-- --></includeonly><templatestyles src="ambox/styles.css" /> <-- margin: auto; text-align: center; padding: 0.5em 1em; -->")
 
No edit summary
 
(40 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<includeonly><!--
<includeonly><!--
--><div class="ambox {{{class|}}}" style="background: {{{background|#ffffff}}}; border: {{{border|1px solid black}}}; {{#if:{{{color_bar|}}}|border-left: 10px solid {{{color_bar}}};|}} {{{style|}}}">{{{text}}}</div><!--
--><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|}}}"><!--
--></includeonly><templatestyles src="ambox/styles.css" />
-->{{#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" /><!--
--><noinclude>
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.


<-- margin: auto; text-align: center; padding: 0.5em 1em; -->
== 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>&lt;p/&gt;</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>&lt;p/&gt;</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>
{
"params": {
"class": {
"label": "Class",
"description": "Custom class to add to the table.",
"type": "string",
"suggested": true
},
"background": {
"label": "Background",
"description": "Background color for the box (neutral grey if not specified). Embedded in the \"background\" CSS property.",
"type": "string",
"default": "#FFFFFF"
},
"border": {
"label": "Border",
"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"
},
"color_bar": {
"label": "Color bar",
"description": "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.",
"type": "string"
},
"style": {
"label": "Style",
"description": "Additional CSS styles embedded at the end of the inline styles for the box",
"type": "string"
},
"title": {
"label": "Title",
"description": "Header text to be used at the top of the box—this will be displayed in bold.",
"type": "string",
"suggested": true
},
"text": {
"label": "Text",
"description": "The body text of the message box.",
"type": "string",
"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. This template is meant to implement specific message boxes, not to be invoked directly.",
"paramOrder": [
"title",
"text",
"color_bar",
        "icon",
"class",
"background",
"border",
"max_width",
"style"
],
"format": "block"
}
</templatedata>
</noinclude>

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.}}
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>}}
Sample styled title

A plain box with a title and some markup in the text and other templates like Light Teal or links. A bunch of extra text has been added to this section to show the text-wrapping within the box. The <p/> tags are included to make sure the ink chip displayed uses its small size.

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}}
Orchid box
A box with an orchid side bar.
{{mbox|title=Orchid icon box|text=A box with an orchid side bar and an icon.|color_bar=#BB76CF|icon=clock}}
Orchid icon box
A box with an orchid side bar and an icon.

TemplateData

A simple message box. This template is meant to implement specific message boxes, not to be invoked directly.

Template parameters[Edit template data]

This template prefers block formatting of parameters.

ParameterDescriptionTypeStatus
Titletitle

Header text to be used at the top of the box—this will be displayed in bold.

Stringsuggested
Texttext

The body text of the message box.

Stringrequired
Color barcolor_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.

Stringoptional
Iconicon

Adds an icon, using the FontAwesome Free 6.0 solid icon set. It uses the same color as color_bar.

Stringoptional
Classclass

Custom class to add to the table.

Stringsuggested
Backgroundbackground

Background color for the box (neutral grey if not specified). Embedded in the "background" CSS property.

Default
#FFFFFF
Stringoptional
Borderborder

Border style for the box. Embedded in the "border" CSS property.

Default
1px solid #F1F3F5
Stringoptional
Max widthmax_width

The max width for the message box (should be percentage based).

Default
80%
Stringoptional
Stylestyle

Additional CSS styles embedded at the end of the inline styles for the box

Stringoptional