User:Waitingforspring/ArrangeUserbox

Userboxes are small elements you can post on your user page, showing your affiliation, preferences or skills. This page offers a few tips about arranging userboxes on your user page.

Note: Screen resolution of at least 1024x768 recommended to view this page

Basic Code

To put a userbox on your page, paste its code on the page, for example:

{{samplebox|1}}

This will appear as:

Arranging Multiple Boxes

If you just paste the userbox codes one after another, they might appear wrongly positioned, and subsequent text and sections will flow around them. For example, consider this code:

{{samplebox|1}}
{{samplebox|2}}
this is a line of text
:this is an indented line of text

This will appear as:

How to make it better? The trick is to create an invisible table that contains a userbox in each cell. Use {| to start a table, | to start a column, |- to start a row, |} to close the table. For example:

{|
 |{{samplebox|1}}
 |{{samplebox|2}}
 |}
this is a line of text
:this is an indented line of text

This will appear as:

this is a line of text

this is an indented line of text

Note: if you don't want to put them in a table, just want to prevent text flowing around them in an easy way, add <br clear="all"/> after the userboxes.

Example: 3x2 Boxes

Suppose you want to put 6 userboxes on your page, arranged in 3 rows, each with 2 columns. You need to use the following code (remember that | is new column and |- is new row):

{|
 |{{samplebox|1}}
 |{{samplebox|2}}
 |-
 |{{samplebox|3}}
 |{{samplebox|4}}
 |-
 |{{samplebox|5}}
 |{{samplebox|6}}
 |}

Example: 2x3 Boxes

Suppose now want to arrange the 6 userboxes in 2 rows, each with 3 columns. You need to use the following code:

{|
 |{{samplebox|1}}
 |{{samplebox|2}}
 |{{samplebox|3}}
 |-
 |{{samplebox|4}}
 |{{samplebox|5}}
 |{{samplebox|6}}
 |}

Note: it is not recommended to put more than 3 userboxes in a row, as most screens will be unable to display a row that wide, and the items will be out of the screen.

Floating Column

You can put all your userboxes one below another, and make them "float" on the right (or left) side of your user profile by adding the "float" style at the beginning of the table, and putting one box in each row. This way, they will be displayed in a column, with the rest of the items on your user page on the left.

{|style="float: right;"
 |{{samplebox|1}}
 |-
 |{{samplebox|2}}
 |-
 |{{samplebox|3}}
 |}

Hiding Userboxes

If you have many userboxes on your page, you can hide them by adding the "collapsible" class to the table. Add a header as well (the line beginning with !):

{| class="collapsible collapsed" style="width:790px"
 !colspan="3" bgcolor="lightgreen"|My Userboxes
 |-
 |{{samplebox|1}}
 |{{samplebox|2}}
 |{{samplebox|3}}
 |-
 |{{samplebox|4}}
 |{{samplebox|5}}
 |{{samplebox|6}}
 |}

It should give (click on Show / Hide):

You might need to adjust the Width (that is 790px in the above example) to match your table of userboxes (so the header won't change width / position when the table is extended or collapsed).

See Also

• Userbox Project