Difference between revisions of "Template:BasicBoxInstructions"

(Roll to)
 
(36 intermediate revisions by 5 users not shown)
Line 1: Line 1:
 
==BasicBox Instructions==
 
==BasicBox Instructions==
 +
{{TOCRight}}
 
===Color Variants===
 
===Color Variants===
There are five color variations for the '''BasicBox templates''', which include proven web-safe colors. Additionally, the <nowiki>{{BasicBoxGray}}</nowiki> template allows for customizing the colors via passed parameters:
+
There are five color variations for the [[AboutUsBasicBox|BasicBox]] templates, which use proven web-safe colors. Additionally, the {{TemplateLink|BasicBoxGray}} template allows for customizing the colors via passed parameters:
* [[Template:BasicBoxRed|<nowiki>{{BasicBoxRed}}</nowiki>]]: Red
+
* {{TemplateLink|BasicBoxRed}}: Red
* [[Template:BasicBoxBlue|<nowiki>{{BasicBoxBlue}}</nowiki>]]: Blue
+
* {{TemplateLink|BasicBoxBlue}}: Blue
* [[Template:BasicBoxGreen|<nowiki>{{BasicBoxGreen}}</nowiki>]]: Green
+
* {{TemplateLink|BasicBoxGreen}}: Green
* [[Template:BasicBoxYellow|<nowiki>{{BasicBoxYellow}}</nowiki>]]: Yellow
+
* {{TemplateLink|BasicBoxYellow}}: Yellow
* [[Template:BasicBoxGray|<nowiki>{{BasicBoxGray}}</nowiki>]]: Gray
+
* {{TemplateLink|BasicBoxGray}}: Gray
 
 
  
 
===Basic uses===
 
===Basic uses===
Line 14: Line 14:
 
* body = body text
 
* body = body text
  
<div style="float:right; width=49%; padding-right:20px;">
+
{{FloatLeft|
'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Result:'''
+
'''Example:'''
 +
<pre>
 
{{BasicBoxRed
 
{{BasicBoxRed
 
| header = Box header here
 
| header = Box header here
 
| body = Text for the box here
 
| body = Text for the box here
}}</div>
+
}}
<div style="float:left; width=49%; padding-left:20px;">
+
</pre>
'''Example:'''
+
}}
<pre>
+
'''Results:'''
 
{{BasicBoxRed
 
{{BasicBoxRed
 
| header = Box header here
 
| header = Box header here
 
| body = Text for the box here
 
| body = Text for the box here
}}</pre>
+
}}
</div>
+
{{Clear}}
<br style="clear:both"/>
 
  
 
===Intermediate uses===
 
===Intermediate uses===
Line 35: Line 35:
 
* border = border; defaults to 0px if not present
 
* border = border; defaults to 0px if not present
  
<div style="float:right; width=49%; padding-right:20px;">
+
{{FloatLeft|
'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Result:'''
+
'''Example:'''
 +
<pre>
 
{{BasicBoxRed
 
{{BasicBoxRed
 
| header = Box header here
 
| header = Box header here
Line 42: Line 43:
 
| width = 200px
 
| width = 200px
 
| border = 2px
 
| border = 2px
}}</div>
+
}}
<div style="float:left; width=49%; padding-left:20px;">
+
</pre>
'''Example:'''
+
}}
<pre>
+
'''Results:'''
 
{{BasicBoxRed
 
{{BasicBoxRed
 
| header = Box header here
 
| header = Box header here
Line 51: Line 52:
 
| width = 200px
 
| width = 200px
 
| border = 2px
 
| border = 2px
}}</pre>
+
}}
</div>
+
{{clear}}
<br style="clear:both"/>
 
  
 
===Advanced uses===
 
===Advanced uses===
For advanced users, the <nowiki>{{BasicBoxGray}}</nowiki> offers a variety of customizations, please note, for best compatibility, use web-safe colors like those found on the [http://www.w3schools.com/html/html_colors.asp W3 Schools website]:
+
For advanced users, the {{TemplateLink|BasicBoxGray}} offers a variety of customizations, please note, for best compatibility, use web-safe colors like those found on the [http://www.w3schools.com/html/html_colors.asp W3 Schools website]:
* header-color = specify color for header; defaults to dark gray if not present.
+
* 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.
+
* 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.''
 
* float = sets where the box appears (float) on the page, ie, the left or right of the text; defaults to right
 
* float = sets where the box appears (float) on the page, ie, the left or right of the text; defaults to right
  
<div style="float:right; width=49%; padding-right:5px;">
+
{{FloatRight|
'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Result:'''
+
'''Example:'''
 +
<pre>
 
{{BasicBoxGray
 
{{BasicBoxGray
 
| header = Box header here
 
| header = Box header here
Line 68: Line 69:
 
| width = 200px
 
| width = 200px
 
| border = 2px
 
| border = 2px
| header-color = CC00CC
+
| header-color = {{DarkPurple}}
| body-color = CC99CC
+
| body-color = {{Purple}}
}}</div>
+
| float = left
<div style="float:left; width=49%; padding-left:20px;">
+
}}
'''Example:'''
+
</pre>
<pre>
+
}}
 +
'''Results:'''
 
{{BasicBoxGray
 
{{BasicBoxGray
 
| header = Box header here
 
| header = Box header here
Line 79: Line 81:
 
| width = 200px
 
| width = 200px
 
| border = 2px
 
| border = 2px
| header-color = CC00CC
+
| header-color = {{DarkPurple}}
| body-color = CC99CC
+
| body-color = {{Purple}}
}}</pre>
+
| float = left
</div>
+
}}{{clear}}
<br style="clear:both"/>
+
 
__NOTOC__
+
==2 and 3 Column Boxes==
__NOEDITSECTION__
+
The basic box template handles support for single column text blocks. For information on boxes with 2 or 3 columns of text, see: [[AboutUsMultiColumnBox]].
 +
<noinclude>[[Category:AboutUs:Templates]]</noinclude>

Latest revision as of 20:25, 11 January 2010

BasicBox Instructions

Color Variants

There are five color variations for the BasicBox templates, which use proven web-safe colors. Additionally, the {{BasicBoxGray}} template allows for customizing the colors via passed parameters:

Basic uses

There are two parameters needed to be passed in the template call:

  • header = header text
  • body = body text

Example:

{{BasicBoxRed
| header = Box header here
| body = Text for the box here
}}

Results:

Box header here

Text for the box here


Intermediate uses

In addition to the basic uses, users can specify width and border (border is the same color as the header) if wanted.:

  • width = width; defaults to 240px if not present
  • border = border; defaults to 0px if not present

Example:

{{BasicBoxRed
| header = Box header here
| body = Text for the box here
| width = 200px
| border = 2px
}}

Results:

Box header here

Text for the box here


Advanced uses

For advanced users, the {{BasicBoxGray}} 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.
  • float = sets where the box appears (float) on the page, ie, the left or right of the text; defaults to right

Example:

{{BasicBoxGray
| header = Box header here
| body = Text for the box here
| width = 200px
| border = 2px
| header-color = {{DarkPurple}}
| body-color = {{Purple}}
| float = left
}}

Results:

Box header here

Text for the box here


2 and 3 Column Boxes

The basic box template handles support for single column text blocks. For information on boxes with 2 or 3 columns of text, see: AboutUsMultiColumnBox.