|
|
| (8 intermediate revisions by 2 users not shown) |
| Line 1: |
Line 1: |
| | <templatestyles src="Messagebox/styles.css" /> |
| <div class="message-box | | <div class="message-box |
| {{#switch:{{{type|}}} | | {{#switch:{{{type}}} |
| | success = message-success | | | success = message-success |
| | warning = message-warning | | | warning = message-warning |
| | failure = message-failure | | | failure = message-failure |
| | | restricted = message-restricted |
| | | forbidden = message-forbidden |
| | normal <!-- normal = default --> | | | normal <!-- normal = default --> |
| | #default = message-normal | | | #default = message-normal |
| }}" style="{{{style|}}}"> | | }}" style="{{{style|}}}"> |
| | {{#switch:{{{type}}} |
| | | success = [[File:Dialog-ok-apply.svg|20px]] |
| | | warning = [[File:Dialog-warning.svg|20px]] |
| | | failure = [[File:Dialog-error.svg|20px]] |
| | | restricted = [[File:Dialog-password.svg|20px]] |
| | | forbidden = [[File:Dialog-cancel.svg|20px]] |
| | | normal |
| | | #default = [[File:Dialog-information.svg|20px]] |
| | }} |
| {{{text}}} | | {{{text}}} |
| </div> | | </div> |
| Line 15: |
Line 27: |
| | warning | | | warning |
| | failure | | | failure |
| | | restricted |
| | | forbidden |
| | normal = <!-- Do nothing, valid "type" --> | | | normal = <!-- Do nothing, valid "type" --> |
| | #default = <div style="text-align: center;">This message box is using an invalid "type={{{type|}}}" parameter and needs fixing. ([[:Category:templates using deprecated types|learn more]])</div><!-- Sort on namespace --> | | | #default = <div style="text-align: center;">This message box is using an invalid "type={{{type|}}}" parameter and needs fixing. ([[:Category:templates using deprecated types|learn more]])</div><!-- Sort on namespace --> |
| }} | | }} |
| <noinclude> | | <noinclude> |
| == Usage ==
| | {{Documentation}}</noinclude> |
| 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 ==
| |
| <pre>
| |
| {{Messagebox
| |
| | type = success
| |
| | style = width:50%;
| |
| | text = your message content
| |
| }}
| |
| </pre>
| |
| | |
| For a more complex (up to 80 parameters) template, see the Infobox template [[Template_talk:Infobox]]
| |
| | |
| == Visual Examples ==
| |
| {{Messagebox
| |
| | text = no type, uses default (normal)
| |
| | style = width:50%;
| |
| }}
| |
| | |
| {{Messagebox
| |
| | type = normal
| |
| | text = Why be normal?
| |
| }}
| |
| | |
| {{Messagebox
| |
| | type = success
| |
| | text = You won!
| |
| }}
| |
| | |
| {{Messagebox
| |
| | type = warning
| |
| | text = Do not spit into the wind
| |
| }}
| |
| | |
| {{Messagebox | |
| |type = failure
| |
| |text = You kissed your cousin
| |
| }} | |
| | |
| | |
| == Making this template ==
| |
| To generate the resized images from svg
| |
| [[Image:Dialog-error.svg|32px]]
| |
| [[Image:Dialog-warning.svg|32px]]
| |
| [[Image:Dialog-ok-apply.svg?|32px]]
| |
| [[Image:Dialog-information.svg|32px]]
| |
| | |
| 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
| |
| <source lang="css">
| |
| .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;
| |
| }
| |
| </source>
| |
| </noinclude> | |
| | |
| [[Category:Templates using ParserFunctions]]
| |