Como posso fazer o rank ficar como este..

Minha questão:

Ola, procurei aqui na BS e não achei.
Alguem pode me ajudar a deixar os ranks como este..
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

---

Endereço do meu fórum:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Versão:
PunBB

Olá,

Confira este tópico:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Postei lá o código...

Olá,

Com certeza que sim...

---

1º - Criando e configurando o Rank
Acesse a seção de criação de ranks..

Painel de Controle   Usuários & Grupos  Ranks  Administração dos ranks

Agora edite, ou crie um novo rank

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]Editar
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Criar

Agora precisamos trabalhar com as chamadas "classes" que existem no HTML...

Para declararmos uma classe utilizamos o atributo class da seguinte maneira:

Código:

<div class="rank">Admin</div>

Agora podemos estilizar essa classe via CSS, da seguinte maneira:

Código:

.rank{
    background: lightblue;
    padding: 1em;
    display: block;
}

Note que usamos o . que é o seletor para classes no CSS, ainda podemos usar o # só que este é para ID's, os quais não são interessantes para nosso caso...

Só com a class rank ja poderiamos estilizar os ranks, porém o rank teria somente aquela mesma aparência definida no rank.

Sendo assim vamos usar algo chamado "reaproveitamento de classes", para usar o minimo de código possível, da seguinte maneira:

Código:

<div class="rank mod">Mod</div>

Note que tudo que fizemos foi adicionar a class mod (sem o ponto) junto da class rank, assim toda a estilização feita pela nossa class continua no elemento, e podemos sobrepor alguns detalhes que queremos adicionando novas regras CSS abaixo da ja existente, assim:

Código:

.rank{
    background: red;
    padding: 1em;
    display: block;
}
.mod{
    background-color: lightblue;
}

Essa é a lógica usada no código que passei...

Tudo que precisa fazer é criar os ranks com o HTML que disponibilizei e adicionar o CSS a sua folha de estilo


Sou meio ruim em explicar as coisas, acho que saio muito do foco... Então, peço que se ficou alguma dúvida sinta-se a vontade em perguntar...

Abraços

Spoiler:

@Edit:
Encontrei um tópico no FdF que fala sobre isso
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

@Edit²:
Material de referência:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] (Vide "O seletor classe")