Você não está conectado. Conecte-se ou registre-se

[Tutorial] Ícones nos grupos automáticos

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

1 [Tutorial] Ícones nos grupos automáticos em Dom Jan 13, 2013 12:55 pm

Cʀɑzy

avatar
Administrador
Administrador
Í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 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

Ver perfil do usuário http://kingercheats.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum