[TUTORIAL] Ranks tipo xenForo

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

[TUTORIAL] Ranks tipo xenForo Empty [TUTORIAL] Ranks tipo xenForo

Mensagem por AquilesD. em 16.07.19 12:32

Ranks tipo xenForo

Com este tutorial, será possível personalizar os nossos ranks de uma maneira diversificada.

Ranks tipo xenForo


Tutoriais, dicas e astúcias

CÓDIGO CSS

CSS na verdade significa "Cascading Style Sheets", sua principal função é personalizar um determinado conteúdo exibido, em um determinado lugar na página. Cada versão de fórum (phpbb2. phpbb3, punbb, invision, modernbb e aeesomebb) possuem uma classe diferente, e nessas classes podem ser adicionadas as “propriedades”. Caso queira conhecer alguns tipos de classes, poderá consultar mais informações no seguinte: Elaborar um código CSS

Painel de controle Visualização Imagens e Cores Cores Folha de estilo CSS

[TUTORIAL] Ranks tipo xenForo Stylea10
[TUTORIAL] Ranks tipo xenForo 110111Seta Salvar CSS- Salva todo o CSS em arquivo TXT em seu computador. Em outras palavras, permite criar um backup de seu CSS personalizado.
[TUTORIAL] Ranks tipo xenForo 110210Seta 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".
[TUTORIAL] Ranks tipo xenForo 110310Seta 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.
[TUTORIAL] Ranks tipo xenForo 110410Seta 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;
}
Lembre-se de ler as anotações dentro do código. Para mais informações, queira ler este tópico: Elaborar um código CSS

Personalizar os Ranks no Painel de Controle

Agora, para que o código surta efeito, acesse a um dos seus ranks (Painel de Controle Usuários Ranks Administração dos Ranks) e cole este código:
Código:
<span class="memberRank rankStaff wrapped" itemprop="title">O SEU RANK</span>

Resultado

[TUTORIAL] Ranks tipo xenForo WQ1XVO1
AquilesD.

AquilesD.
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 10/02/2012
Mensagens : 6012
Pontos Ativos : 7735

Ver perfil do usuário https://ajuda.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum