[TUTORIAL] Efeitos no nickname do usuário

Este tutorial ensinará a fazer uma das coisas que até agora era impossível de se fazer individualmente. Ele ensinará como colocar imagens nos nicks, grupos e ranks dos usuários por códigos CSS e páginas JS.

--> Tutoriais, dicas e astúcias <--
Inserir imagem no nick do usuário

1º - Conhecendo o código que será utilizado:
Vamos explorar o código que irá tornar uma imagem .GIF - Atrás do nickname e no rank do membro.

jQuery(document).ready(function(){jQuery('a[href="/uID"]:contains("Nickname"),span.name strong span strong:contains("Nickname")').html('<span style="background: transparent url(LINK_DA_IMG)"><font color="Cor que deseja"> Nick que deseja</font>
</a>')});

O valor "/uID", será selecionado como o ID do membro que tratará de aplicar o efeito, já os valores selecionados como "Nickname", substitua pelo nickname atual do membro que irá aplicar o efeito.

Feito isto, modifique o valor "Link da imagem" pelo endereço eletrônico da imagem que irá selecionar para ficar atrás do nickname e do rank do usuário.

E também, o valor "Cor desejada" será a cor pretendida para seu nickname e para o rank, e o valor "Nick que deseja" deverá ser alterado pelo nickname que deseja, é opcional, poderá deixar o utilizado atualmente, não afetará em nada.

2º - Adicionar o código à página JavaScript:
Para que o código surja frutos em seu fórum, será necessário aplicá-lo em uma página .JS:
Painel de Controle Módulos HTML & JAVASCRIPT Gestão dos Códigos JavaScript
Clique no botão "Criar nova página .JS"

Título - Correspondente ao nome da página JavaScript/jQuery que será criada.

Localização - No investimento, selecione "Em todas as páginas".

Código JavaScript - Insira o código que trabalhamos no item anterior.

Aplicando efeito nos grupos

Será utilizado um código CSS para que surja efeito, vamos aos procedimentos:
Painel de Controle Visualização Imagens e Cores Cores / Folha de estilos CSS


No conteúdo CSS, insira este código ao final de todos:

/*Efeito nos Grupos Modificado by Coca Cola .*/
a[href="/gID-"] {background: transparent url(Link da imagem)
}

Altere o valor em "/gID-" pelo ID do grupo que pretende que apareça a imagem por trás, no valor "Link da imagem", insira o endereço eletrônico da mesma, para que fique selecionada e seja possível visualizá-la atrás do título de grupo.

E clique em "Validar" para salvar as alterações.

Para adicionar uma imagem atrás do título de grupo para mais de um, repita sempre estes procedimentos, ou seja, este código na folha de estilos CSS:

Código:

a[href="/gID-"] {background: transparent url(Link da imagem)
}

--> FAQ do Tutorial <--
Inserir imagem no nick do usuário

• Vocês disponibilizam imagens para utilização?
  Sim, o autor do tutorial disponibilizou duas imagens para a utilização do efeito:
  https://i.servimg.com/u/f45/15/95/60/34/glitte10.gif
  https://i.servimg.com/u/f46/17/36/33/20/pxg8710.gif

---

© Fórum dos Fóruns & Coca Cola

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Inserir imagem no nick do usuário