Neon automaticamente no nome

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<spblue>- Código a ser trabalhado</spblue>
Vamos entender o código que usaremos...

a span[style="color:<font color="green">#57B300</font>"], a[style="color: <font color="green">#FFA200</font>"]{
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<spblue>- Adquirindo a cor do Grupo</spblue>

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<spblue>- Inserindo o código CSS:</spblue>
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<spblue>- Efeito extra:</spblue>
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:<font color="green">#57B300</font>"], a[style="color: <font color="green">#FFA200</font>"]{
background:url(IMAGEM-AQUI) 0 1 no-repeat;
padding-left:17px;padding-top:2px;padding-bottom:2px
text-shadow:0px 0px 5px #b300ff;}

5<spblue>- O resultado final:</spblue>


----------------------------------------------------------------------------