[TUTORIAL] Colocar os campos do Perfil em um Tooltip
Página 1 de 1 • Compartilhe
[TUTORIAL] Colocar os campos do Perfil em um Tooltip
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
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:
{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" />
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 () 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:
</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 Vizualização Imagens e Cores Cores Folha de Estilo CSS
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
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 |
Tópicos semelhantes
» Colocar os campos do perfil em um tooltip
» Campos do perfil em um tooltip
» Campos do perfil em um tooltip
» [TUTORIAL] Colocar as formas de contato dum membro abaixo do seu perfil (phpBB2)
» Colocar o campo de perfil em Tooltip no PHPBB3
» Campos do perfil em um tooltip
» Campos do perfil em um tooltip
» [TUTORIAL] Colocar as formas de contato dum membro abaixo do seu perfil (phpBB2)
» Colocar o campo de perfil em Tooltip no PHPBB3
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos