Template documentation
Note: portions of the template sample may not be visible without values provided.
View or edit this documentation. (About template documentation)
Editors can experiment in this template's sandbox and test case pages.

{{MessageBox}} is a template for creating message boxes.

It is highly customizable with classes, inline styles, and provided CSS selectors. Optional features such as an image, left border, right-side text (for e.g. shortcuts), and a dismiss function.

It uses the Lua templating language, and more information can be found on the Global Lua Module page. This version is modified to produce a starter style, based on the basic style from the module. To use the full capabilities of this module and remove the default styling, remove the indicated portions of Module:Mbox.

For a traditional wikitext version of this template, see Ambox on Templates Wiki.

Parameters

For examples of how to use these parameters, see #Examples.

Parameter name	Description	Required?	Default
`class`	Additional classes to the root `.mbox` element.	No	—
`bordercolor`	The color of the thick left-most border.	No	Stylesheet default
`type`	Type of mbox as declared as in CSS with variables. Affects color of the thick left-most border. See #Using types.	No	—
`bgcolor`	The color of the mbox's background.	No	Stylesheet default
`style`	Additional inline styles to the root `.mbox` element.	No	—
`image`	An image to be added to the left of all text content.	No	—
`imagewidth`	The width of the image (height automatically adjusts).	No	`60px`
`imagelink`	The link to which the image points (could link to the relevant maintenance category, per example). If not included, the image will be un-clickable.	No	—
`header`	The header (bold text placed at the top). This is typically used to very briefly explain the subject of the mbox itself, as when the mbox is closed, only the header will show.	No	—
`text`	Non-bold text placed below the header, typically used to explain the subject of the mbox in further or additional detail. When the mbox is closed, this text will be hidden.	No	—
`comment`	Smaller non-bold text placed below the main text, typically used to add additional links or context about the notice. When the mbox is closed, this text will be hidden.	No	—
`aside`	Text placed within a small allocation on the right side separated by a light gray border. Most commonly used to show shortcuts to the page in question (such as on policy pages). When the mbox is closed, this text will be hidden.	No	—
`id`	By default, one close button will close all mboxes on the page. However, to change this, this parameter may be used, given as the name of the mbox implementation (e.g., "Template:Cleanup" would have `\|id=cleanup`).	No	—
`collapsed`	By default, the mbox will be uncollapsed, and the full contents will be shown. However, to change this, this parameter may be used to set an mbox as collapsed by default (e.g., `\|collapsed=true` would set the mbox to be collapsed by default).	No	—

Design

Some communities may wish to customize the appearance of the mboxes. The most common styling options are provided illustrated in CSS.

.mbox {
    /* the background of the entire box */;
    background-color: ;

    /* the border color of the entire box */
    border-color: ;

    /* the border thickness of the entire box */
    border-width: ;

    /* the default thick left border color; note this can be changed from within the template implementations using the "color" parameter */
    border-left-color: ;

    /* the rounded-ness of the corners */;
    border-radius: ;

    /* the baseline font-size of the mbox */
    font-size: ;
}

.mbox__content {
    /* the padding inside the mbox */
    padding: ;
}

.mbox__content__image {
    /* the minimum width of the mbox's image (if bigger, use the "imagewidth" parameter in the template) */
    width: ;

    /* the spacing to the left of the text (i.e., the right of the image) */
    padding-right: ;
}

.mbox__content__text__comment {
    /* the size of the text in the "comment" parameter */
    font-size: ;
}

.mbox__content__aside {
    /* any particular modifications to the "aside" area can go here */

    /* the maximum width of the aside area */
    width: ;
}

.mbox__close {
    /* the appearance of the close symbol here */
}

.mbox__close:after {
    /* overwrite "content" here if you do not wish for the close symbol to be × */
    content: '';
}

.mw-collapsed + .mbox__close {
   /* modifications to the close symbol when the box is closed */
}

.mw-collapsed + .mbox__close:after {
   /* overwrite "content" here if you do not wish for the close symbol to be + when the box is closed */
   content: '';
}

Technical notes

Additional inline styles to the root .mbox element can be achieved via the style parameter in the template.

Examples

Basic MessageBox

{{MessageBox
|header      = Header text here
|text        = Normal text here
|id          = test1

<!-- styling to replace default light color scheme --> 
|bgcolor = #692626
|style   = color: #e6e6e6; border-color: #a78080 
}}

Produces:

Header text here

Normal text here

Using types

To use types, CSS variables must be added, such as:

:root {
    --type-important: rgba(200, 0, 0, 0.8);
    --type-moderate: rgba(233, 124, 47, 0.8);
    --type-minor: rgba(241, 197, 37, 0.8);
}

If added:

{{MessageBox
|header = Header text here
|type   = important
|text   = Normal text here
|id     = test2
}}

Produces:

Header text here

Normal text here

Depending on your styling, there may not be a visual difference in the above example.

With an image

{{MessageBox
|header     = Header text here
|text       = Normal text here
|image      = Wiki.png
|imagelink  = 
|imagewidth = 50px
|id         = test3
}}

Produces:

Header text here

Normal text here

With an aside

{{MessageBox
|header = Header text here
|type   = important
|text   = Normal text here
|aside  = Aside text here
|id     = test4
}}

Produces:

Header text here

Normal text here

Aside text here

Standard/default style

{{MessageBox
|header  = Header text here
|text    = Normal text here
|comment = Comment text here
|image   = Wiki.png
|aside   = Aside text here
|id      = standard
}}

Produces:

Header text here

Normal text here

Comment text here

Aside text here

Very hard to learn, don't say I didn't warn you.

Template parameters[Edit template data]
Parameter		Description	Type	Status
Border Color	`bordercolor`	Color of the FIRST border next to text. Example #676767	Unknown	optional
Background Color	`bgcolor`	Color of the background of messagebox (HEX color code) Example #ffffff	Unknown	optional
Image	`image`	Image name, plus file extension, minus "File:" Example Wiki.png	Unknown	optional
Image Width	`imagewidth`	Size of the image, By default this is 60px wide, for square images this works well. Default 60px Example 67px	Unknown	optional
Image Link	`imagelink`	Turns the image into a button which redirects to a Wiki page. Example RetroStudio	Unknown	optional
Header	`header`	You put text here, make it short (or not) and also make it '''bold''' thanks. Example '''Woah Wuh'''	Unknown	suggested
Text	`text`	"I can talk and you can type the text!"... Just put regular text here.	Unknown	suggested
Comment	`comment`	Teeny tiny text underneath your regular text. Example pssst!	Unknown	optional
Aside Text	`aside`	Why would you use this? nobody would.	Unknown	optional
Collapsed Template	`collapsed`	Uhh probably don't do anything with this, doesn't really work well and is quite the useless parameter. Auto value `false`	Boolean	optional
Style	`style`	Here comes the big one, Changes both Text color AND second border color. uses css looking syntax. Listen man it's not my fault it works like this. Example color: #676767; border-color: #B00B69	Unknown	suggested