Personalizar rank igual a imagem

Detalhes da questão

Endereço do fórum: azemanks.forumeiros.com
Versão do fórum: PunBB

Descrição

Olá pessoal, sou novo no fórum da versão PUNBB e estou enfrentando alguns problemas, minha dúvida é como deixar o perfil das minhas mensagens dessa maneira:



http://prntscr.com/9wj7bz

Olá!

Queira indicar onde viu tal efeito, para que seja possível agilizar o suporte.

Até mais.

Olá!

Bom na verdade eu não tinha entendido sua questão. Eu pensei que o senhor quisesse a aparência do perfil semelhante aquela. Mas bom, para os ranks é simples.

Acesse: Painel de Controle Usuários Ranks Administração dos Ranks

Iremos alterar o rank de administrador, depois você poderá alterar os restantes.
Clique no e em seguida abrirá uma nova página para você editar o rank Administrador.

No campo Nome do Rank, você troca para este:

Código:

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

Na verdade eu só adicionei as tags <span> a volta do nome, nada mais.

Agora acesse: Painel de Controle Visualização Imagens e Cores Cores Folha de Estilos

E cole o seguinte código:

Código:

.rank1 {
    background: #009;
    border-radius: 3px;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    bottom: -7px;
    color: #FFF;
    display: inline-block;
    font-family: Verdana;
    font-size: 11px;
    font-weight: 700;
    margin-top: 9px;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.14);
    text-transform: uppercase;
}

Resultado:



Saudações cordiais,
RafaelS.

Funcionou perfeitamente! obrigado ! podem fechar..