[TUTORIAL] Colocar os 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 as versões Phpbb2 e PunBB.

--> 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 [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Vizualização [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Templates [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 [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Editar ([Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem])

Busque pelas seguintes linhas:

Código: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

{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="https://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />

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

Código: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

</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 -->

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 ([Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]) 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: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

</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 -->

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

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

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

{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 [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Vizualização [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Imagens e Cores [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Cores [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Folha de Estilo CSS

Adicione o código abaixo e clique em Validar.

Código: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

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;
}

--> 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 nas versões Phpbb2 e PunBB.

---

© Fórum dos Fóruns & Haricoow

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [Dúvida] Colocar os campos do Perfil em um Tooltip