- 0Reputação da mensagem: 100% (1 votos)
por Roevs 16.07.19 12:32
Com este tutorial, será possível personalizar os nossos ranks de uma maneira diversificada.
Ranks tipo xenForo
Tutoriais, dicas e astúcias |
CÓDIGO CSSCSS 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 |
| 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; } 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 ControleAgora, 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 |
Roevs- Membro Entusiasta
- Membro desde : 10/02/2012
Mensagens : 6484
Pontos : 8343
-
Permissões neste sub-fórum
Não podes responder a tópicos