[TUTORIAL] Colocar os campos do Perfil em um Tooltip

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

[TUTORIAL] Colocar os campos do Perfil em um Tooltip

Mensagem por Gabe em 24/10/10, 09:47 pm

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.
Seta 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




- 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 Seta Vizualização Seta Templates Seta Geral Seta viewtopic_body Seta Editar (Editar)

Busque pelas seguintes linhas:

Código:
{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://illiweb.com/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:
</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 (Adicionar) para efetuar as modificações.

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

- 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 Seta Vizualização Seta Imagens e Cores Seta Cores Seta Folha de Estilo CSS

Seta Adicione o código abaixo e clique em Validar.

Código:
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 na versão Phpbb2.





© 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:
Colocar os campos do Perfil em um Tooltip
avatar

Gabe
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 10/01/2010
Mensagens : 5769
Pontos Ativos : 7546

Ver perfil do usuário https://ajuda.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum