[Tutorial] Í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...


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 altura, poderá consegui-los em nossa área de pedidos Gráficos
Verde: 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 :seta: Usuários :seta: Grupos :seta: 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 :seta: Visualização :seta: Imagens e Cores :seta: Cores :seta: 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 & Cyllaz/Gaames forum