Template:Color box: Difference between revisions

Line 1:

<div style="margin:0; background-color:{{{color|#000000}}}; border:1px solid {{{border|#888888}}}; font-style:italic; text-align:left; padding:1em 1em 1em 1em; overflow:hidden; color:{{{text|#ffffff}}}; width:{{{width|100%}}}; margin-left:auto; margin-right:auto">{{{1|Example text}}}</div><noinclude>

==~~Example~~==

==Syntax==

~~The '~~color~~' parameter is~~ the background color. ~~The 'border' parameter is~~ the ~~border~~ color. ~~The~~ background color ~~should~~ be ~~a darker shade~~ of the border color. If the ~~background~~ color ~~is not dark~~, the white text ~~may be difficult~~ to ~~read. In that case~~, ~~use~~ a ~~black~~ text ~~by setting~~ the 'text~~' parameter~~.

This template creates a text box.

The ~~first unnamed parameter~~ is ~~the~~ text to ~~appear in the box~~.

{{code|<nowiki>{{Color box | color= | border= | text= | width= | content }}</nowiki>}}

=== Parameters ===

All the parameters are optional.

;color

:This sets the background color of the text box. You can use either color names (e.g. <code>blue</code>, <code>green</code>), or the [http://www.w3schools.com/cssref/css_colors.asp color's RGB values] as a hexadecimal number (which must be preceded by a hash character, e.g. <code>#222222</code> for light gray, or <code>#990099</code> for purple). If omitted, the background color will be black.

;border

:This sets the color of the border (color formatting as above). If omitted, the border will be light gray.

;text

:This sets the color of the text (color formatting as above). If omitted, the text will be white.

;width

:This sets the width of the text box. It's recommended to set this as a percentage (of the paragraph width), so <code>50%</code> will produce a text box half as wide as the surrounding paragraph. If omitted, the text box will be as wide as the surrounding paragraph (<code>100%</code>).

=== Usage notes ===

The background color should be darker than the border. Depending on how light the background color is, either white or black text is easier to read.

~~<nowiki>{{Color box|color~~=~~#144f1d|border~~=~~#2f8f2f|I made a colorful box!}}</nowiki>~~

== Examples ==

~~{{Color box|color~~=~~#144f1d|border~~=~~#2f8f2f|I made a colorful box!}}~~

<nowiki>{{Color box|~~color=#205|border=#60b|And this one is purple.~~}}</nowiki>

<code><nowiki>{{Color box|A very basic text box}}</nowiki></code>:

<nowiki>{{Color box|color=#~~c0f~~|border=#~~a0f~~|text=#~~000~~|~~Too~~ light}}</nowiki>

{{Color box|color=#~~c0f~~|border=#~~a0f~~|text=#~~000~~|~~Too~~ light}}

<code><nowiki>{{Color box|color=#144f1d|border=#2f8f2f|A more colorful box!}}</nowiki></code>:

<code><nowiki>{{Color box|color=#110033|border=#6600bb|width=70%|A smaller, purple box}}</nowiki></code>:

{{Color box|color=#110033|border=#6600bb|width=70%|A smaller, purple box}}

<code><nowiki>{{Color box|color=#66FFFF|border=#6600FF|text=#000000|A light blue box with dark text}}</nowiki></code>:

{{Color box|color=#66FFFF|border=#6600FF|text=#000000|A light blue box with dark text}}

[[Category:Template|{{PAGENAME}}]]</noinclude>

@@ Line 1: / Line 1: @@
-<div style="margin:0;background-color:{{{color|#000}}};border:1px solid {{{border|#888}}};font-style:italic;text-align:left;padding:1em 1em 1em 1em; overflow:hidden;color:{{{text|#fff}}}">{{{1}}}</div><noinclude>
+<div style="margin:0; background-color:{{{color|#000000}}}; border:1px solid {{{border|#888888}}}; font-style:italic; text-align:left; padding:1em 1em 1em 1em; overflow:hidden; color:{{{text|#ffffff}}}; width:{{{width|100%}}}; margin-left:auto; margin-right:auto">{{{1|Example text}}}</div><noinclude>
-==Example==
+==Syntax==
-The 'color' parameter is the background color.  The 'border' parameter is the border color.  The background color should be a darker shade of the border color.  If the background color is not dark, the white text may be difficult to read.  In that case, use a black text by setting the 'text' parameter.
+This template creates a text box.
-The first unnamed parameter is the text to appear in the box.
+{{code|<nowiki>{{Color box | color= | border= | text= | width= | content }}</nowiki>}}
+=== Parameters ===
+All the parameters are optional.
+;color
+:This sets the background color of the text box. You can use either color names (e.g. <code>blue</code>, <code>green</code>), or the [http://www.w3schools.com/cssref/css_colors.asp color's RGB values] as a hexadecimal number (which must be preceded by a hash character, e.g. <code>#222222</code> for light gray, or <code>#990099</code> for purple). If omitted, the background color will be black.
+;border
+:This sets the color of the border (color formatting as above). If omitted, the border will be light gray.
+;text
+:This sets the color of the text (color formatting as above). If omitted, the text will be white.
+;width
+:This sets the width of the text box. It's recommended to set this as a percentage (of the paragraph width), so <code>50%</code> will produce a text box half as wide as the surrounding paragraph. If omitted, the text box will be as wide as the surrounding paragraph (<code>100%</code>).
+=== Usage notes ===
+The background color should be darker than the border. Depending on how light the background color is, either white or black text is easier to read.
-<nowiki>{{Color box|color=#144f1d|border=#2f8f2f|I made a colorful box!}}</nowiki>
+== Examples ==
-{{Color box|color=#144f1d|border=#2f8f2f|I made a colorful box!}}
-<nowiki>{{Color box|color=#205|border=#60b|And this one is purple.}}</nowiki>
+<code><nowiki>{{Color box|A very basic text box}}</nowiki></code>:
-{{Color box|color=#205|border=#60b|And this one is purple.}}
+{{Color box|A very basic text box}}
-<nowiki>{{Color box|color=#c0f|border=#a0f|text=#000|Too light}}</nowiki>
-{{Color box|color=#c0f|border=#a0f|text=#000|Too light}}
+<code><nowiki>{{Color box|color=#144f1d|border=#2f8f2f|A more colorful box!}}</nowiki></code>:
+{{Color box|color=#144f1d|border=#2f8f2f|A more colorful box!}}
+<code><nowiki>{{Color box|color=#110033|border=#6600bb|width=70%|A smaller, purple box}}</nowiki></code>:
+{{Color box|color=#110033|border=#6600bb|width=70%|A smaller, purple box}}
+<code><nowiki>{{Color box|color=#66FFFF|border=#6600FF|text=#000000|A light blue box with dark text}}</nowiki></code>:
+{{Color box|color=#66FFFF|border=#6600FF|text=#000000|A light blue box with dark text}}
 [[Category:Template|{{PAGENAME}}]]</noinclude>