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
To put a userbox on your page, paste its code on the page, for example:
{{samplebox|1}}
This will appear as:
1
Sample Userbox 1
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:
1
Sample Userbox 1
2
Sample Userbox 2
this is a line of text
this is an indented line of text
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:
1
Sample Userbox 1
2
Sample Userbox 2
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):
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
1
Sample Userbox 1
2
Sample Userbox 2
3
Sample Userbox 3
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.
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 !):
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).