Wikipedia:Classes in Ambox

This how-to guide describes how to use the classes attributes in ambox to create article message boxes such as {{cleanup}}. The ambox CSS classes are defined in MediaWiki:Common.css. This guide describes how to use the classes directly in wikitables and HTML tables.

There is also a meta template {{ambox}} that makes it easy to create article message boxes. It has usage documentation and examples and can handle the most common usage cases. But {{ambox}} is mostly a thin wrapper for the classes. If/when you need more advanced functionality you can use the classes directly in a wikitable or HTML table as described in this guide.

Other mboxes

The class attributes for the {{tmbox}}, {{imbox}}, {{cmbox}} and {{ombox}} templates also work as described in this guide. Just change the naming from "ambox ambox-style" to for instance "tmbox tmbox-style" to instead get a brown talk page message box.

Browser cache

If these boxes don't look alike, you may need to refresh your web browser cache:

This happens when the class attributes have been updated but still is cached in your browser. This usually is gone in some days.

Basic usage

Simple usage example with the default blue "notice" colour:

{| class="ambox"|-| class="mbox-image" | Image| class="mbox-text" | Some text.|}

Slightly more complex example with the purple "move/merge/split/transwiki proposals" colour and an image:

{| class="ambox ambox-move"|-| class="mbox-image" | [[Image:Edit-copy purple.svg|40px]]| class="mbox-text" | Some text.|}

Ambox classes

All the styles for the article message boxes are defined as CSS classes in MediaWiki:Common.css. This allows the message boxes to be skinned. That is, they can be overridden in the style sheets for different Wikipedia skins and also in your own monobook.css.

Here are the ambox class names and what they define.

More usage

{| class="ambox ambox-notice"| class="mbox-image" | [[Image:Gnome globe current event.svg|42px]]| class="mbox-text" | <div>'''This article or section documents a current [[spaceflight]].'''<br>Content may change as the mission progresses.</div>| class="mbox-imageright" | [[Image:Shuttle.svg|20px]]|}

In the example above:

The main ambox class must be used in the header to set the box size and border etc.
The mbox-notice class is used to set the left colour bar. Not really necessary since the default colour bar that the main ambox class sets already is blue. But of course necessary for other colours.
The first wikitable cell uses the mbox-image class to set the size and padding etc. for the left image cell.
The image uses normal MediaWiki notation. 40px - 50px width are usually about right depending on the image height to width ratio.
The second cell holds the message body text. Padding and width for this cell and any extra cells should be set by using the class mbox-text.
The last cell uses the mbox-imageright class to set the size and padding etc. for the right image cell.

MediaWiki has some oddities when handling content in tables. Thus here we also applied a pair of <div> </div> tags around the message body text. They allow us to write the text on several lines instead of one contiguos line without getting strange paragraph breaks. In this case we just needed it to make the example lines short enough to fit in the code example box. But this trick can be very convenient when writing long messages. Note that the div-tags unfortunately cause some extra margin around the text, so only use them if you have to.

We also applied a <br> tag to force a line break exactly where we want it.

HTML tables

MediaWiki also understands HTML markup. Note that this is not really HTML markup but really "HTML wikimarkup", since MediaWiki processes it just like wikimarkup. Here is the example from above, but now with HTML markup:

<table class="ambox ambox-notice"><tr><td class="mbox-image"> [[Image:Gnome globe current event.svg|42px]]<td class="mbox-text"><div>'''This article or section documents a current [[spaceflight]].''' <br>Content may change as the mission progresses.</div><td class="mbox-imageright"> [[Image:Shuttle.svg|20px]]</table>

The example above doesn't use end </td> and end </tr> tags. Those end tags are usually not necessary since MediaWiki automatically adds them when it renders pages. But there are some exceptions:

In some rare cases when doing advanced template programming you can get weird whitespace problems when not having the end tags, then add them. In those cases you usually have to leave at least one blank space before and after the cell content (inside the start and end <td> tags), but no newline. Here are two examples that might cause problems:

<td class="mbox-text"> {{{text|}}}

<td class="mbox-text">{{{text|}}}</td>

And here's how to make it work nicely:

<td class="mbox-text"> {{{text|}}} </td>

This only concerns admins: When building mboxes for MediaWiki messages (in MediaWiki space) you usually have to be XHTML compliant and use end tags and <br /> tags, since MediaWiki doesn't handle HTML wikimarkup in many of the system messages.

Box width and box flow

The mbox classes and the mbox meta-templates such as {{ambox}} and {{tmbox}} are designed in such a way that they work smoothly in all web browsers. Here are some of the things that they take care of:

Make it so the boxes get centred and 80% wide even in very old web browsers.
Make it so the boxes get 80% wide even if the text content inside them is shorter than 80% wide. Thus it looks good when several different boxes are stacked on top of each other.
Make it so if there are right or left floating boxes such as infoboxes or image thumbnails next to an mbox, then the mbox automatically gets narrower to leave room for the other boxes. Thus preventing mboxes and infoboxes etc. from overlapping each other.

These things are what we call proper "box flow".

No image cell

For an mbox to get 80% wide and proper box flow it has to have at least one "mbox-text" cell and one other cell of at least 1px width on the same table row. That other cell usually is an "mbox-image" cell, but if you don't have an image cell then you can simply add an empty cell:

<td></td>

However, empty cells default to at least 3px width (width+padding), which sometimes can be fairly visible. So for convenience there is the mbox-empty-cell class which sets the cell to just 1px width, and no border or padding:

<td class="mbox-empty-cell"></td>

The empty cell can be either to the left or to the right of the text cell, both works.