Userboxes, do inglês Caixas de usuário são códigos que montam pequenas tabelas com duas ou mais caixas. Elas se caracterizam por: ficarem alinhadas somente na esquerda ou direita, terem um mesmo tamanho de largura, uma imagem e terem códigos HTML que formam caixas.

Exemplos
Isso é uma userbox Outro exemplo de userbox

Tabela de conteúdo 1 Criando uma Userbox 1.1 Usando a predefinição {{Userbox}} 1.2 Usando códigos HTML avançados 1.2.1 E fica assim 2 Considerações finais

Criando uma Userbox Editar

Para criar uma userbox você precisa criar uma página chamada "Predefinição:Userbox/xx" substituindo o "xx" pelo nome da sua userbox. Depois basta utilizar códigos HTML, se você não tiver muita experiência em HTML você pode criar uma userbox usando códigos pre definidos.

Usando a predefinição {{Userbox}} Editar

Usando essa predefinição você só precisa preencher os parâmetros necessários dela. mas substituindo o código da mesma. Os parâmetros são:

{{subst:Userbox
|borda tamanho     = Tamanho da borda ex: 1px
|borda cor         = numérico ou em inglês, ex:black ou #00000
|cor fundo texto   = cor da caixa do texto (Caixa maior)
|imagem            = Imagem da caixa menor ex: BattleMage3.png
|cor texto         = Cor do texto da caixa maior
|texto             = Texto da Caixa maior
}}

Basta substituir os parâmetros que são obrigatórios e montar uma userbox. Um exemplo:

{{subst:Userbox
|borda tamanho     = 1px
|borda cor         = black
|cor fundo texto   = #9D0755
|imagem            = BattleMage3.png
|cor texto         = blue
|texto             = Userbox montada com a predefinição
}}

Usando códigos HTML avançados Editar

No site há uma junção de códigos HTML definidos em CSS que montam uma userbox, eles já vem com os seguintes valores definidos: largura, altura, alinhamento e espaço. O código definido:

<div class="userbox">
{| class="userbox"
| class="userbox-image" | 
| class="userbox-text"  | 
|}
</div>

A Tag div é o corpo da userbox e a tabela são as caixas. As caixas já vem com classes definidas para: imagem e texto. Os foram definidas como:
div.userbox (O corpo da userbox: float: right;margin:1px;)
table.userbox (a formatação das caixas: border-spacing: 0px;width:238px;)
td.userbox-image (a formatação da caixa da imagem: width:50px;height:45px;)
td.userbox-text (A formatação da caixa do texto font-size:8pt;padding: 4pt;height:45px;text-align:center)

Mas usando o código mostrado acima ele monta uma userbox incompleta você precisa completar as partes que estão faltando: bordas, cores e texto; você ainda pode alterar os códigos com estilos style="" mas sem alterar mas sem alterar a largura (a altura é automaticamente alterada quando a imagem é muito alta, é recomendável que você ajuste a imagem com até 55px). Exemplo:

<div class="userbox" style="">
{| class="userbox" style=""
| class="userbox-image" style=""| 
| class="userbox-text"  style=""| 
|}
</div>

Vamos montar uma.

<div class="userbox" style="border:1px solid black">
{| class="userbox" style="clear:both"
| class="userbox-image" style="text-align:center"| [[File:LupusSp 1.png|35px]]
| class="userbox-text"  style="text-align:left;background-color:blue;color:white;pading:1px"| Uma userbox montada com códigos HTML complexos
|}
</div>

E fica assim Editar

Considerações finais Editar

• Prefira sempre categorizar sua userbox na categoria Categoria:Userboxes e coloque uma categoria para as páginas que possuem a userbox, use: <noinclude>[[Categoria:Userboxes]]</noinclude> <includeonly>[[Categoria:Nome da categoria para as páginas]]</includeonly>
• Se você não for muito experiente com esses códigos peça ajuda a um usuário experiente ou use o fórum de ajuda que você receberá ajuda dos usuários experientes (não seja tímido, alias mesmo aqueles usuários experientes já precisaram de ajuda)
• Procure sempre optar por um nome específico da sua userbox dependendo do texto