Template talk:Divbox
From Wikipedia, the free encyclopedia
Contents |
[edit] Information
[edit] Purpose
Wikipedia abounds in boxed templates, such as:
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.
[edit] 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.
[edit] 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. Still, it is not recommended that you omit any title.
- 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.
[edit] 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.
[edit] Making new divbox styles
I'd rather hope you were able to find joy within the existing set of styles, but if not, you can create new ones. Follow these instructions to be sure your new style will "play nice" with {{divbox}}. Note that this requires some understanding of CSS.
1. Experiment in a drawing program, such as GraphicConverter or Adobe Photoshop, and decide what colors you want for your new box style. You need to find out the HTML color codes for each color.
2. Open an existing box style template, such as {{divstylered}}. Copy out the code.
3. Create a new box style template page. It must be located in main Template namespace and must be named Template:divstyleXXXXX, where "XXXXX" is your new style name.
4. Paste in the "borrowed" code and replace the color codes with your new, chosen colors. Save the new template.
5. Return to this Talk page and add your new style to this documentation. Remember, a job's not over until the paperwork is done!
Note that you may even change the division box margins and paddings. This is not recommended. There are a couple of good reasons for specifying these values, and in these units. Most users who "roll their own" make choices with unintended consequences; {divbox} is meant to help you avoid these pitfalls.
[edit] History
New — Xiong (talk) 16:11, 2005 Mar 30 (UTC)
Archive to history: 02:13, 2005 Apr 12 — Xiong熊talk 01:08, 2005 Apr 19 (UTC)
[edit] Discussion
[edit] TfD nomination of 23:49, 2005 Mar 30
This portion of the discussion is now closed. Please do not alter or edit it in any way. Those who wish to continue the debate may do so at the bottom of this main section (Discussion).
[edit] Compare {divbox} to {message box}
(note this material originally appeared in Wikipedia talk: Templates for deletion#Tag location (process); this text has been edited for clarity and pertinence)
(Korath commmented (1) that {message box} should be preferred to {divbox} and (2) that the several so-called subtemplates of {divbox} are useless in any other context.)
Actually, the subtemplates are not useless outside of {{divbox}}. I don't write junky code if I can help it. The {divstyleKEYWORD} templates are usable as is anywhere anyone wants a ready-made, color-coordinated, fully appreciated specification for colors, margins, and padding. Especially if {divbox} were somehow taken away, the subtemplates would become all the more useful to editors thus forced to "roll their own".
Template:Message_box sucks; with all respect to its creator, it was written by somebody with little experience writing code for naive users, and no experience in graphic design. It gives too much freedom to the user, demands the user master too much technical stuff, and makes the user work too hard to achieve a simple end. Too much hair is exposed, making it more likely for a naive user to break something. The documentation is impenetrable.
In contrast, {divbox} gives the user freedom, but not unlimited -- unless he substs it in and edits the code by hand, which is always available -- or he writes a new style subtemplate, which is also always available. It puts soft limits around the range of possible box styles. It's easy to use. And the only keywords the user must remember are simple mnemonics, like "blue" and "amber". If the naive user copies an instance of {divbox} from one place and uses it elsewhere, and foolishly changes the color style parameter without looking at the template documentation -- say, from "amber" to "green" -- he may not get the exact result he expects, but it will be pretty damn close, and nothing breaks. — Xiong
talk 05:15, 2005 Apr 7 (UTC)
[edit] Content/Fact box
I'd like boxes like this to use for content, is that a good idea? I think we should have the possibility. Someone added a red box to High Middle Ages; I saw that the code was ugly and I cleaned it up by using this template. Using this template for content is wrong, however, because of two reasons:
- This template as class "boilerplate metadata" which is not correct if used for factboxes
- It's not desireable for it to take the full width. (in my fix above, I wrapped it in a regulating div)
So, can I create a derivative of this for factboxes? Ideally, it would use the same styles so we don't have to duplicate those. I'll try some experiments, but I don't think I can solve this myself. Regards. — Sverdrup 13:19, 22 Jun 2005 (UTC)
- Of course all the box style templates may be used in other tools or within hand-coded style tags. {divbox} itself generates full-width tag-type boxes; it's not really meant to go beyond that. I've used it for other purposes by substituting it and editing over the code, but of course what is wanted for other purposes is a more flexible tool.
- An example might be the 2-column layout, as seen on the Main Page. Generally, this would not be appropriate onscreen -- columns make printed text easier to read, but onscreen it forces some users to scroll down and up. I think there are exceptions, though. (See Deckard#Clues and Questions.)
- Sidebars are sometimes appropriate, too. I should very much like to see a consistent, standard sidebar format. It looks unprofessional to have every sidebar show up in a different width, with different margins, paddings, and color schemes. Worse, some inexperienced editors attempt to code using CSS without understanding how browsers work or what the best choice is between multiple options. In the worst cases, this results in text overflow or overlapping content for some readers.
- A single tool to serve all functions may not be the best approach. If I see a little interest in any particular tool, I shall be happy to create it. — Xiong熊talk* 2005 June 30 09:58 (UTC)
-
- Thank you for answering. (I've been away for a while, I'm sorry.) You are absolutely right that there is no fool-proof solution -- it is only uncommonly convenient to use infoboxes like this. I see now that someone has solved it in a nice way in the article I referenced - High Middle Ages. An infobox is inserted by <div class="infobox" style="width: auto;">. Very good, and easily put into a template. 01:25, 3 August 2005 (UTC)
- Yes, that kind of article content infobox is standard. The style, as it stands now, is set in one or another style sheet for class="infobox". There are advantages and disadvantages to doing it this way -- notably, all such boxes look exactly alike, as seen by a given user. Of course users with other style sheets will see such boxes differently.
- I'm leaning toward a next-generation box template with much more flexibility, but I'm still not sure what can be done usefully. Part of the problem is that the template mechanism is so very primitive; there is no conditional branch and unsupplied parameters often present themselves unbeautifully. One would like to be able to use the box with a minimum set of parameters and get acceptable and standard results -- for instance, failure to supply a colorkey should result in a single standard scheme -- or supply many parameters for greater customization.
[edit] Divstyleblue
Complaints were made (in another context) about eyestrain. I've edited the highly saturated cyan of {{divstyleblue}} to a more tolerable light blue. John Reid 06:10, 1 September 2006 (UTC)
-- and again. John Reid 10:18, 11 September 2006 (UTC)
[edit] New box?
I was thinking that my version might be more appropriate for the job. ~ Flameviper 17:20, 26 October 2006 (UTC)
[edit] Categorize this
We need a category for "box" templates, like this, {{message box}}, and so on. I'm specifically looking for a simple template to put a box around examples to set them off from the text. Like you could have a code example and then an example of what that code outputs, with a box around the output to separate it from the text. Like {{box|here is some text}} would result in:
— Omegatron 19:47, 13 December 2006 (UTC)
