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:

This will appear as:

Arranging Multiple Boxes
If you just paste the userbox codes one after another, they might appear wrongly positioned, and might mess up the sections following them. For example, consider this code:

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:

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

Example: 2x3 Boxes
Suppose you want to put 6 userboxes on your page, arranged in 2 rows, each with 3 columns. You need to use the following code:

Example: 3x2 Boxes
Suppose now want to arrange the 6 userboxes in 3 rows, each with 2 columns. You need to use the following code (remember that | is new column and |- is new row):

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 too (the line beginning with !):

It should give (click on Show / Hide):