Template:Divbox/doc: Difference between revisions
>Fæ@en.wikipedia.org |
No edit summary |
||
| (21 intermediate revisions by 7 users not shown) | |||
| Line 1: | Line 1: | ||
This template | This template can be used to create simple, flexible coloured text background. | ||
== Usage == | |||
<nowiki>{{divbox|color of box|Headtitle|Message}}</nowiki> | <nowiki>{{divbox|color of box|Headtitle|Message}}</nowiki> | ||
== | The parameter ''radius'' may be added for rounded corners using standard units, for example ''radius=8px''. | ||
== Available styles == | |||
<div style="{{divbox/style/amber}}; width:5em; float:left; margin:.3em">amber</div> | |||
<div style="{{divbox/style/black}}; width:5em; float:left; margin:.3em">black</div> | |||
<div style="{{divbox/style/bloodred}}; width:5em; float:left; margin:.3em">bloodred</div> | |||
<div style="{{divbox/style/blue}}; width:5em; float:left; margin:.3em">blue</div> | |||
<div style="{{divbox/style/brown}}; width:5em; float:left; margin:.3em">brown</div> | |||
<div style="{{divbox/style/forest}}; width:5em; float:left; margin:.3em">forest</div> | |||
<div style="{{divbox/style/gold}}; width:5em; float:left; margin:.3em">gold</div> | |||
{{clear}} | |||
<div style="{{divbox/style/gray}}; width:5em; float:left; margin:.3em">gray</div> | |||
<div style="{{divbox/style/green}}; width:5em; float:left; margin:.3em">green</div> | |||
<div style="{{divbox/style/navy}}; width:5em; float:left; margin:.3em">navy</div> | |||
<div style="{{divbox/style/none}}; width:5em; float:left; margin:.3em">none</div> | |||
<div style="{{divbox/style/orange}}; width:5em; float:left; margin:.3em">orange</div> | |||
<div style="{{divbox/style/plain}}; width:5em; float:left; margin:.3em">plain</div> | |||
<div style="{{divbox/style/purple}}; width:5em; float:left; margin:.3em">purple</div> | |||
{{clear}} | |||
<div style="{{divbox/style/lilac}}; width:5em; float:left; margin:.3em">lilac</div> | |||
<div style="{{divbox/style/red}}; width:5em; float:left; margin:.3em">red</div> | |||
<div style="{{divbox/style/white}}; width:5em; float:left; margin:.3em">white</div> | |||
<div style="{{divbox/style/yellow}}; width:5em; float:left; margin:.3em">yellow</div> | |||
<div style="{{divbox/style/fawn}}; width:5em; float:left; margin:.3em">fawn</div> | |||
<div style="{{divbox/style/tt}}; width:5em; float:left; margin:.3em">tt</div> | |||
{{clear}} | |||
<div style="{{divbox/style/greenv}}; width:4em; float:left; margin:.3em">greenv</div> | |||
<div style="{{divbox/style/grayh}}; width:5em; float:left; margin:.3em">grayh</div> | |||
<div style="{{divbox/style/email}}; width:5em; float:left; margin:.3em">email</div> | |||
<div style="{{divbox/style/double}}; width:8em; float:left; margin:.3em">double</div> | |||
<div style="{{divbox/style/wordperfect}}; width:8em; float:left; margin:.3em">wordperfect</div> | |||
{{clear}} | |||
;Notes | |||
* The color names are case-dependent; they will not work if upper-case letters are used. | |||
* ''plain'', ''double'', ''tt'' and ''none'' inherit the page background colour whilst ''white'' forces a pure white background. | |||
== Examples == | |||
{| | |||
| | |||
;Code | |||
<code><nowiki>{{divbox|orange|Orange example|This is only an example of how this template works.}}</nowiki></code> | |||
;Result | |||
{{divbox|orange|Orange example|This is only an example of how this template works.}} | |||
|| | |||
;Code | |||
<code><nowiki>{{divbox|navy|radius=4em|Navy example|This is only an example of how this template works.}}</nowiki></code> | |||
;Result | |||
{{divbox|navy|radius=4em|Navy example|This is only an example of how this template works.}} | |||
|} | |||
== Information == | |||
=== Purpose === | |||
Boxes may not always be appropriate; they can be obtrusive. But when boxes are used, they are generally formatted ''ad hoc''. This leads to inconsistencies. | |||
{{[[template:divbox|divbox]]}} provides a straightforward method of presenting any text within a box. Colors are selected using a private style keyword, which sets both box border and background, already chosen to work together, in a visual sense. | |||
The keyword <code>none</code> puts your content inside an invisible box. This is available to offer the identical box model for your content, without a visible box. | |||
''This'' template may be used within another template; or as part of another page. | |||
== | === Technical === | ||
''This'' template takes its first parameter and uses it to construct an instance of one of its component templates divstyle{{{1}}} (see [http://en.wikipedia.org/w/index.php?title=Special%3AAllpages&from=divstyle&namespace=10 list]); this emulates a '''case''' statement. New divbox styles may be created with minimal effort. All of the (component) templates <nowiki>{{divstylekeyword}}</nowiki> contain only the style parameters of the box. | |||
< | A <div> is generated with class="boilerplate metadata" and id=(second parameter); thus id is the same as the displayed title. A user's CSS may override the entire class. | ||
< | |||
< | === Usage=== | ||
<code><nowiki>{{divbox|keyword|title|content}}</nowiki></code> | |||
*''keyword'': private style keyword; chooses colors for box | |||
*''title'': plain text; appears '''strong''' and centered at top | |||
< | *''content'': any text, including markup; your content | ||
The box has the full available width. In the examples below the width is reduced by the fact that the boxes are placed in a table. | |||
{| | |||
|- | |||
!'''''What you see''''' | |||
!'''What you type''' | |||
< | |- | ||
|{{divbox|gray|Lorem ipsum|Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.}} | |||
|<code><nowiki>{{divbox|gray|Lorem ipsum|Lorem ipsum dolor...}}</nowiki></code> | |||
{{ | |- | ||
|{{divbox|red|Lorem ipsum|Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.}} | |||
|<code><nowiki>{{divbox|red|Lorem ipsum|Lorem ipsum dolor...}}</nowiki></code> | |||
|- | |||
|{{divbox|navy|Lorem ipsum|Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.}} | |||
|<code><nowiki>{{divbox|navy|Lorem ipsum|Lorem ipsum dolor...}}</nowiki></code> | |||
|- | |||
|{{divbox|amber|Lorem ipsum|Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.}} | |||
|<code><nowiki>{{divbox|amber|Lorem ipsum|Lorem ipsum dolor...}}</nowiki></code> | |||
|- | |||
|{{divbox|none|Lorem ipsum|Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.}} | |||
|<code><nowiki>{{divbox|none|Lorem ipsum|Lorem ipsum dolor...}}</nowiki></code> | |||
|- | |||
|{{divbox|navy||Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.}} | |||
|<code><nowiki>{{divbox|navy||Lorem ipsum dolor...}}</nowiki></code> | |||
|- | |||
|} | |||
* '''Don't forget''' to close the template with double braces ("}}")! | |||
* If you want to '''omit''' a centered title for the box, you must use two pipes ("||") instead of one before your box content. | |||
* You must ''always'' supply the first parameter. This is a private style keyword from the list: | |||
{| | |||
|- | |||
|{{divbox|none||<code>none</code>}} | |||
|{{divbox|gray||<code>gray</code>}} | |||
|{{divbox|red||<code>red</code>}} | |||
|{{divbox|blue||<code>blue</code>}} | |||
|- | |||
|{{divbox|green||<code>green</code>}} | |||
|{{divbox|yellow||<code>yellow</code>}} | |||
|{{divbox|amber||<code>amber</code>}} | |||
|{{divbox|brown||<code>brown</code>}} | |||
|- | |||
|{{divbox|orange||<code>orange</code>}} | |||
|{{divbox|purple||<code>purple</code>}} | |||
|{{divbox|navy||<code>navy</code>}} | |||
|{{divbox|forest||<code>forest</code>}} | |||
|- | |||
|{{divbox|white||<code>white</code>}} | |||
|{{divbox|black||<code>black</code>}} | |||
|{{divbox|bloodred||<code>bloodred</code>}} | |||
|{{divbox|plain||<code>plain</code>}} | |||
|- | |||
|{{divbox|gold||<code>gold</code>}} | |||
|} | |||
Remember these are private style keywords, not HTML colors. You '''must''' use lowercase only. The keyword <code>none</code> puts your content inside an invisible box. | |||
=== Using subst: with this template === | |||
The <code>subst:</code> atom may be used with {{tl|divbox}}. ''This may be highly desirable.'' Note that <code>subst:</code> does not take effect in preview, but only after saving a page. The template's inclusion is replaced by the code of the template itself, which will continue to write the box as before, but without an additional server call. | |||
Since {{tl|divbox}} itself calls a template based on your choice of style keyword, you will find that even after saving an instance of use with <code>subst:</code> there remains a "live" call to the underlying style template. This means that viewing the page risks a server call to the style template, ''but'' also means that changes to the style template automatically propagate to all pages where it is used. This way, all {{tl|divbox}}-type boxes, wherever they are in the project, keep the same consistent look. | |||
Just paste in your content and, when you're finished, be sure to close the template call with <code><nowiki>}}</nowiki></code>. | |||
Since the contents are given in the form of two parameter values, for the content you may place within {{tl|divbox}}, the [[m:Help:Template#Restrictions_on_parameter_values|restrictions on parameter values]] apply. For example, if you put content that includes template calls, {{tl|divbox}} cannot tell where its last parameter ends. | |||
If the contents do not satisfy the restrictions, insert this code in your page first: | |||
<code><nowiki>{{subst:divbox|keyword|title|DUMMYCONTENT}}</nowiki></code> | |||
That is, choose your style and title as usual (or omit the title with two pipes), but instead of actual content, write "DUMMYCONTENT". Then, save the page and reopen it for editing. You'll see the box code in all its gory detail, and the placeholder DUMMYCONTENT, followed by the HTML division closing tag. Now, you may simply '''replace''' DUMMYCONTENT with '''your content''', save, and move on. Since almost anything may be placed within division tags, this should not break no matter what you do. | |||
<includeonly> | <includeonly> | ||
[[Category:Formatting templates]] | |||
</includeonly> | </includeonly> | ||
Latest revision as of 02:31, 22 May 2013
This template can be used to create simple, flexible coloured text background.
Usage
{{divbox|color of box|Headtitle|Message}}
The parameter radius may be added for rounded corners using standard units, for example radius=8px.
Available styles
- Notes
- The color names are case-dependent; they will not work if upper-case letters are used.
- plain, double, tt and none inherit the page background colour whilst white forces a pure white background.
Examples
|
|
Information
Purpose
Boxes may not always be appropriate; they can be obtrusive. But when boxes are used, they are generally formatted ad hoc. This leads to inconsistencies.
{{divbox}} provides a straightforward method of presenting any text within a box. Colors are selected using a private style keyword, which sets both box border and background, already chosen to work together, in a visual sense.
The keyword none puts your content inside an invisible box. This is available to offer the identical box model for your content, without a visible box.
This template may be used within another template; or as part of another page.
Technical
This template takes its first parameter and uses it to construct an instance of one of its component templates divstyle{{{1}}} (see list); this emulates a case statement. New divbox styles may be created with minimal effort. All of the (component) templates {{divstylekeyword}} contain only the style parameters of the box.
A <div> is generated with class="boilerplate metadata" and id=(second parameter); thus id is the same as the displayed title. A user's CSS may override the entire class.
Usage
{{divbox|keyword|title|content}}
- keyword: private style keyword; chooses colors for box
- title: plain text; appears strong and centered at top
- content: any text, including markup; your content
The box has the full available width. In the examples below the width is reduced by the fact that the boxes are placed in a table.
| What you see | What you type |
|---|---|
{{divbox|gray|Lorem ipsum|Lorem ipsum dolor...}}
| |
{{divbox|red|Lorem ipsum|Lorem ipsum dolor...}}
| |
{{divbox|navy|Lorem ipsum|Lorem ipsum dolor...}}
| |
{{divbox|amber|Lorem ipsum|Lorem ipsum dolor...}}
| |
{{divbox|none|Lorem ipsum|Lorem ipsum dolor...}}
| |
{{divbox|navy||Lorem ipsum dolor...}}
|
- Don't forget to close the template with double braces ("}}")!
- If you want to omit a centered title for the box, you must use two pipes ("||") instead of one before your box content.
- You must always supply the first parameter. This is a private style keyword from the list:
Remember these are private style keywords, not HTML colors. You must use lowercase only. The keyword none puts your content inside an invisible box.
Using subst: with this template
The subst: atom may be used with {{divbox}}. This may be highly desirable. Note that subst: does not take effect in preview, but only after saving a page. The template's inclusion is replaced by the code of the template itself, which will continue to write the box as before, but without an additional server call.
Since {{divbox}} itself calls a template based on your choice of style keyword, you will find that even after saving an instance of use with subst: there remains a "live" call to the underlying style template. This means that viewing the page risks a server call to the style template, but also means that changes to the style template automatically propagate to all pages where it is used. This way, all {{divbox}}-type boxes, wherever they are in the project, keep the same consistent look.
Just paste in your content and, when you're finished, be sure to close the template call with }}.
Since the contents are given in the form of two parameter values, for the content you may place within {{divbox}}, the restrictions on parameter values apply. For example, if you put content that includes template calls, {{divbox}} cannot tell where its last parameter ends.
If the contents do not satisfy the restrictions, insert this code in your page first:
{{subst:divbox|keyword|title|DUMMYCONTENT}}
That is, choose your style and title as usual (or omit the title with two pipes), but instead of actual content, write "DUMMYCONTENT". Then, save the page and reopen it for editing. You'll see the box code in all its gory detail, and the placeholder DUMMYCONTENT, followed by the HTML division closing tag. Now, you may simply replace DUMMYCONTENT with your content, save, and move on. Since almost anything may be placed within division tags, this should not break no matter what you do.