MessageBox

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.

## 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
}}
```

Produces:

Header text hereNormal 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
}}
```

Produces:

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

### With an image

```
{{MessageBox
}}
```

Produces:

Header text hereNormal text here
### With an aside

```
{{MessageBox
}}
```

Produces:

Header text hereNormal text hereAside text here
### Standard/default style

```
{{MessageBox
}}
```

Produces:

Header text hereNormal text hereComment text hereAside text here