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

ពីវិគីភីឌា
Jump to navigation Jump to search

ទំព័រគំរូ: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:

Box generated with the ambox CSS classes.
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.
|}
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.
|}
Edit-copy purple.svg 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.

ambox – The box size, border, background and default colour etc.
Image ambox-image and ambox-imageright
The size and padding etc of the image cells.
Imageright
ambox-serious – The red "serious issues" style.
ambox-content – The orange "content issues" style.
ambox-style – The yellow "style issues" style.
ambox-merge – The purple "merge/split/transwiki proposals" style.
ambox-notice – The blue "article notices" style.

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]]
|}
Gnome globe current event.svg

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

Shuttle.svg

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>
Gnome globe current event.svg

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

Shuttle.svg

Advanced usage[កែប្រែ]

See also[កែប្រែ]