Campos do perfil em um Tooltip

Se
você acha que os campos do perfil ocupam muito espaço nas mensagens, a
solução é colocá-los na forma de um tooltip. Ou seja, os campos ficarão
ocultos até que se passe o mouse por cima do avatar do membro, exibindo
todas as informações, como a data de registo, o número de mensagens,
idade, entre outros.
Atenção: Esse tutorial só é válido para a versão Phpbb2.

--> Tutoriais, dicas e astúcias <--
Colocar os campos do Perfil em um Tooltip

1º - Acedendo e modificando os Templates:
Primeiramente, devemos encontrar o Template viewtopic_body, dentro da categoria Geral. Esse será o template que editaremos. Acesse:
Painel de Controle Vizualização Templates Geral viewtopic_body Editar ()

Busque pelas seguintes linhas:

Código:

[list=1]
[*]{postrow.displayed.POSTER_RANK}
[*]
[*]            {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}
[*]
[*]
[*]            <!-- BEGIN profile_field -->
[*]            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
[*]            <!-- END profile_field -->
[*]            {postrow.displayed.POSTER_RPG}
[*]        </span>
[*]
[*]        <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
[/list]

• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  

[TUTORIAL] Colocar os campos do Perfil em um Tooltip

por Gabe em Dom 24 Out 2010 - 20:47


+

Se
você acha que os campos do perfil ocupam muito espaço nas mensagens, a
solução é colocá-los na forma de um tooltip. Ou seja, os campos ficarão
ocultos até que se passe o mouse por cima do avatar do membro, exibindo
todas as informações, como a data de registo, o número de mensagens,
idade, entre outros.
Atenção: Esse tutorial só é válido para a versão Phpbb2.

--> Tutoriais, dicas e astúcias <--
Colocar os campos do Perfil em um Tooltip

1º - Acedendo e modificando os Templates:
Primeiramente, devemos encontrar o Template viewtopic_body, dentro da categoria Geral. Esse será o template que editaremos. Acesse:
Painel de Controle Vizualização Templates Geral viewtopic_body Editar ()

Busque pelas seguintes linhas:

Código:Selecionar conteúdo

1. {postrow.displayed.POSTER_RANK}
   
2. 
   
3. {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}
   
4. 
   
5. 
   
6. 
   
7. {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
   
8. 
   
9. {postrow.displayed.POSTER_RPG}
   
10. 
    
11. 
    
12. 
    

Após encontrá-las, tenha certeza de que tem todas elas selecionadas e as substitua por estas:

Código:

[list=1]
[*]</span>
[*] <!-- INÍCIO DAS MUDANÇAS DO PERFIL POR HARICOOW -->
[*]
[*]<div class="infobulle_avatar">{postrow.displayed.POSTER_AVATAR}
[*]
[*]<em>
[*]
[*]<!-- BEGIN profile_field -->{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}<!-- END profile_field -->
[*]
[*]{postrow.displayed.POSTER_RPG}
[*]
[*]</em></div>
[*]
[*]<!-- FIM DAS MUDANÇAS DO PERFIL POR HARICOOW -->
[/list]

Após ter realizado essa operação clique em Salvar. Na página que apareceu, procure novamente pelo template viewtopic_body, mas desta vez verá que está escrito Em espera. Clique em Publicar () para efetuar as modificações.

2º - Adicionando campos extras no tooltip:
Se você acha que as informações de Mensagens, Data de Inscrição e Idade (campos padrão) não são suficientes, poderá adicionar novos campos. Basta retornar à edição do Template viewtopic_body e buscar pelos campos que acabou de adicionar:

Código:

[list=1]
[*]</span>
[*] <!-- INÍCIO DAS MUDANÇAS DO PERFIL POR HARICOOW -->
[*]
[*]<div class="infobulle_avatar">{postrow.displayed.POSTER_AVATAR}
[*]
[*]<em>
[*]
[*]<!-- BEGIN profile_field -->{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}<!-- END profile_field -->
[*]
[*]{postrow.displayed.POSTER_RPG}
[*]
[*]</em></div>
[*]
[*]<!-- FIM DAS MUDANÇAS DO PERFIL POR HARICOOW -->
[/list]

Agora, após {postrow.displayed.POSTER_RPG}, escolha para adicionar algum e/ou todos os campos abaixo:

Código:

{postrow.displayed.PROFILE_IMG} : [b]Ver perfil do usuário[/b]
{postrow.displayed.PM_IMG} : [b]Enviar uma mensagem privada[/b]
{postrow.displayed.EMAIL_IMG} : [b]Enviar um email[/b]
{postrow.displayed.contact_field.CONTENT} : [b]Ver o website do usuário[/b]
{postrow.displayed.ONLINE_IMG} : [b]Conectado/Não Conectado[/b]

Mas quando for adicionar, cuide para sempre deixar "um espaço" entre eles, veja o Exemplo:

Código:

{postrow.displayed.POSTER_RPG} {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.ONLINE_IMG}

3º - Adicionando a caixa de Informações:
Essa
parte é a mais fácil, mas não deixa de ser a mais importante, pois é
esse código que fará com que a caixa com as informações do perfil
apareça quando passar o mouse por cima do avatar do usuário.
Aceda à sua Folha de Estilo CSS:
Painel de Controle Vizualização Imagens e Cores Cores Folha de Estilo CSS

Adicione o código abaixo e clique em Validar.

Código:

[list=1]
[*]div.infobulle_avatar em {
[*]display:none;
[*]}
[*]
[*]div.infobulle_avatar:hover {
[*]background: none;
[*]z-index: 999;
[*]cursor: hand;
[*]position: relative;
[*]text-decoration:none;
[*]border: 0;
[*]}
[*]
[*]div.infobulle_avatar:hover em {
[*]font-style: normal;
[*]font-size: 10px;
[*]color:#000 !important;
[*]padding: 3px;
[*]display: block;
[*]position: absolute;
[*]-moz-border-radius: 5px;
[*]-webkit-border-radius: 5px;
[*]border-radius: 5px ;
[*]background-color: #FFF;
[*]border: 1px solid #000;
[*]width:150px;
[*]top: 100px;
[*]left: 100px;
[*]}
[/list]

--> FAQ do Tutorial <--
Colocar os campos do Perfil em um Tooltip

• O que preciso ter ativo para que o sistema funcione?
  O
  membro deve ter um avatar já definido. As informações aparecem quando o
  mouse passa por cima do avatar do usuário (efeito hover), por isso, os
  membros que não tiverem um avatar já selecionado, não terão como
  vizualizar esse sistema.
  

• Em quais versões esse sistema funciona?
  Como envolve Edição de Templates, somente será possível na versão Phpbb2 ou Punbb.
  

Excelente Tutorial!

Obrigada por comentar(em)!