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

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

PhpBB2 e PunBB

1º - Localizar e modificar o template:
Aceda à Painel de controle Visualização Templates Geral viewtopic_body




2º - Modificar o código:
Use a caixa de busca do template e procure por este código:
Código:1{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:1{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!

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 Módulos HTML e Javascript Gestão dos códigos Javascript
Clique no botão "Criar um novo javascript"

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;

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;

Código JavaScript - Neste campo teremos de inserir o código que trabalhamos no item anterior;

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:

Obrigado Por compartilhar esse tutorial

Excelente Tutorial!

Obrigado Por Compartilhar

Obrigada por comentarem!