Difference between revisions of "Template:Color box"

From EVE University Wiki
Jump to: navigation, search
(Expanded functionality, improve documentation)
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>
 
[[Category:Template|{{PAGENAME}}]]</noinclude>

Revision as of 12:38, 11 February 2014

Example text

Syntax

This template creates a text box.

{{Color box | color= | border= | text= | width= | content }}

Parameters

All the parameters are optional.

color
This sets the background color of the text box. You can use either color names (e.g. blue, green), or the color's RGB values as a hexadecimal number (which must be preceded by a hash character, e.g. #222222 for light gray, or #990099 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 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 (100%).

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.

Examples

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

A very basic text box


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

A more colorful box!


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

A smaller, purple box


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

A light blue box with dark text