[TUTORIAL] Ícones nos grupos automáticos
ShiftActif fórum :: Central ShiftActif :: :: Tutoriais
Página 1 de 1 • Compartilhe
[TUTORIAL] Ícones nos grupos automáticos
Ícones nos grupos automáticos |
Neste tutorial, vamos aprender a personalizar nossos IDs de acordo com nossos grupos, adicionando uma imagem ou Neon em nosso ID automaticamente, dependendo do grupo que estivermos.
--> Tutoriais <--
Ícones nos grupos automáticos
Ícones nos grupos automáticos
1º - Código a ser trabalhado:
Vamos entender o código que usaremos:
a span[style="color:#57B300"], a[style="color: #FFA200"]{
background:url(IMAGEM-AQUI) 0 1 no-repeat;
padding-left:17px;padding-top:2px;padding-bottom:2px}
Azul: Imagem que você quer que apareça na frente de seu ID, referente ao grupo, recomendamos ícones de 15 pixels de alturas.
Verde: Aqui você deverá colocar a cor do grupo, mais abaixo ensinaremos onde consegui-la
Vermelho: Esse é o espaço entre o ícone e o ID, aumente esse valor, se você achar que estão muito próximos.
OBS: isso é muito importante para o funcionamento do código.
Note que na linha onde você adicionara a cor, digamos que na primeira classe entre color:#57B300 não a nem um espaço, sendo que na segunda classe a um espaço entre color: e a cor ex: color: #57B300 notarão o espaço, esse espaço deve ser mantido e preservado, para que o código funcione perfeitamente, lembrando que na primeira classe esse espaço não existe, e aparece apenas na segunda.
2º - Adquirindo a cor do Grupo:
Escolha o grupo em que você irá adicionar o icone, e clique em Modificar
a cor estará em 'Cor dos membros do grupo', copie essa cor, e cole no local correspondente no código.
Painel de Controle Usuários Grupos :azul Administração dos Grupos
3º - Inserindo o código CSS:
Vamos criar o CSS para suportar as funções do código, vá até.
Painel de controle Visualização Imagens e Cores Cores Folha de estilos CSS
E adicione o código que aprendemos acima.
4º - Efeito extra:
Já conseguimos adicionar um icone automático nos nossos IDS agora, vamos aprender a adicionar um efeito neon junto com o icone automáticos.
Para fazer o efeito neon, deverá adicionar este código no código trabalhado acima.
Roxo: Cor do Neon.text-shadow:0px 0px 5px #b300ff;
Ex: de como ficara o código com o Neon
a span[style="color:#57B300"], a[style="color: #FFA200"]{
background:url(IMAGEM-AQUI) 0 1 no-repeat;
padding-left:17px;padding-top:2px;padding-bottom:2px
text-shadow:0px 0px 5px #b300ff;}
Para adicionar o código com o Neon, siga o tutorial citado no passo três(3).
© Shiftactif & SP-Design
Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [Dúvida] Botão Neon em todas as Versões |
Tópicos semelhantes
» [TUTORIAL] Ícones dos tópicos na resposta rápida
» [TUTORIAL] Colorir fundo de tópicos com ícones nas categorias
» [TUTORIAL] Remover nome e colchetes da legenda dos grupos na versão PhpBB 3
» [TUTORIAL] Resposta rápida
» [TUTORIAL] Confirmação de saída
» [TUTORIAL] Colorir fundo de tópicos com ícones nas categorias
» [TUTORIAL] Remover nome e colchetes da legenda dos grupos na versão PhpBB 3
» [TUTORIAL] Resposta rápida
» [TUTORIAL] Confirmação de saída
ShiftActif fórum :: Central ShiftActif :: :: Tutoriais
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|