Í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 sobre Programação
Ícones nos grupos automáticos
1- Código a ser trabalhadoVamos 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 altura, poderá consegui-los em nossa
área de pedidos GráficosVerde: Aqui você devera colocar a cor do grupo, mais abaixo ensinaremos onde colegui-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 ok...
2- Adquirindo a cor do Grupo Painel de Controle Usuários Grupos Administração dos Grupos
Escolha o grupo em que você ira 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...
3- Inserindo o código CSS:Vamos criar o CSS para suportar as funções do botão, 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:A mais quero adicionar um Neon para o grupo, para que meu ID tenha seu próprio Neon...
Então adicione o código abaixo em seu código, entre as chaves
{codigo} text-shadow:0px 0px 5px #b300ff;
Roxo: Cor do Neon
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;}
5- O resultado final:----------------------------------------------------------------------------
© SP-Design & CyllazSe tiver alguma dúvida relacionada com este tutorial, crie um tópico com o seguinte título:
[Dúvida] Ícones nos grupos automáticos