វិគីភីឌា:Ambox CSS classes

ទំព័រគំរូ:How-to

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.

Browser cache

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

Hardcoded box.

This is a temporary caching problem that should be gone in some days.

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.
|}

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.

More usage

{| class="ambox ambox-notice"
| class="ambox-image" | [[Image:Gnome globe current event.svg|42px]]
| <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]]
|}

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. Proper padding for this and any other extra cells is automatically set by the main ambox class used in the header.
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 padding 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. You don't even need to add end tags if you don't want to, MediaWiki fixes that for you when it renders the pages. 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><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>