Template:Messagebox

From Freephile Wiki
Revision as of 22:47, 3 January 2009 by Freephile (talk | contribs) (changes background images)

Jump to navigation Jump to search

{{{text}}}


Usage[edit source]

The template takes three named parameters that can be given in any order.

text 
(required) is the message
type 
(optional) determines the presentation using pre-defined styling. One of
  • success
  • warning
  • failure
  • normal (default)
style 
(optional) is CSS that will be passed through.

Literal Example[edit source]

{{Messagebox
| type = success
| style = width:50%;
| text = your message content
}}

For a more complex (up to 80 parameters) template, see the Infobox template Template_talk:Infobox

Visual Examples[edit source]

no type, uses default (normal)

Why be normal?

You won!

Do not spit into the wind

You kissed your cousin


Making this template[edit source]

To generate the resized images from svg Dialog-error.svg Dialog-warning.svg 32px Dialog-information.svg

The parser code (how to do switch statements) is based on the example of the Ambox template from Mediawiki

The following CSS is added to skins/freephile/freephile_template.css to make this template complete

The background images for the CSS are put into the images subfolder to make it easier to distinguish what is based on monobook, and what is extra

.message-box {
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 11px; 
	background-color:#EBFFEA; 
	border:1px solid #0BD200; 
	color:#333333; 
	padding:8px; 
	margin:10px;
	background-repeat: no-repeat;
	background-position: 6px 6px;
}
.message-box a:link, .message-box a:active, .message-box a:visited {
	color:#990000;
	text-decoration:none;
	border-bottom:1px solid #cccccc;
}
.message-box a:hover {
	color:#990000;
	text-decoration:none;
	border-bottom:1px solid #990000;
}
.message-success {
	font-weight: bold;
	border:1px solid #8FD500; 
	background-color:#F2FFD7; 
	background-image: url(images/32px-Dialog-ok-apply.svg.png);
	padding-left: 32px;
}
.message-failure {
	font-weight: bold; 
	color: #990000; 
	border:1px solid #DD3C10; 
	background-color:#FFEBE8; 
	background-image: url(images/32px-Dialog-error.svg.png);
	padding-left: 32px;
}
.message-warning {
	font-weight: bold;
	color:#FF6633;
	border: 1px solid #ff9900; 
	background-color:#fbf8c7; 
	background-image: url(images/32px-Dialog-warning.svg.png);
	padding-left: 32px;
}
.message-box .message-normal {
	font-weight:normal;
	color: #333; 
	background-image: url(images/32px-Dialog-information.svg.png);
	padding-left: 32px;
}