Template:Messagebox
From Freephile Wiki
This template is for generating nicely formatted message boxes in articles, or even other templates.
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 - to indicate what success means
- warning - to alert the user about preventing problems
- failure - to dialog about when something fails
- restricted - shows the keys graphic, to advise of a restricted access area or restricted authoring
- forbidden - for messages about policies about things you should not do
- normal (default)
- style
- (optional) is CSS that will be passed through.
Literal Code 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]
To Do[edit source]
Based on the existing dialog images [1], I should add a type for "restricted" for pages with restricted authoring and or "forbidden"- todo Improve and coordinate the CSS with the new Chameleon skin rather than just the freephile skin
Making this template[edit source]
To generate the resized images from svg File:Dialog-ok-apply.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;
}