Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Template:Color box: Difference between revisions

Template page
Corrected width parameter
Add CSS to stop from overlapping floats.
(7 intermediate revisions by 3 users not shown)
Line 1: 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}}}; {{#if:{{{width}}}|width:{{{width}}}|}}; margin-right:auto; margin-left:auto">{{{1|Example text}}}</div><noinclude>
<div style="
__NOTOC__
margin: 0.2em auto;
==Syntax==
border: 2px solid {{{border|#888888}}};
This template creates a text box.
padding: 0.8em;  
{{code|<nowiki>{{Color box | color= | border= | text= | width= | content }}</nowiki>}}
width: {{{width|auto}}};
=== Parameters ===
overflow: hidden; /* To stop the div from overlapping floating elements. */
All the parameters are optional.
background-color: {{{color|black}}};
;color
text-align: {{{align|left}}};
: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.
color: {{{text|white}}};
;border
{{#ifeq: {{{italics}}} | no
:This sets the color of the border (color formatting as above). If omitted, the border will be light gray.
| font-style: normal;
;text
| font-style: italic;
:This sets the color of the text (color formatting as above). If omitted, the text will be white.
}}
;width
">{{{1|Example text}}}</div><noinclude>
: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>).
{{documentation}}
=== Usage notes ===
</noinclude>
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.
 
== Examples ==
 
<code><nowiki>{{Color box|A very basic text box}}</nowiki></code>:
{{Color box|A very basic text box}}
 
 
<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>