Olá amigos, hoje trago um tutorial de como adicionar e personalizar ranks personalizados ao seu fórum, com puro CSS

O efeito alcançado deverá ser semelhante a este aqui


Porém ao invés de imagens, você usara HTML e CSS...

Vá em Usuários e Grupos → Ranks → Administração dos Ranks
E crie ou edite um novo rank;
No nome do rank adicione o seguinte HTML

Código:

<div id="rank" class="admin"><div id="image"></div><div id="text">Administrador</div></div>

Onde você deve alterar a palavra "Administrador" para o nome do rank desejado.

Agora adicione isso no seu CSS

Código:

/*
// Ranks administrativos personalizados
// Autor: Wagner'
// Acesse: www.jscript.forumeiros.com
// Para mais informações!
// Favor não retirar os créditos;
*/
/*default*/
#rank{
  background-image: url('http://i.imgur.com/6KHiROK.png') repeat-x;
  padding: 7px;
  border-radius: 3px;
  color: #fff;
  font: 13px "Trebuchet MS";
}
#image{
  background: url('https://cdn1.iconfinder.com/data/icons/PixeloPhilia_2/PNG/medal.png') no-repeat;
  width: 32px;
  height: 32px;
  float: left;
}
#text{
  text-align: center;
  cursor: default;
  text-shadow: rgba(0,0,0,.5) 0 1px 0;
}
/*cores*/
.admin{
  background-color: #d00000;
  box-shadow: 0 1px 0 0 #ED0000 inset, 0 2px 3px rgba(0, 0, 0, 0.2);
  border:1px solid  #780909;
}

Caso deseje adicionar mais rank no seu fórum, basta mudar a class no nome do rank e adicionar o CSS. Por exemplo:

Vamos criar um rank de moderador também

Código:

<div id="rank" class="mod"><div id="image"></div><div id="text">Moderador</div></div>

*Note que mudei a class de admin para mod

E agora isso no CSS

Código:

.mod{
  background-color: #008bd1;
  box-shadow: 0 1px 0 0 #009eed inset, 0 2px 3px rgba(0, 0, 0, 0.2);
  border:1px solid  #085378;
}

*Você não precisa repetir todo o CSS, só essa parte passada, basta alterar os valores das cores para o valor desejado.

Espero que seja útil a alguém

Beleza amigo, muito bom!

Excelente amigo! Sem requisições, sem pesos de conexão e o melhor: Sem scripts!!!

5 * from me,

JS

Obrigado amigos, após finalizar alguns projetos para meu fórum vou postar mais alguns conteúdos legais

Muito útil sim, obrigado por compartilhar conosco!

CSS bem limpo!