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 |