Template:Messagebox: Difference between revisions

changes background images
adds ToDo section
Line 19: Line 19:
}}
}}
<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 three named parameters that can be given in any order.
Line 29: Line 31:
; style : (optional)  is CSS that will be passed through.
; style : (optional)  is CSS that will be passed through.


== Literal Example ==
== Literal Code Example ==
<pre>
<pre>
{{Messagebox
{{Messagebox
Line 66: Line 68:
}}
}}


== To Do ==
# 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"
# Improve and coordinate the CSS with the site / homepage


== Making this template ==
== Making this template ==
Line 73: Line 78:
[[Image:Dialog-ok-apply.svg?|32px]]
[[Image:Dialog-ok-apply.svg?|32px]]
[[Image:Dialog-information.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 81: Line 88:
<source lang="css">
<source lang="css">
.message-box {
.message-box {
font-family: Verdana, Arial, Helvetica, sans-serif;  
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;  
font-size: 11px;
background-color:#EBFFEA;  
background-color:#EBFFEA;
border:1px solid #0BD200;  
border:1px solid #0BD200;
color:#333333;  
color:#333333;
padding:8px;  
padding:8px;
margin:10px;
margin:10px;
background-repeat: no-repeat;
background-repeat: no-repeat;
background-position: 6px 6px;
background-position: 6px 6px;
}
}
.message-box a:link, .message-box a:active, .message-box a:visited {
.message-box a:link, .message-box a:active, .message-box a:visited {
color:#990000;
color:#990000;
text-decoration:none;
text-decoration:none;
border-bottom:1px solid #cccccc;
border-bottom:1px solid #cccccc;
}
}
.message-box a:hover {
.message-box a:hover {
color:#990000;
color:#990000;
text-decoration:none;
text-decoration:none;
border-bottom:1px solid #990000;
border-bottom:1px solid #990000;
}
}
.message-success {
.message-success {
font-weight: bold;
font-weight: bold;
border:1px solid #8FD500;  
border:1px solid #8FD500;
background-color:#F2FFD7;  
background-color:#F2FFD7;
background-image: url(images/32px-Dialog-ok-apply.svg.png);
background-image: url(images/32px-Dialog-ok-apply.svg.png);
padding-left: 32px;
padding-left: 32px;
}
}
.message-failure {
.message-failure {
font-weight: bold;  
font-weight: bold;
color: #990000;  
color: #990000;
border:1px solid #DD3C10;  
border:1px solid #DD3C10;
background-color:#FFEBE8;  
background-color:#FFEBE8;
background-image: url(images/32px-Dialog-error.svg.png);
background-image: url(images/32px-Dialog-error.svg.png);
padding-left: 32px;
padding-left: 32px;
}
}
.message-warning {
.message-warning {
font-weight: bold;
font-weight: bold;
color:#FF6633;
color:#FF6633;
border: 1px solid #ff9900;  
border: 1px solid #ff9900;
background-color:#fbf8c7;  
background-color:#fbf8c7;
background-image: url(images/32px-Dialog-warning.svg.png);
background-image: url(images/32px-Dialog-warning.svg.png);
padding-left: 32px;
padding-left: 32px;
}
}
.message-box .message-normal {
.message-box .message-normal {
font-weight:normal;
font-weight:normal;
color: #333;  
color: #333;
background-image: url(images/32px-Dialog-information.svg.png);
background-image: url(images/32px-Dialog-information.svg.png);
padding-left: 32px;
padding-left: 32px;
}
}
</source>
</source>