Template:Color box: Difference between revisions

← Older edit

VisualWikitext

Latest revision as of 11:28, 14 May 2025

Example text

Template documentation (for the above template, sometimes hidden or invisible)

Description: This template creates a colored text box.

Dependencies

Used by: {{Example}}; {{Important note box}}; {{Note box}}

Syntax

{{Color box|<content>|<border= color>|<width= percentage>|<color= color>|<align= position>|<text= color>|<italics= no>}}

Parameters

All named parameters, with an = in the syntax, are optional.

content: The contents of the box. This can be as long or short as necessary, and wiki formatting (such as bold text or links) works just fine. Note: If the text you would like to use include an equals sign (=), you need to explicitly declare your text as a numbered parameter (i.e. put 1= before your text), otherwise the template will display nothing.
border: Sets the border color of the box. The default is set to a shade of gray. Colors can be given either by color name^[1] (e.g. red or green) or values^[2] (like #FF0000).
width: Sets the width of the box. It's recommended to set this as a percentage (of the paragraph width), so 50% 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. When width is set to less than 100%, the box will be centered.
color: Sets the background color of the box. The default is set to transparent. For valid values see border
align: Sets the position of the text within the box. The default is set to left. Values are: left, center, right or justify.
text: Sets the text color of the box. The default is set to inherit. For valid values see border.
italics: Set italics= no to override the default of the contents of the box being in italics. Otherwise omit.

Usage notes: Make sure the colors used work both for light and dark mode.

Examples

{{Color box|A very basic text box}}: gives ...

A very basic text box

{{Color box|color= #144f1d|border= #2f8f2f|A more colorful box!}}: gives ...

A more colorful box!

{{Color box|color= #110033|border= #6600bb|width=50%|A smaller, purple box}}: gives ...

A smaller, purple box

{{Color box|color= #66FFFF|border= #6600FF|text= black|A light blue box with dark text}}: gives ...

A light blue box with dark text

References

^ https://www.w3schools.com/cssref/css_colors.asp [2021-10-23]
^ https://www.w3schools.com/cssref/css_colors_legal.asp [2021-10-23]

Visit Template:Color box/doc to edit this text! (How does this work?) (Refresh this text - why?)

[1] ttps://www.w3schools.com/cssref/css_colors.asp [2021-10-23]

[2] ttps://www.w3schools.com/cssref/css_colors_legal.asp [2021-10-23]

[1]

[2]

@@ 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}}}; width:{{{width|100%}}}; margin-left:auto; margin-right:auto">{{{1|Example text}}}</div><noinclude>
+<div style="
-==Syntax==
+margin: 0.2em auto;
-This template creates a text box.
+border: 2px solid {{{border|#888888}}};
-{{code|<nowiki>{{Color box | color= | border= | text= | width= | content }}</nowiki>}}
+padding: 0.8em;
-=== Parameters ===
+width: {{{width|auto}}};
-All the parameters are optional.
+overflow: hidden; /* To stop the div from overlapping floating elements. */
-;color
+background-color: {{{color|transparent}}};
-: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.
+text-align: {{{align|left}}};
-;border
+color: {{{text|inherit}}};
-:This sets the color of the border (color formatting as above). If omitted, the border will be light gray.
+{{#ifeq: {{{italics}}} | no
-;text
+ | font-style: normal;
-:This sets the color of the text (color formatting as above). If omitted, the text will be white.
+ | font-style: italic;
-;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>).
+">{{{1|Example text}}}</div><noinclude>
-=== Usage notes ===
+{{documentation}}
-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.
+</noinclude>
-== 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>