I've added the metadata class to the table so anyone who has set up their stylesheets to do something with metadata will continue to see the same results. If this is removed, please add @media print { .ambox { display: none } } to MediaWiki:Monobook.css or MediaWiki:Common.css (whatever is the appropriate location). --- RockMFR 21:41, 14 September 2007 (UTC)
@media print { .ambox { display: none } }
Ambox is currently used in about 730 items in template space. Not all are as direct calls, but notheless, it shows how widespread the template is. Rich Farmbrough, 15:34 3 October 2007 (GMT).
Hi -- I was hoping to use the ambox template on another mediawiki-based wiki, but it doesn't work. Any ideas? What it produces is:
<td class="mbox-image"> </td> {{{text}}}
Did you install the parser functions?
I was having the same problem until I installed the Parser Functions extension:
http://meta.wikimedia.org/wiki/Help:ParserFunctions#Installation
--206.83.81.34 (talk) 16:59, 18 March 2008 (UTC)
/* Article message box template styles */ table.ambox { width: 80%; margin: 0 auto; border-collapse: collapse; background: #fbfbfb; border: 1px solid #aaa; border-left: 10px solid #1e90ff; /* 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.mbox-image { /* The left image cell */ width: 52px; padding: 2px 0px 2px 0.5em; /* 0.5em left, 0px right */ text-align: center; } table.ambox td.mbox-imageright { /* The right image cell */ width: 52px; padding: 2px 4px 2px 0px; /* 0px left, 4px right */ text-align: center; } table.ambox-notice { border-left: 10px solid #1e90ff; /* Blue */ /* border-right: 10px solid #1e90ff; */ /* If you want two blue bars */ } table.ambox-delete, table.ambox-serious { border-left: 10px solid #b22222; /* Red */ } table.ambox-content { border-left: 10px solid #f28500; /* Orange */ } table.ambox-style { border-left: 10px solid #f4c430; /* Yellow */ } table.ambox-merge { border-left: 10px solid #9932cc; /* Purple */ } table.ambox-protection { border-left: 10px solid #bba; /* Gray */ } table.ambox.ambox-mini { /* small floating box variant */ float: right; clear: right; margin: 0 0 0 1em; width: 25%; }
Nihiltres, I am having the exact same problem. For some reason, the parser is parsing the "<" symbol in the template, and outputting the html-encoded equivalent: < Therefore, if you look at the HTML source, you see:
<td class="mbox-image"> <a title="Image:Info non-talk.png" ...
This prevents the browser from "seeing" the HTML for what it is, and therefore the html gets "passed through" to the browser window for the user to see. I believe my MediaWiki:Common.css is up to date, and that this problem is unrelated.
Unfortunately, I have no better clue why this is happening. I am running MediaWiki 1.12alpha, with the following extensions:
I have disabled each of them in turn to rule them out as the culprit, but there was no effect. --Hemr 17:36, 7 October 2007 (UTC)
$wgUseTidy = true;
Here's some text to keep the amboxes separate.
On my browser, at least, part of the bottom border of the first ambox disappears, and a large part of the second box (including text!) ends up disappearing entirely under the image. This is bad.
This only appears to happen in Cologne Blue. Under Monobook, the first ambox is unmolested, and, while the second box is cut off, the text isn't truncated. I've uploaded a screenshot at Image:Ambox_breakage.png, if you're curious what this ends up looking like. Zetawoof(ζ) 21:24, 15 September 2007 (UTC)
These templates need to clear to the right (that is, common.css needs to say table.ambox { clear: right;}. Here are scaled screenshots showing the problem and the appearance with this css. broken fixed The fix isn't great, but with the limitations of css in the wild this is the best we can hope for. — Carl (CBM · talk) 23:48, 17 September 2007 (UTC)
table.ambox { clear: right;}
table.ambox { clear: both; }
I think you convinced me CBM, I guess you are right. The testing I had done was with smaller boxes to the right like the shortcut boxes etc, But as you pointed out, the 20em infobox case is different. We probably should add table.ambox { clear: both; } since that seems to be the least bad alternative. --David Göthberg 14:44, 24 September 2007 (UTC)
margin-left:20%; margin-right:20%; width:auto;
Dispenser: You're a genius! Your solution works! But first a correction, since we want the message boxes to be 80% width then Dispenser's suggestion should be
margin-left:10%; margin-right:10%; width:auto;
I tested your suggestion and it works perfectly in all my browsers. That is it works perfectly in Firefox 2.0, Opera 9.02 and even in my really old Internet Explorer 5.5 that I use for compatibility testing. But I can not run Safari on my OS. So, can some Safari user (and other browser users too) take a look at the the test examples here?
All these boxes below here are hardcoded so these examples will look the same when/if we update the ambox CSS classes in MediaWiki:Common.css.
Old style ambox:
And this would be the article text.
New style ambox:
Notice that in the new style boxes with just a little text in do not become full width. I am not sure that is a problem since we have received comments from people that want exactly that to happen. So might be a good thing.
So, I am eagerly awaiting your reports how this looks/works in your different browsers.
--David Göthberg 01:30, 26 September 2007 (UTC)
I don't know if this is intentional or a known quirk, or whatever, but the code used in the Father Goose post above is not centering when the browser window is wide. I've uploaded a screenshot here. When the browser window is smaller, it looks fine. I'm running OS X v. 10.4.10 with Firefox 2.0.0.7, though the issue is also present in Safari v. 2.0.4. It seems a wide screen is needed to see the problem. --MZMcBride 21:23, 26 September 2007 (UTC)
Zetawoof: Right-hand images? Good question. Let's test it. Here goes:
Auto width ambox with both left and right images:
And here is some fake article text.
Looks fine in my browsers. So it seems that images inside the message boxes do not cause any problems. Does it look okay in your browsers too?
--David Göthberg 22:40, 26 September 2007 (UTC)
I'm not sure the above suggestion works very well. Sure, when just one <80% width template appears alongside an infobox you might get a slight benefit, but in the majority of cases the width will be 80% and we will still have the problem. Worse, the stacking (a fundamental part of the standardisation effort) doesn't look anywhere near as good now. violet/riga (t) 17:06, 27 September 2007 (UTC)
Why not encapsulate a full-width element inside an auto-width element with 10% margins? The following example is kludgy, but somebody who knows what they're doing better than I could probably fix it:
--Father Goose 01:03, 28 September 2007 (UTC)
Still doesn't stack on "short text" for me. (Safari) --TheDJ (talk • contribs) 10:45, 28 September 2007 (UTC)
clear:left; display:block;
You were close Father Goose, but those elements didn't need to be encapsulated, all you need to do was set the td to width:100%;. I've changed your examples to use just this now. —Dispenser 13:11, 28 September 2007 (UTC)
image=blank
image=none
Silly me, we can just use padding. I've changed the sample set above to use padding to have all the image cells be the same size and the images centered. (The second "small merge" -- fourth from top -- uses spacer.gif instead of padding as a demonstration.)
We should be able to use ParserFunctions to auto-size the padding, something like: style="padding: 2px {{#expr: {{{imagewidth}}} / 2}}px 2px {{#expr: {{{imagewidth}}} / 2 + 8}}px;" | [[image:imagename|{{{imagewidth}}}px]], and we could give "imagewidth" a default value of 40. We'll need to do the same for "imageright" as well ("imagerightwidth").
I updated the top set of examples (next to the wolf) with the "padding" technique as well. Are we on the verge of a solution?--Father Goose 19:49, 1 October 2007 (UTC)
You can add <div style="width:52px;"> inside the image table cell. It works (will at least) in Russian Wikipedia currently. — Kalan ? 05:10, 13 October 2007 (UTC)
This template has an undocumented style parameter. It's usage is:
<table style="{{{style|}}}" class="metadata plainlinks ambox {{#switch:{{{type|}}} | serious = ambox-serious | content = ambox-content | style = ambox-style | merge = ambox-merge | notice = ambox-notice | #default = ambox-notice }}">
A useful example can be seen at the bottom of {{Copyedit/testcases}} and {{Plot/testcases}}. The example code is {{Copyedit/sandbox}} and {{Plot/sandbox}}.
To evaluate the benefit in a live article please view Keeping Mum (before) and Keeping Mum (after) with article coding differences.
Should the style parameter be documented? – Conrad T. Pino 10:38, 14 October 2007 (UTC) – Updated: Conrad T. Pino 06:20, 15 October 2007 (UTC) – Conrad T. Pino 02:17, 17 October 2007 (UTC)
I regret in haste I've been unclear. Documenting an application programming interface establishes an implied contract which once used can't be modified without disruption. My question was neither "can I (ability)" nor "may I (permission)". My question is, "Should we (the collective contributing editors) commit ourselves to the implied contract?" I shall wait the customary 7 days before presuming consensus. – Conrad T. Pino 07:30, 17 October 2007 (UTC)
{{editprotected}}
It appears that we have worked out all the bugs with a "resizable ambox" (one that does not overlap other elements such as infoboxes and images when they appear on the same line). Discussion and testing is at #Latest iteration, above. The template page should be replaced with:
<table style="{{{style|}}}" class="metadata plainlinks ambox {{#switch:{{{type|}}} | serious = ambox-serious | content = ambox-content | style = ambox-style | merge = ambox-merge | notice = ambox-notice | #default = ambox-notice }}"> <tr> <td class="mbox-image"> {{#ifeq:{{{image}}}|none | <!-- no image cell; empty cell necessary for text cell to have 100% width --> | <div style="width:52px;"> {{#switch:{{{image|{{{type|}}}}}} | serious = [[Image:Stop hand nuvola.svg|40px]] | content = [[Image:Emblem-important.svg|40px]] | style = [[Image:Broom icon.svg|40px]] | merge = [[Image:Merge-split-transwiki default.svg]] | notice = [[Image:Info non-talk.png|40px]] | blank = [[Image:Spacer.gif]] | #default = {{{image|[[Image:Info non-talk.png|40px]]}}} }}</div> }}</td> <td class="mbox-text">{{{text}}}</td> {{#if:{{{imageright|}}}| <td class="mbox-imageright"><div style="width:52px;"> {{{imageright}}} </div></td> }} </tr> </table><noinclude> {{template doc}} <!-- Add categories and inter-wikis to the /doc subpage, not here! --> </noinclude>
and the first four sections following /* Article message box template styles */ in MediaWiki:Common.css should be replaced with:
table.ambox { margin: 0 10%; /* Will not overlap with other elements */ border-collapse: collapse; background: #fbfbfb; border: 1px solid #aaa; border-left: 10px solid #1e90ff; /* Default "notice" blue */ } table.ambox th.mbox-text, table.ambox td.mbox-text { /* The message body cell(s) */ padding: 0.25em 0.5em; /* 0.5em left/right */ width: 100%; /* Make all templates the same width regardless of text size */ } table.ambox td.mbox-image { /* The left image cell */ padding: 2px 0px 2px 0.5em; /* 0.5em left, 0px right */ text-align: center; } table.ambox td.mbox-imageright { /* The right image cell */ padding: 2px 4px 2px 0px; /* 0px left, 4px right */ text-align: center;
table.ambox-notice and everything below it in Common.css remains unchanged. It's possible these changes will cause some minor funkiness until everyone's cache is updated.--Father Goose 22:40, 14 October 2007 (UTC)
Introducing an empty cell to keep the box wide caused some templates like {{afd}} look bad. To fix the cell's behavior, please change
<td class="mbox-image">
to
<td class="mbox-image" {{#ifeq:{{{image|}}}|none|style="padding:0 !important"}}>
— Kalan ? 08:34, 17 October 2007 (UTC)
Bypass your cache. I had the same problem. --- RockMFR 13:33, 17 October 2007 (UTC)
Ahh, I see what you mean. The "!important" isn't necessary here, is it? Just asking before we send the job queue up again. --- RockMFR 18:00, 18 October 2007 (UTC)
<td class="mbox-text">{{{text}}}</td>
<td style="{{{textstyle|}}}" class="mbox-text">{{{text}}}</td>
Is Kalan's change, requested above, still needed? It's unclear to me if it is cache-related or if it is a repeatable bug specific to Opera. If anyone can confirm that they experience the same bug, I'll resubmit the editprotected request.--Father Goose 18:39, 21 October 2007 (UTC)
I'm not sure if this is related to anything recent, but whilst checking the above in Opera 9.23, I noticed this problem: Image:WikipediaScreenshot-AmboxAlignmentProblem.png The right-hand border of the {{original research}} box isn't aligned with the two above, at Sugar Core. I can't see anything obviously wrong, so here's my bug-report ;) --Quiddity 18:03, 18 October 2007 (UTC)
Template:Future Australian public transportation uses Ambox, and it looks screwed in Firefox. The right image falls outside the box. It is either a bug in Ambox or that template, and needs to get fixed. huji—TALK 18:48, 17 October 2007 (UTC)
I changed the blue icon to a protected SVG version on Commons and was reverted by David Levy. My reason for changing it to Image:Information icon.svg in the first place was that 1) this image resides on Commons, 2) is protected and 3) is an SVG image (which allows better scaling). Therefor I think David's revert was inappropriate and for the wrong reasons (well, actually he didn't give any). Discussion please. — Edokter • Talk • 13:29, 9 November 2007 (UTC)
(EC) Forget the whole thing; I am seriously being beaten to death here with this interrogation. I really don't need this shit... (addendum) I have given my opinion, so I don't see I have to answer the same questions over and over again, being bartered with a barrage of question on every' comment I make. We'll talk when you can hold a normal conversation. — Edokter • Talk • 20:19, 9 November 2007 (UTC)
Don't make me break out the hot cup of tea! I'm warning you! SO mountain/molehill/melodrama. And quit trying to get the last word, because it belongs to me now ;) --Quiddity 03:07, 10 November 2007 (UTC)
The next time someone does change the ambox page, can I ask them to tack on the following change? It's a low-priority change, so I'd rather it be bundled with another edit to avoid queue abuse. (Thus do not do it immediately.) Change:
<td class="mbox-text" style="{{{textstyle|}}}">{{{text}}}</td>
The reason for this change is detailed in an earlier section.--Father Goose 16:43, 9 November 2007 (UTC)
I modified {{Ambox/sandbox}} to remove the div tags and white space surrounding images. I added more cases to {{Ambox/testcases}} to compare {{Ambox}} and {{Ambox/sandbox}} in combination with our lupine friend. Both look fine with Firefox 2.0 and Internet Explorer 6.0 on Windows 2000 and Internet Explorer 7.0 on Windows XP but that's all the browsers I have. I'd like volunteers to visit {{Ambox/testcases}} and post screen shots of funky looking anything. Images will be in slightly different positions which can probably be adjusted by tweaking width values. I'm delaying position adjustments to learn about gross effects on other browsers first. Thank you in advance. – Conrad T. Pino (talk) 12:20, 21 November 2007 (UTC)
This is great! Since my first post updates to /testcases diff and /sandbox diff happened, thank you all. My private sandbox confirms IE6/W2K (by Edokter) problems similar to Sarari 3 (by TheDJ) report; those issues being:
The changes to /sandbox (all by Edokter)) are:
Changes 1 & 2 seem related to the Issues; I don't get the rationale behind Change 3.
Conrad T. Pino (talk) 20:57, 21 November 2007 (UTC)
Hallo, I'm sysop of russian uncyclopedia . We decided to make the same template as in wikipedia, but I (and it seems to anyone else too) don't understand how it works. Please help us to create our own ambox template in whitch can be used any color and any image. Please answer on my talk page. And excuse my english please 89.110.26.195 (talk) 22:00, 12 December 2007 (UTC)
Ok, directly copying the source code for ambox from Wikipedia to my own private Wiki server produces this:
Any suggestions? —Preceding unsigned comment added by Mikaey (talk • contribs) 05:20, 17 January 2008 (UTC)
There is a parameter listed in the Parameters section of the documentation that does not work:
Regards Fosnez (talk) 07:30, 18 February 2008 (UTC)
These amboxes should not print. I was going to print an article with an ambox on it, but when I print previewed the article, there was the ambox. I think that the class(es) that the ambox has should read something like this.
@media print { .ambox {display:none;} }
That way the articles can be printed without the pesky things using up anyone's expensive color ink. - LA @ 08:55, 27 February 2008 (UTC)
I have made a new version of {{ambox}} that I intend to deploy within some days. For more about the new version and to discuss it see Wikipedia talk:Article message boxes#New ambox version.
--David Göthberg (talk) 05:46, 19 April 2008 (UTC)
Hi. I made a preliminary suggestion for building imbox using modern markup and CSS, instead of table layout, and was directed here. If anyone is interested, please have a look at Template talk:Imbox#Accessibility. —Michael Z. 2008-05-06 07:50 z
I hope it's not too late for a change. The image parameter should take in the image filename (eg. wiki.png) instead of the full wiki markup (eg. [[Image:wiki.png]]). It is similar to the change I have suggested at Template talk:Cmbox#image parameters. - oahiyeel talk 16:52, 7 May 2008 (UTC)
Could someone please replace the PNG Image:Ambox content.png with the new SVG version Image:Ambox content.svg? Thanks. --pbroks13talk? 21:38, 13 May 2008 (UTC)
it:Template:Avviso instead of it:Template:Ambox. Thank you really. --Goldmund100 (talk) 08:45, 5 June 2008 (UTC)
{{Notice}} needs to be updated to the current Ambox code I believe. MBisanz talk 06:54, 8 June 2008 (UTC)
I'd like to discuss a possible overhaul of the icon set for these templates. I moved my post to Wikipedia talk:Article message boxes. —Werson (talk) 22:57, 26 June 2008 (UTC)
You can use Ambox in your own wiki (and therefore use the various Wikipedia templates that use it such as Template:Merge, etc.).
To use Ambox or templates that use it, you must:
Next, create the page Template:Ambox, and copy and paste the source code for the template into that page.
Next, edit your wiki's Mediawiki:Common.css and add this CSS code: (for the most up to date CSS code, see Wikipedia's MediaWiki:Common.css.) This code is licensed under the GFDL license (see WP:REUSE).
Finally, you will need to upload images to your wiki for Ambox to use. Ambox selects a 40x40 image based on the message type if an image parameter is not specified:
Wikipedia uses SVG images (for example see ) instead in its various message templates, which get transformed into PNG images of a certain size for display. Those images are (I think all of them) released into the public domain.
(This section was compiled by ReedHedges from previous discussion between Tlustulimu, 206.83.81.34, Nihiltres, Hemr, and Gwagenknecht)
--ReedHedges 12:52, 23 July 2008 (UTC)
—Preceding unsigned comment added by [email protected] (talk • contribs) 04:16, 1 August 2008