Userbox

From OneSci
Jump to: navigation, search
A userbox is a small rectangular box that looks like this. Below are more examples.
Userboxes can come in many different styles and colors.
Userboxes can have one or two sideboxes.

Contents

Syntax

The standard syntax for adding a userbox to your user page (also known as transclusion) is: {{user name_of_box}}.



Optional substitution

You may decide to substitute the template code onto your user page using the syntax {{subst:user name_of_box}}. The use of "subst:" will ensure that the template is always displayed in its form when you add it to your user page, i.e. it will not reflect subsequent edits to the template. This method will lead to large amounts of code on your user page.

Creating a new userbox

For help with these instructions, ask a question at Wikipedia:Requested templates.
If you wish to offer an idea for a userbox, do so on the ideas page.

If you have designed a userbox that you would like to make available to others, you may wish to first display it on the New Userboxes talk page for community comment.


Constructing a userbox

How to construct the box

There are a number of box types to select from when deciding to make a userbox. The most commonly used design is the "Standard box". It has one square shaped area on the left ("id") and a rectangular area on the right ("info").

For ease of use, userboxes are typically made using maker-templates that have a number of parameters.

Template Parameters Meaning Value type
border-c The border color of the userbox. CSS color value (#hex or color name)
border-s The border size of the userbox. Width in pixels
id-c The background color of the id box. CSS color value
id-s The font size of the id box. Size in PostScript points
id-fc The font color of the id box text. CSS color value
id-p The distance between border and content of id box. CSS padding width value. px, pt
id-lh The distance between text lines of id box. CSS relative line height/length value. em
info-c The background color of info box. CSS color value
info-s The font size of info box. Size in PostScript points
info-fc The font color of info box. CSS color value
info-p The distance between border and content of info box. CSS padding width value. px, pt
info-lh The distance between text lines of info box. CSS relative line height/length value. em
id This is the content of the id box. Free-form
info This is the content of info box. Free-form

The id and info boxes can include text, links, and images using the usual Wikipedia syntax. Generally, the id box will contain a few letters or a 43px image, while the info box will contain a sentence with a link or two.

Userbox types
Code Appearance
Standard box
{{Userbox |border-c=#000 |border-s=1 |id-c=#fff |id-s=12 |id-fc=#000 |info-c=#039 |info-s=8 |info-fc=#fff |id=ID |info=Content}}

or {{Userbox |side-box colour |main box colour |side-box content |main box content}}

ID Content
Reverse box
{{Userbox-r |border-c=#000 |border-s=1 |id-c=#fff |id-s=12 |id-fc=#000 |info-c=#039 |info-s=8 |info-fc=#fff |id=ID |info=Content}}

or {{Userbox-r |side-box colour |main box colour |side-box content |main box content}}

Content ID
Double box
{{Userbox-2 |border-c=#000 |border-s=1 |id1-c=#fff |id1-s=12 |id1-fc=#000 |id2-c=#000 |id2-s=12 |id2-fc=#fff |info-c=#039 |info-s=8 |info-fc=#fff |id1=ID 1 |id2=ID 2 |info=Content}}

or {{Userbox-2 |side-box 1 colour |main box colour |side-box 1 content |message |side-box 2 content |border colour |side-box 2 colour |main box font-colour |box border thickness}}
Note: If omitted, border colour and side-box 2 colour default to the same colour as side-box 1, and font colour is black. Default border thickness is 1.

ID 1 Content ID 2
Mini box
{{Userbox-m |border-c=#000 |border-s=1 |id-c=#fff |id-s=12 |id-fc=#000 |id=ID}}

or {{Userbox-m |box colour |box content}}

ID
Userbox sampling templates

To make it easier to quote the generation code for a userbox in a uniform format, a template {{Userbox sample compact}} has been made available, which produces a picture of the userbox along with the code necessary to create it. To use it, just give it exactly the same parameters you would give the {{Userbox}} template. You must use subst:, or the template will not work properly. An example is shown below:

{{subst:Userbox sample compact|id=UBX|id-c=red|info=This is a '''[[WP:UBX|Userbox]]'''.}}

Produces:

{{Userbox | border-c = #999 | border-s = 1 | id-c = red | id-s = 14 | id-fc = black | info-c = #EEE | info-s = 8 | info-fc = black | id = UBX | info = This is a '''[[WP:UBX|Userbox]]'''. | float = left }}
UBX This is a Userbox.

There are not yet any similar templates available for userboxes created by the templates Userbox-r, Userbox-2 and Userbox-m.


Grouping userboxes

Using the Userboxtop template

Example 1

{{Wikipedia:WikiProject Userboxes/Userbox}} User:UBX/Rome User:Nihiltres/Userboxes/Friendly

As with the Babel box, there is a box to group userboxes together. Just make a list of userboxes with {{Userboxtop|box-name}} at the top, followed by your list of userboxes, and {{Userboxbottom}} at the bottom. For example, the box to the right is created using the following list:

{{Userboxtop |Example 1}}
{{Wikipedia:WikiProject Userboxes/Userbox}}
{{User:UBX/Rome}}
{{User:Nihiltres/Userboxes/Friendly}}
{{Userboxbottom}}

Using the boxboxtop template

If you wish an expandable list of userboxes you may try using the {{boxboxtop}} template: 

{{boxboxtop|Example2}}
<div class="NavFrame" style="padding:0;border-style:none;">
<div class="NavFrame" style="border-style:none;padding:0;">
<div class="NavHead" style="background:#EDF1F1;text-align:left;text-style:normal">
Caption
</div>
<div class="NavContent" style="display:none;">
Place your userboxes here...
</div></div></div>
{{boxboxbottom}}

(Of course you can put more than one such section inside a userbox, see Example 2 at right.)

Example2
My yellow userboxes
My purple userboxes

You may also change the alignment by using 'right' or 'left' as the second parameter, or explicitly using parameter align. Thus, it is possible to create the same box on the right, but positioned on the left side of the page, by changing the first line from {{Userboxtop |Example 1}} to {{Userboxtop |Example 1|left}}.

Using the Babel grouping system

Similar results can be achieved with either of the following:

{{Babel-X |header=Example 1 |footer= |align=left |Wikipedia:WikiProject Userboxes/Userbox |Rome |:Nihiltres/Userboxes/Friendly}}

{{UBX-X |header=Example 1 |Wikipedia:WikiProject Userboxes/Userbox |Rome |:Nihiltres/Userboxes/Friendly}}

The older Babel grouping system can also be used, e.g. {{Babel-3|sv|no-4|rome}}. However, it only works for user boxes with the "User" prefix, which must then be dropped for the arguments. Also, boxes that need arguments of their own (such as Template:Tlu) cannot be used with Babel.

Using tables

A fourth alternative would be to table your userboxes. For example:

{| style="margin: 1em auto 1em auto"
| {{User:AusTerrapin/Box:Jazz Fusion}} {{User_USAFo5}}
|-
| {{user helper}} {{User:The Raven's Apprentice/Userboxes/User Warm}}
|}


would produce the following:

User:AusTerrapin/Box:Jazz Fusion Template:User USAFo5
Template:User helper User:The Raven's Apprentice/Userboxes/User Warm

To center one userbox use this coding:

{| style="margin: 1em auto 1em auto"
| {{User:Saoshyant/Userboxes/User oops}}
|}

which produces:

User:Saoshyant/Userboxes/User oops

Combining tables and the boxboxtop template

A fifth method of grouping boxes is done by combining Examples 2 and 4 together. Example 2 breaks DHTML interoperability. It works as intended on Internet Explorer; however, it does not work well with Firefox and Opera when additional hide/show sections are added. This solution provides proper rendering on all three web browsers and scales much better when it comes to the number of groups you want to have. The table property can be adjusted by adding width="100%" (adjusting its percentage or by using a pixel width multiple of the userbox) to add more than one column. Another property align="right" can be changed to place the userboxes left, right, or center of the page.

My yellow userboxes
My purple userboxes
My green userboxes

{|align="right" width="160px" style="background-color: transparent;"
|-
|<div>
{{boxboxtop| }}
<div class="NavFrame" style="padding: 0; border-style: none;">
<div class="NavFrame" style="border-style: none; padding: 0;">
<div class="NavHead" style="background: #edf1f1; text-align: left; text-style: normal;">
Caption</div><div class="NavContent" style="display: none;">
Place your userboxes here...
</div></div></div>
{{boxboxbottom}}
Place additional userbox groups here...
</div>
|}

Retrieved from "http://www.onesci.com/Userbox"
Personal tools