Difference between revisions of "Template:2ColumnBoxGray"

(oops)
 
(4 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{| width="100%" cellpadding="5px" cellspacing="0px"
+
{| width="{{{width|100%}}}" cellpadding="5px" cellspacing="0px"
 
|style="padding-top:0px; padding-right:0px; padding-left:0px; padding-bottom:0px;" valign="top" |
 
|style="padding-top:0px; padding-right:0px; padding-left:0px; padding-bottom:0px;" valign="top" |
{| width="100%" style="margin:0; background: #{{{header-color|999999}}}; font-family:sans-serif; font-size:120%; text-align:center; color:#ffffff; padding-left:0.4em; padding-top:0em; padding-bottom:0em;"
+
{| width="100%" style="margin:0; background: {{{header-color|#999999}}}; font-family:sans-serif; font-size:120%; text-align:center; color:#ffffff; padding-left:0.4em; padding-top:0em; padding-bottom:0em;"
 
|{{{header}}}
 
|{{{header}}}
 
|}
 
|}
 
|-
 
|-
|align="left" style="background-color: #{{{body-color|cccccc}}}; border:{{{border|0px}}} solid #{{{header-color|999999}}}; padding-top:5px; padding-right:10px; padding-left:10px; padding-bottom:10px;" valign="top"|
+
|align="left" style="background-color: {{{body-color|#cccccc}}}; border:{{{border|0px}}} solid {{{header-color|#999999}}}; padding-top:5px; padding-right:10px; padding-left:{{{padding-left|10px}}}; padding-bottom:10px;" valign="top"|
 
<div style="float:left; width:48%; padding-right:2%">{{{left}}}</div>
 
<div style="float:left; width:48%; padding-right:2%">{{{left}}}</div>
 
<div style="float:left; width:48%; padding-left:2%">{{{right}}}</div>
 
<div style="float:left; width:48%; padding-left:2%">{{{right}}}</div>

Latest revision as of 07:18, 8 June 2009

{{{header}}}
{{{left}}}
{{{right}}}


Multi-Column Box Instructions

For both 2- and 3-column boxes (collectively known as "MultiColumnBoxes"). For creating single-column boxes, please see AboutUsBasicBox.

Color Variants

There are five color variations for the MultiColumnBox templates, which use proven web-safe colors. Additionally, the {{2ColumnBoxGray}} and {{3ColumnBoxGray}} templates allows for customizing the colors via passed parameters:

2-column boxes

3-column boxes


Basic uses

There are only 3 (or 4) parameters needed to be passed in the template call:

2-column boxes

  • header = header text
  • left = text for the left column
  • right = text for the right column

3-column boxes

  • header = header text
  • left = text for the left column
  • center = text for the center column
  • right = text for the right column


2-Column Example:

{{2ColumnBoxBlue
| header = Box header here
| left = text for the left column
| right = text for the right column
}}

Result:

Box header here
text for the left column
text for the right column


3-Column Example:

{{3ColumnBoxYellow
| header = Box header here
| left = text for the left column
| center = text for the center column
| right = text for the right column
}}

Result:

Box header here
text for the left column
text for the center column
text for the right column


Intermediate uses

In addition to the basic uses, users can specify a border (border is the same color as the header), or use these boxes for list with WikiMarkup

Adding a border

2-Column Example:

{{2ColumnBoxGreen
| header = Box header here
| left = text for the left column
| right = text for the right column
| border = 2px
}}

Result:

Box header here
text for the left column
text for the right column



Advanced uses

Changing Colors

For advanced users, the {{2ColumnBoxGray}} and {{3ColumnBoxGray}} templates offers a variety of customizations, please note, for best compatibility, use web-safe colors like those found on the W3 Schools website:

  • header-color = specify color for header; defaults to dark gray if not present. Note: Supports the AboutUsColorTemplates as well as hex colors.
  • body-color = specify color for body style (can be same as header for mono-toned boxes); defaults to light gray if not present. Note: Supports the AboutUsColorTemplates as well as hex colors.

3-Column Example:

{{3ColumnBoxGray
| header = Box header here
| left = text for the left column
| center = text for the center column
| right = text for the right column
| border = 2px
| header-color = {{DarkPurple}}
| body-color = {{Purple}}
}}

Result:

Box header here
text for the left column
text for the center column
text for the right column


Working with Lists

Having your text blocks be lists is a common use for multi-column boxes. Due to the way MediaWiki interprets parameters, a very small return is needed before a list, which is provided by {{ClearList}}. NOTE: This needs to be added for EACH column.

2-Column Example:

{{2ColumnBoxGray
| header = Box header here
| left = {{ClearList}}
* first item in list...
* second item in list...
* third item in list...
| right = {{ClearList}}
* fourth item in list...
* and so on...
}}

Result:

Box header here

  • first item in list...
  • second item in list...
  • third item in list...

  • fourth item in list...
  • and so on...