Wikipedia:Article message boxes/issuebox demo

From Wikipedia, the free encyclopedia

1 Article message box demo
2 CSS code
3 The meta template
4 Technical details
5 Test area
6 See also

[edit] Article message box demo

This is a demonstration and test page for the code for the article message boxes. The boxes use one single meta template which in turn uses some CSS classes for pretty much all their looks. The meta template uses default images if no image parameter is given and it has some other nifty features.

Most of the examples on this page have now been moved to the documentation of the meta template {{ambox}}.

[edit] CSS code

The CSS code for the article message boxes has now been added to MediaWiki:Common.css, which means it is now full deployed and can be used all over the English Wikipedia.

Note! Those of you who took part in the testing of this code:

If you added code to your monobook JS file you should now remove it. The code to remove is this:

importStylesheet('Wikipedia:Template standardisation/CSS');

If you added CSS code to your monobook.css you should now remove it. The code to remove is the code you see below.

For reference, here is the code that has been added to MediaWiki:Common.css. (Note, this code might not be up to date with what really runs at MediaWiki:Common.css.)

/* Article message box template style */
table.ambox {
  width: 80%; 
  margin: 0 auto;
  border-collapse: collapse; 
  background: #f8fcff; 
  border: 1px solid #aaa; 
  border-left: 10px solid #39f;       /* Default "notice" blue */
}
 
table.ambox th, table.ambox td {      /* The message body cell(s) */
  padding: 0.25em 0.5em;              /* 0.5em left/right */
}
 
table.ambox td.ambox-image {          /* The left image cell */
  width: 52px; 
  padding: 2px 0px 2px 0.5em;         /* 0.5em left, 0px right */
  text-align: center; 
}
 
table.ambox td.ambox-imageright {     /* The right image cell */
  width: 52px; 
  padding: 2px 0.5em 2px 0px;         /* 0px left, 0.5em right */
  text-align: center; 
}
 
table.ambox-notice {
  border-left: 10px solid #39f;       /* Blue */
/* border-right: 10px solid #39f; */  /* If you want two blue bars */
}
 
table.ambox-serious {
  border-left: 10px solid #c00;       /* Red */
}
 
table.ambox-content {
  border-left: 10px solid #f63;       /* Orange */
}
 
table.ambox-style {
  border-left: 10px solid #fc3;       /* Yellow */
}
 
table.ambox-merge {
  border-left: 10px solid #95b;       /* Purple */
}

[edit] The meta template

The meta template that uses the CSS code above is at Template:Ambox. See examples and documentation there.

[edit] Technical details

The CSS classes can also be used directly in a wikitable. Like this:

{| class="ambox ambox-content"
|-
| class="ambox-image" | [[Image:Emblem-important.svg|40px]]
| Some text.
|}

Some text.

[edit] Test area

Test area where we can play around.

[edit] Testing shortcut box interference

Shortcut: WP:TS

This article message box has a small {{shortcut|WP:TS}} short cut box before it that flows top right. At low screen resolutions they can get too close...

[edit] Testing shortcut box insertion as imageright parameter

Seems a good solution is to insert the {{shortcut|WP:TS}} as the imageright parameter. – Some text some text some text some text some text some text some text some text some text some text some text.

Shortcut: WP:TS

And look how nice this next box stacks up now! – Some text some text some text some text some text some text some text some text some text some text some text.

[edit] Other testing

{{ambox
| text  = <div>
Text with equal sign = and a start { and end brace }. 
And here is a pipe {{!}} and two end braces <nowiki>}}</nowiki>. 
And now a pipe + end braces <nowiki>|}}</nowiki>.
</div>
}}

Text with equal sign = and a start { and end brace }. And here is a pipe | and two end braces }}. And now a pipe + end braces |}}.

Testing the CSS padding:

Some text.

Some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text.

Testing transwiki colours and default images:

This page is a candidate to be copied to Wiktionary using the Transwiki process.

[edit] Testing padding

Some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text.

[edit] See also

Wikipedia:Template standardisation - The main page for this project.
User:Flamurai/TS/blanca - Flamurai's article message box demo.
Wikipedia:Template standardisation/demometa - DragonHawk's article message box demo.