Difference between revisions of "Template:Messagebox"

From Freephile Wiki
Jump to navigation Jump to search
(mark this template with the todo template -- needs to be integrated with new Chameleon skin rather than just the freephile skin)
(New page: <div class="message-box {{#switch:{{{type|}}} | success = message-success | warning = message-warning | failure = message-failure | normal <!-- normal = default --> | #default ...)
(5 intermediate revisions by the same user not shown)
Line 4: Line 4:
 
| 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
Line 17: Line 15:
 
| 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>
This template is for generating nicely formatted message boxes in articles, or even other templates.
 
 
 
== Usage ==
 
== Usage ==
The template takes three named parameters that can be given in any order.
+
The template takes two named parameters. '''type''' is optional
; 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 ==
 
 
<pre>
 
<pre>
 
{{Messagebox
 
{{Messagebox
| type = success
+
|type = success (or warning, failure, normal) can be left blank
| style = width:50%;
+
|text = your message content
| text = your message content
 
 
}}
 
}}
 
</pre>
 
</pre>
  
 
For a more complex (up to 80 parameters) template, see the Infobox template [[Template_talk:Infobox]]
 
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
 
}}
 
 
{{Messagebox
 
| type = forbidden
 
| text = You can't do that!
 
}}
 
 
{{Messagebox
 
| type = restricted
 
| text = You must be a registered user to create or edit articles.  Contact the [[User:Freephile|WikiSysop]] for an account!
 
}}
 
== To Do ==
 
# <strike>Based on the existing dialog images [http://freephile.com/wiki/index.php?title=Special%3ASearch&ns6=1&ns7=1&ns8=1&ns9=1&ns10=1&ns11=1&search=dialog&fulltext=Advanced+search], I should add a type for "restricted" for pages with restricted authoring and or "forbidden"</strike>
 
# {{@todo}} Improve and coordinate the CSS with the new Chameleon skin rather than just the freephile skin
 
  
 
== Making this template ==
 
== 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]]
 
[[Image:Dialog-cancel.svg|32px]]
 
[[Image:Dialog-password.svg|32px]]
 
 
 
The parser code (how to do switch statements) is based on the example of the Ambox template from Mediawiki
 
The parser code (how to do switch statements) is based on the example of the Ambox template from Mediawiki
  
Line 102: Line 38:
 
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
 
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">
 
<source lang="css">
.message-box {
+
.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;}
font-family: Verdana, Arial, Helvetica, sans-serif;
+
.message-box a:link, .message-box a:active, .message-box a:visited {color:#990000;text-decoration:none;border-bottom:1px solid #cccccc;}
font-size: 11px;
+
.message-box a:hover {color:#990000;text-decoration:none;border-bottom:1px solid #990000;}
background-color:#EBFFEA;
+
.message-success {font-weight: bold;border:1px solid #8FD500; background-color:#F2FFD7; background-image: url(images/check.gif);padding-left: 28px;}
border:1px solid #0BD200;
+
.message-failure {font-weight: bold; color: #990000; border:1px solid #DD3C10; background-color:#FFEBE8; background-image: url(images/wrong.gif);padding-left: 28px;}
color:#333333;
+
.message-warning {font-weight: bold;color:#FF6633;border: 1px solid #ff9900; background-color:#fbf8c7; background-image: url(images/warning_sign.gif);padding-left: 28px;}
padding:8px;
+
.message-box .message-normal {font-weight:normal;color: #333;}
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>
 
</source>
 
</noinclude>
 
</noinclude>
  
 
[[Category:Templates using ParserFunctions]]
 
[[Category:Templates using ParserFunctions]]

Revision as of 20:05, 3 January 2009

{{{text}}}


Usage[edit source]

The template takes two named parameters. type is optional

{{Messagebox
|type = success (or warning, failure, normal) can be left blank
|text = your message content
}}

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

Making this template[edit source]

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/check.gif);padding-left: 28px;}
.message-failure {font-weight: bold; color: #990000; border:1px solid #DD3C10; background-color:#FFEBE8; background-image: url(images/wrong.gif);padding-left: 28px;}
.message-warning {font-weight: bold;color:#FF6633;border: 1px solid #ff9900; background-color:#fbf8c7; background-image: url(images/warning_sign.gif);padding-left: 28px;}
.message-box .message-normal {font-weight:normal;color: #333;}