විකිපීඩියා:Userboxes/Grouping

Grouping userboxes

Using the Userboxtop template

Example 1

This user is a member of
WikiProject Userboxes.

This user is interested in ancient Rome.

 පරිශීලක: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 collapsible tables

Example 2

My yellow userboxes

Sample userbox #1.

Sample userbox #2.

Sample userbox #3.

My purple userboxes

Sample userbox #4.

Sample userbox #5.

Sample userbox #6.

If you wish to group your userboxes into expandable lists in the {{Userboxtop}} template, one way of doing this is by using collapsible tables with certain classes. Wikipedia's Mediawiki configuration attempts to make this happen through a combination of ECMAScript and CSS. This method is accessible to users with ECMAScript (jScript/JavaScript) disabled, and should work in most modern browsers (it is the method used by {{Navbox}}).

Using the codes in Help:Collapsing works much better and simpler using normal wiki table markup!

{{Userboxtop|Example 2}}
<table class="collapsible autocollapse" cellspacing="0" style="width:100%;background:transparent;color:inherit;;">
  <tr><th class="navbox-title">Caption</th></tr>
  <tr><td>
    Place your userboxes here...
  </td></tr>
</table>
{{Userboxbottom}}

Include 'autocollapse' if you want the box to start closed, omit it if you want the box to start open.

Using the NavFrame/NavHead/NavContent classes

Example 3

My yellow userboxes

My purple userboxes

If you wish to group your userboxes into expandable lists in the {{Userboxtop}} template, one way of doing this is by using divs with certain classes. Wikipedia's Mediawiki configuration attempts to make this happen through a combination of ECMAScript and CSS. Right now, this method should not be used because it only works properly in Internet Explorer (although works to a degree in other browsers), and makes the boxes inaccessible to users with ECMAScript (jScript/JavaScript) disabled!

If you would like to use this method anyway, use the following syntax:

{{Userboxtop|Example 3}}
  <div class="NavFrame" style="padding:0;border-style:none;">
    <div class="NavHead" style="style">Caption</div>
    <div class="NavContent" style="display:none;">
      Place your userboxes here...
    </div>
  </div>
{{Userboxbottom}}

A recommended value for 'style' is 'background:#EDF1F1;text-align:left;text-style:normal'

(Of course you can put more than one of these collapsible sections inside a box, see Example 3 at right.)

Using the Babel grouping system

Similar results can be achieved with either of the following:

Example 4

සැකිල්ල:User Mac Pro සැකිල්ල:User Rome/2 පරිශීලක:Nihiltres/Userboxes/Friendly

Search user languages

{{Babel-X|Mac Pro|Rome/2|:Nihiltres/Userboxes/Friendly}}

Example 5

සැකිල්ල:User Mac Pro සැකිල්ල:User Rome/2 පරිශීලක:Nihiltres/Userboxes/Friendly

Search user languages

{{UBX-X|Mac Pro|Rome/2|: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 {{User:UBX/Monty Python}}) cannot be used with the Babel system.

Using tables

Another alternative would be to table your userboxes:

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

would produce the following:

example 6

පරිශීලක:AusTerrapin/Box:Jazz Fusion

This user is a Lieutenant Colonel in the United States Air Force.

This user helps out newcomers.

පරිශීලක:The Raven's Apprentice/Userboxes/User Warm

To center one userbox use this coding:

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

which produces:

example 7
පරිශීලක:Saoshyant/Userboxes/User oops

Combining tables and the boxboxtop template

Yet another 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, Google Chrome or 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> |}