[TUTORIAL] Quadro online e offline no perfil do usuário

Edição de templates é algo inovador porque sempre nos surpreende assim que você encontra um resultado maravilhoso. Neste tutorial vamos adicionar um quadro em volta do avatar do usuário que está online, e um quadro para usuários offline.

--> Tutoriais <--
Quadro online e offiline na frente do avatar do usuário

1º - Modificar os templates da versão PhpBB2 e PhpBB3:
Através da modificação das páginas dos templates, poderá fazer várias modificações na estrutura do Fórum, podendo criar novos efeitos para o tema, e poderá

ainda incluir novos conteúdos nas páginas, mesmo em locais, que não são possíveis através das funções normais do Fórum.

Antes de continuar, é importante que você leia atentamente o seguinte tutorial: http://ajuda.forumeiros.com/t16827-

Painel de controle -> Visualização -> Templates ->


2º - Código CSS de personalização:
Vamos adicionar o código CSS antes de tudo. Então acesse o seu PA > Visualização > Imagens e Cores > Cores > Folha de estilo CSS > e adicionar

o seguinte código CSS:

.avatartge img {
width: 134px;
height: 134px;
margin: -143px 5px 12px;
}

.tgeavatar {
display:block;
position: relative;
width: 150px;
height: 150px;
background: transparent url("https://i.servimg.com/u/f47/16/67/92/35/tge10.png") no-repeat;
}

.tgeavatar img {
display:block;
position: relative;
}

#i_icon_online {
display:block;
position: relative;
}

Agora, basta salvar. O código CSS está disponível para todas as versões, logo você não precisa modificar.



3º - Template a ser modificado:
Acesse o seu PA > Visualização > Templates > Geral > view_topic_body > e vamos modificar o trecho que fala sobre o avatar. Alguns usuários tem a

função da alteração da ordem do rank e avartar e isso pode causar dificuldades visto que o template foi modificado. Contudo, você só precisa ter atenção com

as modificações do modelo.

PHPBB2
Na caixa Buscar procure por:

Código:

avatar

Assim que digitar, você vai ser indicado para o código abaixo:

Código:

{postrow.displayed.POSTER_AVATAR}

Essa é a variável da imagem do usuário nas mensagens. Agora, precisamos saber que, além dela há outras variáveis importantes. Antes da variável acima, você precisa adicionar as DIV com o atributo CLASS que vai copiar o CSS que adicionamos. Delete a variável {postrow.displayed.POSTER_AVATAR} e substitua por esse código:

Código:

<center> <div class="tgeavatar">{postrow.displayed.ONLINE_IMG}</div><span class="avatartge"> {postrow.displayed.POSTER_AVATAR}</span><br /></center>

Você deve ter notado a presença de uma variável dentro de código DIV. Ela é a variável da imagem do ONLINE, denominada de {postrow.displayed.ONLINE_IMG}. Agora que temos o código feito, você precisa deletar a segunda variável {postrow.displayed.ONLINE_IMG} do modelo. Na caixa buscar procure-a novamente, e delete-a até que fique somente a do código acima.

Feito isso, salve e publique o template.

PUNBB:
Na caixa Buscar procure por:

Código:

<div class="user-basic-info">

E abaixo dele temos a variável do avatar

Código:

{postrow.displayed.POSTER_AVATAR}

Basta selecioná-la e modificá-la para a mesma da variável de PHPBB2. Ou seja:

Código:

<center> <div class="tgeavatar">{postrow.displayed.ONLINE_IMG}</div><span class="avatartge"> {postrow.displayed.POSTER_AVATAR}</span><br /></center>

Procure e exclua a variável repetida {postrow.displayed.ONLINE_IMG}.

Salve e publique o template

Contudo, ainda não vai ter funcionado porque falta a imagem do ONLINE. Em PA > Visualização > Imagens e Cores > Modo avançado > Botões > Conectado > Modifique a URL para este:

https://i.servimg.com/u/f15/17/34/84/29/00410110.png

Salve.

• Meus avatares são enormes, e agora?:
  Aconselhamos que leia o conteúdo do seguinte tutorial: http://ajuda.forumeiros.com/-t15419.htm Você deve ter os avatares redimensionados para o tamanho da imagem de fundo.
  
  
• Na função blog há problemas! E agora?
  Aconselhamos que veja o seguinte tópico: https://shift.forumactif.com/t777-duvida-online-e-offline
  
  
• Resultado esperado:
  
  
  

---

© ShiftActif

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [Dúvida] Quadro online e offiline na frente do avatar do usuário