Wikipedia:Ambox CSS classes

From Wikipedia, the free encyclopedia

This page is a how-to guide detailing a practice or process on the English Wikipedia.

This how-to guide describes how to use the ambox CSS classes to create article message boxes such as {{wikify}} etc. 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 just a thin wrapper for the CSS classes. If/when you need more advanced functionality you should use the classes directly in a wikitable or HTML table as described in this guide.

[edit] Browser cache

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

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

[edit] Usage

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

{| class="ambox"
|-
| Some text.
|}

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

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

Some text.

[edit] Ambox CSS 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.

[edit] More usage

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

This article or section documents a current spaceflight. Content may change as the mission progresses.

In the example above:

• The main ambox class must be used in the header to set the box size and border etc.
• The ambox-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 ambox-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 ambox-text.
• The last cell uses the ambox-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.

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

This article or section documents a current spaceflight. Content may change as the mission progresses.

[edit] See also

• Wikipedia:Article message boxes – The style guideline for creating article message boxes.
• Wikipedia talk:Article message boxes – For discussion about these matters.
• Template:Ambox – The meta template that makes it easy to create article message box templates in this new style. It has usage documentation and examples.
• Wikipedia:Ambox CSS classes/Skins – Several article message box skins for your Wikipedia account.
• Wikipedia:Talk page templates – For the "coffeeroll" standard used in talk page templates