Help:Boxed text

From QED

Jump to: navigation, search

There are a variety of ways to enclose text in a box. A summary is shown in the table in the first section.

Contents

Summary

Technique Text wraps? Comment Example
Indentation No
Example
<pre> No Use class=clear for transparency
Example
{{align}} wraps
A centered div with background-color:lightgreen
{{box}} wraps
Example
{{boxed}} wraps centered
Example
{{co}} wraps
Example
{{{code}} wraps; slider

Example

{{file}} wraps; slider
File: Example

{{{2}}}

{{information}} wraps
Image:Imbox notice.png
Example
{{pre}} wraps Same as {{box}} but uses tt tags
Example
{{quotation}} wraps See also Help:Quotations
Example
{{textbox}} wraps
Header
Example
{{warning}} wraps
Image:45px-Stop.png
Example

Indentation

The simplest way to format text so that it will appear in a box is to indent it with a space:

 Indented text appears in a box.
 Unfortunately the text itself will not wrap to adjust to the size of the browser window.

produces:

Indented text appears in a box. 
Unfortunately the text itself will not wrap to adjust to the size of the browser window.

The <pre> tag

Preformatted text is presented in a box, e.g.

<pre>Preformatted text is presented in a box.</pre>

produces

Preformatted text is presented in a box.

Once again, as with indentation, the text itself will not wrap to adjust to the size of the browser window.

On QED, the CSS class named clear can be used in conjunction with the <pre> tag to ensure transparency, e.g.

{{file|hello.php|<pre class=clear><?php
echo "Hello, PHP\n";
?>
</pre>
}}

produces:

File: hello.php
<?php
echo "Hello, PHP\n";
?>

See MediaWiki:Common.css for the definition of the clear class.

Templates

Several templates are available for creating boxes around text. The following sections only provide simple examples. Please consult the template documentation for additional options.

Template:align

{{align|style=background-color:lightgreen|center|A centered div with background-color:lightgreen }} produces a box as follows:
A centered div with background-color:lightgreen


Template:co

{{co|gold|cornflowerblue|Gold on blue}} produces a box without lines:

Gold on blue


Template:box

{{box |This template provides an alternative to the <pre> tag, which does not allow wrapping of long lines and for which the width attribute is deprecated. Contrast the behavior of this box with the syntax box above as you shrink the window width. }}

produces

This template provides an alternative to the <pre> tag, which does not allow wrapping of long lines and for which the width attribute is deprecated. Contrast the behavior of this box with the syntax box above as you shrink the window width.


Template:pre

Template:pre is the same as Template:box but the text is embedded within HTML <tt> and </tt> tags.

{{pre |This template provides an alternative to the <pre> tag, which does not allow wrapping of long lines and for which the width attribute is deprecated. Contrast the behavior of this box with the syntax box above as you shrink the window width. }}

produces

This template provides an alternative to the <pre> tag, which does not allow wrapping of long lines and for which the width attribute is deprecated. Contrast the behavior of this box with the syntax box above as you shrink the window width.


Template:boxed

{{boxed|The "boxed" template.}}

produces

The "boxed" template.


Template:quotation

Template:quotation produces a box like this. Once again, lines are wrapped depending on the size of the browser window.


Template:textbox

<center>{{textbox|The "textbox" template|This is an example.}}</center>

produces
The "textbox" template
This is an example.


Template:Code

This box uses the code template.

It is easy to embed newlines.


Template:File

File: warning.txt

This box uses the file template and is a variant of Template:Code.


Template:Warning

Image:45px-Stop.png
This box uses the warning template


Template:2x2

{{2x2
|heading1=First Column
|heading2=Second Column
|cell11=Top left
|cell21=Left
|cell12=Right
|cell22=Bottom right
}}

produces

First Column Second Column

Top left

Right

Left

Bottom right


Notes

  1. Most of the above templates are based on wiki table syntax.
  2. If none of the above templates meets your needs, feel free to create your own, e.g. by copying the source text of an existing template.
  3. Tables defined using wiki table syntax can be embedded within templates, but {{!}} must be used instead of | and similarly for {{!!}} and {{!-}}. See Template:TwoColumns for an example.

See also


Personal tools