[TUTORIAL] Ranks tipo xenForo

CÓDIGO CSS

Salvar CSS- Salva todo o CSS em arquivo TXT em seu computador. Em outras palavras, permite criar um backup de seu CSS personalizado.

Forçar CSS base do fórum - Força o CSS padrão da versão de seu fórum, ignorando o CSS personalizado. Caso queira verificar o CSS base d fórum, basta clicar no link "Ver CSS base do fórum".

Desativar o CSS base - Desativa o CSS base da versão de seu fórum, e permite que somente o CSS personalizado do fórum opere em todo o fórum.

Melhorar CSS - Com essa função ativa, a capacidade de carregamento da página é aumentada, facilitando a navegação nas páginas de seu fórum. Mas é importante lembrar que, para que a função funcione normalmente como prometida, você terá que adicionar o código correto na folha de estilo.

Código:

.memberRank {
        margin-bottom: 5px;
        margin-left: -12px;
        display: block;
        margin-right: -12px;
 }
.memberRank.rankStaff {
        border-color: #a5cae4; /* AQUI EDITAREMOS A COR DA BORDA DO RANK */
        color: #176093; /* AQUI EDITAREMOS A COR DO TEXTO DO RANK */
        background-color: #d7edfc; /* AQUI EDITAREMOS A COR PRINCIPAL DO RANK */
} 
.memberRank.wrapped {
          border-top-right-radius: 0;
 position: relative;
          border-top-left-radius: 0;
}
.memberRank {
          font-size: 11px;
 padding: 1px 5px;
          border: 1px solid transparent;
          box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
 background: transparent url(https://i.imgur.com/zS62hfe.png) repeat-x top;
          padding: 1px 5px;
          border: 1px solid transparent;
          border-radius: 3px;
          text-align: center;
}

Personalizar os Ranks no Painel de Controle

Código:

<span class="memberRank rankStaff wrapped" itemprop="title">O SEU RANK</span>

Resultado