Fórum iBlue
[TUTORIAL] Posicionar ícone online ao lado do nick Buddy_Group

Bem Vindos ao iBlue GAMES!

Registre-se para obter acesso especial em todo conteúdo presente no Fórum!
Tenha um bom uso do nosso fórum, e seja ativo!





Fórum iBlue
[TUTORIAL] Posicionar ícone online ao lado do nick Buddy_Group

Bem Vindos ao iBlue GAMES!

Registre-se para obter acesso especial em todo conteúdo presente no Fórum!
Tenha um bom uso do nosso fórum, e seja ativo!





Somos ÚNICOS, somos o SEU fórum


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

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

T-Lord
Administrador
[TUTORIAL] Posicionar ícone online ao lado do nick Templates   Posicionar ícone online ao lado do nick
A
versão Invision possui uma ótima ferramenta padrão que posiciona o
ícone "Online" ao lado do nick, com este tutorial iremos aprender como
obter o mesmo efeito nas demais versões.



--> Tutoriais, Dicas e Astúcias <--
Posicionar ícone online ao lado do nick


   
[TUTORIAL] Posicionar ícone online ao lado do nick Warning Para
que possamos prosseguir com o tutorial, é preciso que tenha noção sobre
a edição dos templates, que serão necessárias para a continuação deste
tutorial. Para isso, veja: Modificar os templates do fórum
[TUTORIAL] Posicionar ícone online ao lado do nick Logo PhpBB2 e PunBB
1º - Localizar e modificar o template:
Aceda à Painel de controle  [TUTORIAL] Posicionar ícone online ao lado do nick 633772  Visualização  [TUTORIAL] Posicionar ícone online ao lado do nick 633772  Templates  [TUTORIAL] Posicionar ícone online ao lado do nick 633772  Geral  [TUTORIAL] Posicionar ícone online ao lado do nick 633772  viewtopic_body



[TUTORIAL] Posicionar ícone online ao lado do nick 111


2º - Modificar o código:
Use a caixa de busca do template e procure por este código:
Código:

{postrow.displayed.ONLINE_IMG}

Selecione o código e aperte "Ctrl + X" para recortar. Novamente na caixa de busca procure por este código:

Código:

{postrow.displayed.POSTER_NAME}

Cole o código anterior ao lado desse, caso cole ao lado esquerdo, o
ícone aparecerá a esquerda do nick, se colar ao lado direito ele ficará a
direita do nick.

Salve e publique seu template!


[TUTORIAL] Posicionar ícone online ao lado do nick Logo PhpBB3
1º - Código utilizado:


jQuery(document).ready(function(){jQuery('.post.online').each(function(){jQuery(this).find('.postprofile
dl dt strong a').after(' IMAGEM">')})});

Vermelho -> Link da imagem do ícone online.


2º - Inserir o código Javascript:
Aceda à Painel de controle  [TUTORIAL] Posicionar ícone online ao lado do nick 633772  Módulos  [TUTORIAL] Posicionar ícone online ao lado do nick 633772  HTML e Javascript  [TUTORIAL] Posicionar ícone online ao lado do nick 633772  Gestão dos códigos Javascript
Clique no botão "Criar um novo javascript"


(carregue na imagem para aumentar)

Expandir esta imagem Ver em tamanho real
[TUTORIAL] Posicionar ícone online ao lado do nick 2u5q4212
[TUTORIAL] Posicionar ícone online ao lado do nick 110111[TUTORIAL] Posicionar ícone online ao lado do nick 398853 Título - Terá de colocar um título para a página, de forma a poder identifica-lo na lista de páginas JavaScript do Painel de Controle;
[TUTORIAL] Posicionar ícone online ao lado do nick 110210[TUTORIAL] Posicionar ícone online ao lado do nick 398853 Investimento - Escolha a opção "Em todas as páginas", para que a função não apresente erros na posição da coluna de perfis;
[TUTORIAL] Posicionar ícone online ao lado do nick 110310[TUTORIAL] Posicionar ícone online ao lado do nick 398853 Código JavaScript - Neste campo teremos de inserir o código que trabalhamos no item anterior;
[TUTORIAL] Posicionar ícone online ao lado do nick 110410[TUTORIAL] Posicionar ícone online ao lado do nick 398853 Confirmar
- Por fim, após adicionar o código, terá de clicar neste botão para
salvar a criação. Se você clicar em um outro botão ou em uma outra
seção, as mudanças não serão validadas.
3º - Veja o resultado:


(carregue na imagem para aumentar)
[TUTORIAL] Posicionar ícone online ao lado do nick Untitl10



Última edição por T-Lord em Ter 2 Jul 2013 - 12:46, editado 1 vez(es)

http://www.zonetoony.net/
MakyBory
Membro Lendário
Excelente Tutorial!

http://toon.forumfacil.net/
T-Lord
Administrador
Obrigada por comentar(em)!

http://www.zonetoony.net/
T-Lord
Administrador
Atualizado@

Bugs foram retirados dos códigos, usado e testado no dia 2 de julho de 2013 ás 14:49h


Att. T-Lord

http://www.zonetoony.net/
◄Smeck►
Membro Ativo
Obg por compartilhar.

T-Lord
Administrador
De nada amigo.

http://www.zonetoony.net/
juan™
Administrador
Obrigado Por Conpartilhar

http://www.zonetoony.net/
T-Lord
Administrador
De nada amigo!

http://www.zonetoony.net/
Meky
Gerente
ótimo tutorial , obrigado por compartilhar ^.^

T-Lord
Administrador
De nada novamente!

http://www.zonetoony.net/

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

Permissões neste sub-fórum
Não podes responder a tópicos