Bolinha de online ao lado do nome

Qual é minha questão:
Queria que no post, do lado do nome ali do perfil do canto ficasse uma bolinha verde quando o membro está online e uma bolinha cinza ou sem bolinha quando o membro está offiline.

Endereço do meu fórum:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Versão:
PunBB

Olá,

[hide]

Efeito CSS

Muitas vezes gostariamos de visualizar se um usuário está online no fórum sem ter que olhar nas estatísticas. Agora poderemos adicionar os ícones para diferenciar o status dos usuários.

/!\ Devido a aplicação das classes CSS nas versões, este código somente foi satisfatório para a versão PhpBB 3, logo, somente existe neste tutorial um código para modificar esta versão.

--> Perguntas e respostas freqüentes <--
Adicionar ícone Online / Offline

1º - Teremos de aceder à "Folha de estilo CSS":
Para que possamos personalizar ao fundo das categorias, é necessário adicionar códigos CSS para criarmos o efeito desejado, sendo assim, teremos de aceder a:
Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS

(clique na imagem para aumentar)

2º - Ter uma noção de CSS em relação ás imagens:
Antes de adicionarmos o código, temos de saber o que estamos a personalizar, pois não basta adicionar o link da imagem, melhor dizendo, temos de saber trabalhar a aparência.
O que podemos utilizar para personalizar a nossa caixa de texto:

• background-image:
  Esta propriedade, é das principais, pois ela permitirá adicionar a imagem pretendida para que se possa ter uma imagem de fundo.
  
  

  EXEMPLO escreveu:background-image: url([Tens de ter uma conta e sessão iniciada para poderes visualizar este link]);

  
  
  
• background-repeat:
  Definirá se haverá repetição da imagem ou não (no-repeat), podendo esta repetição fazer-se somente na horizontal (repeat-x), na vertical (repeat-y) ou também nos dois planos (repeat).
  
  

  EXEMPLO escreveu:background-repeat: no-repeat;

  
  
  
  
• background-position:
  Para definir a posição da imagem, se no topo (top), em baixo (bottom), à esquerda (left), à direita (right) ao centro (center), ou então por definição de valores em percentagem (%) ou em píxeis (px).
  
  

  EXEMPLO escreveu:background-position: 100% 0%;

  
  
  
• 
  Atenção pois quando é utilizado palavras deve a primeiras variar entre top/center/bottom e a segunda entre left/center/right.
  
  

Não entendi, séria melhor ser mais claro.

Olá,
Aceda à Painel de controle [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Visualização [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Geral [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] viewtopic_body
Cole esse código na caixa "Buscar":
Código:Selecionar conteúdo

Código:

{postrow.displayed.ONLINE_IMG}

Depois selecione o código e pressione "Ctrl + X".

Novamente, na caixa "Buscar", procure por esse código:
Código:Selecionar conteúdo

Código:

{postrow.displayed.POSTER_NAME}

Depois cole o código anterior ao lado desse (escolha o lado do nome que você quer que apareça) pressionando "Ctrl + V"

Por fim publique o template.

Até mas!

Resolvido.

[sucesso=Tópico Resolvido; e Bloqueado][/sucesso]Movido para: Arquivo - Pedido de código