Difference between revisions of "Template:Rounded info box"

Header
	Text

Header
	Text

Revision as of 22:44, 18 September 2013

(view - edit - history - purge) Documentation

This template is used on the Main page. Be careful when editing (test on your user page first!)

Examples

{{Rounded info box|Header|Text}}

Existing shortcuts

See Category:Rounded info box templates for a list of existing templates.

{{Red rounded info box|Header|Text}}

{{Grey rounded info box|Header|Text}}

Header
Text

{{Orange rounded info box|Header|Text}}

Header
Text

{{Green rounded info box|Header|Text}}

Header
Text

Custom colors

{{Rounded info box|Header|Text|bordercolor=red|hbgcolor=yellow|hcolor=#090}}

Header
Text

{{Rounded info box|Header|Text|hcolor=purple|hbgcolor=red|bgcolor=lime|color=rgb(255,150,10)|bordercolor=hsl(0, 100%, 0%)}}

Header
Text

Parameters (optional)

Colors

color: The text color of the body
hcolor: The text color of the header
bordercolor: Border color of the infobox
bgcolor: Background color of the body
hbgcolor: Background color of the header

Multiple formats are acceptable.

Format	Red	Light blue [1]
Hexadecimal	#f00 or #ff0000	#e0f0ff
Text	red	None [2]
RGB	rgb(255,0,0)	rgb(224,240,255)
HSL	hsl(0, 100%, 50%)	hsl(209, 100%, 94%)

[1] This is only an example - many other colors would also work.

[2] Some browsers may support a name for this color (like skyBlue) but it might not be consistent.

Layout

align: The alignment of the body (defaults to "center")
halign: The alignment of the header (defaults to "center")

@@ Line 1: / Line 1: @@
 <div style="text-align:center;"> <!-- EDITORS: THE HEADER COMES SECOND, NOT FIRST! Make sure you edit the correct part! -->
 {| class="infobox" id="" style="color: {{{color|black}}}; background-color: {{{bgcolor|#eef5ff}}}; border: 1px solid {{{bordercolor|#0088CC}}}; font-size: 90%; margin: 1em 0em 0em; padding: 2px; text-align: {{{align|center}}}; width: 100%; border-top-left-radius:8px; -moz-border-radius-topleft:8px; -webkit-border-top-left-radius:8px; border-bottom-right-radius:8px; -moz-border-radius-bottomright:8px; -webkit-border-bottom-right-radius:8px; {{{style|}}}"
-! colspan="2" style="color: {{{hcolor|black}}}; border: 1px solid {{{bordercolor|#0088CC}}}; font-weight:bold; background-color: {{{hbgcolor|#8ce}}}; padding-left: 1em; padding-right: 1em; text-align: {{{halign|center}}}; border-top-left-radius:4px; -moz-border-radius-topleft:4px; -webkit-border-top-left-radius:4px; border-bottom-right-radius:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius:4px; {{{hstyle|}}}" |'''{{{1|&nbsp;}}}'''
+! colspan="2" style="color: {{{hcolor|black}}}; border: 1px solid {{{bordercolor|#0088CC}}}; font-weight:bold; background-color: {{{hbgcolor|#8ce}}}; padding-left: 1em; padding-right: 1em; text-align: {{{halign|center}}}; border-top-left-radius:4px; -moz-border-radius-topleft:4px; -webkit-border-top-left-radius:4px; border-bottom-right-radius:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius:4px; box-shadow: 2px 2px 2px {{{hshadowcolor|{{{hbgcolor|#8ce}}}}}}; {{{hstyle|}}}" |'''{{{1|&nbsp;}}}'''
 |-
 |