ShiftActif fórum

[TUTORIAL] Ícones nos grupos automáticos Homepg10

Participe da melhor comunidade sobre fóruns!

Bem vindo [TUTORIAL] Ícones nos grupos automáticos 405374159 ao fórum de suporte e de informações técnicas ShiftActif. Aqui, solucionamos suas dúvidas sobre os tutoriais exclusivos fornecidos pela nosso subfórum de tutoriais além de suporte opcional ao Forumeiros.com, Blogger e temas grátis do Criarumblog.com! Você encontrará FAQs, astúcias em códigos e efeitos especiais em CSS, Javascript e outros para complementar seu fórum ou Blog!
Venha participar desta grande comunidade!!! [TUTORIAL] Ícones nos grupos automáticos 1660898911

[TUTORIAL] Ícones nos grupos automáticos

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

[TUTORIAL] Ícones nos grupos automáticos Empty [TUTORIAL] Ícones nos grupos automáticos

Mensagem por Engine404 em Seg 21 Maio - 15:44

[TUTORIAL] Ícones nos grupos automáticos Html10 Í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


- 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.

- 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 Seta azul Usuários Seta azul Grupos :azul Administração dos Grupos
[TUTORIAL] Ícones nos grupos automáticos Sem_ta37

- Inserindo o código CSS:
Vamos criar o CSS para suportar as funções do código, vá até.

Painel de controle Seta azul Visualização Seta azul Imagens e Cores Seta azul Cores Seta azul Folha de estilos CSS
[TUTORIAL] Ícones nos grupos automáticos 1114
E adicione o código que aprendemos acima.

- 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.
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;}

Para adicionar o código com o Neon, siga o tutorial citado no passo três(3).




© Shiftactif & SP-Design


[TUTORIAL] Ícones nos grupos automáticos Act_bottom 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
Engine404

Engine404
Meriteiro
Meriteiro

Masculino
Idade : 26
PointActif's : 2976
ReputActifs : 30
Mensagens : 281
Inscrição : 09/04/2012

Localização : Meu IP
100%

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

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

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