Rank com imagem

Detalhes da questão

Endereço do fórum: http://warkz.forumeiros.com/
Versão do fórum: PunBB

Descrição

Olá queria saber como faço para por os ranks do meu fórum assim como está SS


https://i.imgur.com/49aoIxq.jpg

Obrigado!

Poderá me dizer onde viu o esse tal de rank?
Até,
Mshas

Opá aqui http://www.wasd.in/ !!

Saudações,
Painel de Controle Visualização Imagens & Cores Cores Aba "Folha de Estilo CSS"
Utilize este código senhor,

Código:

.userManagement {
    background-color: #000;
}
.userBanned, .userClient, .userSuporte, .userDesigner, .userManagement, .userMember, .userNewba, .userModerator, .userStaff, .vipBS, .userProgrammer {
    margin-top: 9px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background: transparent;
    border-radius: 3px;
    border-top: 1px solid rgba(0,0,0,.20);
    bottom: -7px;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 2px 0 rgba(0,0,0,0.14);
    text-transform: uppercase;
    font-family: Ubuntu;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 116px;
}

Continuando no Painel de Controle Usuários & Grupos Administração dos ranks Administrador

Coloque este código no nome de administrador,

Código:

<span class="userManagement">Administrador</span>

Lembrando que pode criar mais ranks.

Até,
Mshas

Opá amigo fico bugado pode olhar as o fundo da imagem do rank fico branco https://i.imgur.com/mty1Fh6.jpg

Mude isto pra este,

Código:

.userBanned, .userClient, .userSuporte, .userDesigner, .userManagement, .userMember, .userNewba, .userModerator, .userStaff, .vipBS, .userProgrammer {
    margin-top: 9px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background: transparent;
    border-radius: 3px;
    border-top: 1px solid rgba(0,0,0,.20);
    bottom: -7px;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 2px 0 rgba(0,0,0,0.14);
    text-transform: uppercase;
    font-family: Ubuntu;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 116px;
}
.userManagement {
    background-color: blue;
}

Até,
Mshas

Opá desculpa por esse code aonde ? no CSS ?

Sim, senhor.
Até,
Mshas

Não Resultou

Exclua todos códigos que eu mencionei antes.
Tente este querido.

Código:

.userADM, .userBRO, .userCHEF, .userCHEF2, .userCO, .userDE, .userDES, .userELI, .userESP, .userGAM, .userGEE, .userGER, .userLEND, .userMB, .userME, .userMEN, .userMOD, .userOUR, .userPLA, .userPR, .userPRA, .userPRO, .userSP, .userTU, .userVIP, .userVIPR, .userVIPes {
    border-radius: 3px;
    border-top: 1px solid rgba(0,0,0,0.3);
    color: #fff;
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    height: 19px;
    line-height: 19px;
    margin-left: 3px;
    margin-right: 2px;
    margin-top: 9px;
    padding: 9px 12px;
    text-shadow: 1px 2px 0 rgba(0,0,0,0.2);
    text-transform: uppercase;
    width: 120px;
}
.userADM {
    background-color: #676C70;
}


Siga todos passos que eu falei antes,

Código:

<div class="userADM">Administrador</div>

Até,
Mshas

Funcionou Pode closar