Informações de um membro em balão
3 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Informações de um membro em balão
Qual é minha questão:
Ola Amigos Fis esse Pedido em um Dis Ai mais Nem Sie para onde Foi isso
Mias Vim qui Pedi Denovo
Quero Coloca Isso no meu Fórum
![Informações de um membro em balão F2ezb](https://2img.net/h/oi47.tinypic.com/f2ezb.png)
Bom Pelo que eu Vejo ele Aparece na Hora que eu Passo o Mause Encima do Nome do User Se Pode mi Ajuda Agradesso Obrigado!!!
Endereço do meu fórum:
http://replicagames.forumeiros.com
Versão do fórum:
PHPBB3
Ola Amigos Fis esse Pedido em um Dis Ai mais Nem Sie para onde Foi isso
Mias Vim qui Pedi Denovo
Quero Coloca Isso no meu Fórum
![Informações de um membro em balão F2ezb](https://2img.net/h/oi47.tinypic.com/f2ezb.png)
Bom Pelo que eu Vejo ele Aparece na Hora que eu Passo o Mause Encima do Nome do User Se Pode mi Ajuda Agradesso Obrigado!!!
Endereço do meu fórum:
http://replicagames.forumeiros.com
Versão do fórum:
PHPBB3
Última edição por Venancio Mattos em 21.12.12 20:24, editado 1 vez(es)
Re: Informações de um membro em balão
Olá!
Veja o conteúdo do Spoiler:
Até mais.
Veja o conteúdo do Spoiler:
- Spoiler:
- 1º - Noção básica da função:
As páginas javascript ativas em seu fórum possibilita inserir scripts e jquery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.
Painel de controle >> Módulos >> HTML & JavaScript >> Gestão dos códigos JavaScripts >>Título Correspondente ao nome da página JavaScript/jQuery que será criada.
Investimento- São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. Neste tutorial é obrigado a marcamos a opção "Em todas as páginas" para que o mesmo resulte.
Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.
Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.
2º - Explorando o código:
Há códigos JavaScript que aprendemos no 1º passo disponíveis para versão PunBB e PhpBB3:phpBB3 - Código:
$(document).ready(function(){
$('.lastpost a[href*="/u"]').mouseover(function(){
$(this).parents('strong').css('position', 'relative');
$('.perfilInfo').remove();
$(this).parents('.tcr').css('overflow', 'visible');
$(this).before('
<div class="perfilInfo" style="position:absolute;">
<span class="setPerfil">
<span>
<img class="PerfilInfoImg" src="http://forum.teamspeak.com.br/public/style_images/master/profile/default_large.png" />
<h2>'+$(this).html()+'</h2>
<p><b>Reputação:</b><span></span></p>
<p><b>Posts:</b><span></span></p>
<p><b>Cadastrado:</b><span></span></p>
<p><b>Pontos:</b><span></span></p>
<span class="linkPrf"><a href="/privmsg?mode=post&u='+$(this).attr('href').replace('/u', '')+'">Enviar MP</a></span>
<span class="linkPrf"><a href="'+$(this).attr('href')+'">Ver perfil</a></span>
</span>
</span>
</span>
</div>
');
$.get($(this).attr('href'), function(retornoMembro){
var avtPrf = $('#profile-advanced-right img:first', retornoMembro).attr('src');
$('.PerfilInfoImg').attr('src', avtPrf);
var perfil_rank = $('#field_id-14 dd .field_uneditable', retornoMembro).html();
var perfil_post = $('#field_id-6 dd .field_uneditable', retornoMembro).html();
var perfil_cad = $('#field_id-4 dd .field_uneditable', retornoMembro).html();
var perfil_lastV = $('#field_id-13 dd .field_uneditable', retornoMembro).html();
$('.setPerfil p:eq(0) span').html(perfil_rank);
$('.setPerfil p:eq(1) span').html(perfil_post);
$('.setPerfil p:eq(2) span').html(perfil_cad);
$('.setPerfil p:eq(3) span').html(perfil_lastV);
});
//get
$('.perfilInfo').mouseleave(function(){
$(this).remove();
});//mouseleave
});
//mouseover
});
PunBB - Código:
$(document).ready(function(){
$('.tcr a[href*="/u"]').mouseover(function(){
$(this).parents('strong').css('position', 'relative');
$('.perfilInfo').remove();
$(this).parents('.tcr').css('overflow', 'visible');
$(this).before('
<div class="perfilInfo" style="position:absolute;">
<span class="setPerfil">
<span>
<img class="PerfilInfoImg" src="http://forum.teamspeak.com.br/public/style_images/master/profile/default_large.png" />
<h2>'+$(this).html()+'</h2>
<p><b>Rank:</b><span></span></p>
<p><b>Posts:</b><span></span></p>
<p><b>Cadastrado:</b><span></span></p>
<p><b>Pontos:</b><span></span></p>
<span class="linkPrf"><a href="/privmsg?mode=post&u='+$(this).attr('href').replace('/u', '')+'">Enviar MP</a></span>
<span class="linkPrf"><a href="'+$(this).attr('href')+'">Ver perfil</a></span>
</span>
</span>
</span>
</div>
');
$.get($(this).attr('href'), function(retornoMembro){
var avtPrf = $('#profile-advanced-right img:first', retornoMembro).attr('src');
$('.PerfilInfoImg').attr('src', avtPrf);
var perfil_rank = $('#profile-advanced-right .module .main-content img:eq(1)', retornoMembro).attr('alt');
var perfil_post = $('#field_id-6 dd', retornoMembro).html();
var perfil_cad = $('#field_id-4 dd', retornoMembro).html();
var perfil_lastV = $('#field_id-13 dd', retornoMembro).html();
$('.setPerfil p:eq(0) span').html(perfil_rank);
$('.setPerfil p:eq(1) span').html(perfil_post);
$('.setPerfil p:eq(2) span').html(perfil_cad);
$('.setPerfil p:eq(3) span').html(perfil_lastV);
});
//get
$('.perfilInfo').mouseleave(function(){
$(this).remove();
});//mouseleave
});
//mouseover
});
3º - Código CSS a ser utilizado:phpBB3 - Código:
.postbody dl.codebox dd{overflow-y:auto;overflow-x:auto;max-height:200px}.postbody dl.codebox pre{display:block;float:left;font-size:12px;line-height:15.199999809265137px;padding:5px;border-right:3px solid #6CE26C;margin-top:2px;color:#A8A5A5;margin-right:5px;font-family:Consolas,'Bitstream Vera Sans Mono','Courier New';padding-right:8px}.postbody dl.codebox code{overflow-y:hidden;overflow-x:hidden;max-height:none;font-family:Consolas,'Bitstream Vera Sans Mono','Courier New';background:url(http://i.imgur.com/eHvfR.png) repeat 0px 0px;padding-top:0px;margin-top:7px}
.perfilInfo {
background: url(http://forum.teamspeak.com.br/public/style_images/master/stems/bottomleft.png) no-repeat 98% 0%;
float: left;
height: 14.8em;
left: -38em;
padding: 16px 0px 20px 5px;
top: 13px;
width: 510px;
z-index: 999;
}
.avatar-index img {
height: 70px;
float: left;
margin: 0 4px;
}
.linkPrf {
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
background: #F6F6F6;
border: 1px solid #DBDBDB;
border-radius: 0 0 4px 4px;
bottom: 4px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 1) inset, 0 1px 0 rgba(0, 0, 0, 0.3);
color: #616161;
float: left;
height: 14px;
left: 21.7em;
position:relative;
margin: 2px;
padding: 5px;
text-align: center;
text-decoration: none!important;
transition: all .2s ease-in-out;
width: 8em;
}
.linkPrf:hover{color: #4C4C4C;
border-color: #9A9A9A;}
.linkPrf:hover a{color: #4C4C4C;}
.linkPrf a{color:#616161 !important; font:normal 12px; text-decoration:none;}
.setPerfil {
background: rgba(0, 0, 0, 0.3);
display: block;
height: 100%;
padding: 5px;
padding-bottom: 10px;
border-radius: 3px;
}
.setPerfil > span {
background: #f9f9f9;
border-radius: 3px;
display: block;
height: 100%;
padding: 3px;
border: 1px solid #999;
}
.setPerfil .PerfilInfoImg {
width: 94px;
height: 166px;
float: left;
display: table;
background: #E1E1E1;
padding: 3px;
box-shadow: 1px 1px 0 #CCC;
}
.setPerfil p div, .setPerfil span p span{
display: inline;
}
.setPerfil h2 {
float: left;
font: bold 19px "Trebuchet MS";
display: block;
background: #E1E1E1;
width: 380px;
color:#333;
padding: 5px;
text-shadow: 1px 1px 0 white;
border-radius: 0 10px 0px 0;
box-shadow: 1px 1px 0 #CCC;
margin:0 0 10px;
}
.setPerfil p {
margin: 2px 5px;
float: right;
display: block;
background: #F1F1F1;
width: 350px;
text-align: left;
padding: 5px;
box-shadow: 1px 1px 0 #CCC;
font-weight: normal;
border-left: 3px solid #333;
border-top: 1px solid #333;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
}
.setPerfil p:hover {
box-shadow: 1px 1px 0 #9A9A9A;
}
.setPerfil p span{display:initial;}
PunBB - Código:
.perfilInfo {
background: url(http://forum.teamspeak.com.br/public/style_images/master/stems/bottomleft.png) no-repeat 98% 0%;
float: left;
height: 14em;
left: -38em;
padding: 16px 0px 38px 5px;
top: 13px;
width: 510px;
z-index: 999;
}
.linkPrf {
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
background: #F6F6F6;
border: 1px solid #DBDBDB;
border-radius: 0 0 4px 4px;
bottom: -14px;
border-top:none;
box-shadow: 0 1px 0 rgba(255, 255, 255, 1) inset, 0 1px 0 rgba(0, 0, 0, 0.3);
color: #616161;
float: left;
height: 14px;
left: 13.8em;
margin: 2px;
padding: 5px;
text-align: center;
text-decoration: none!important;
transition: all .2s ease-in-out;
width: 8em;
}
.linkPrf:hover{color: #4C4C4C;
border-color: #9A9A9A;}
.linkPrf:hover a{color: #4C4C4C;}
.linkPrf a{color:#616161 !important; font:normal 12px; text-decoration:none;}
.setPerfil {
background: rgba(0, 0, 0, 0.3);
display: block;
height: 100%;
padding: 5px;
padding-bottom: 10px;
border-radius: 3px;
}
.setPerfil > span {
background: #f9f9f9;
border-radius: 3px;
display: block;
height: 100%;
padding: 3px;
border: 1px solid #999;
}
.setPerfil .PerfilInfoImg {
width: 94px;
height: 160px;
float: left;
display: table;
background: #E1E1E1;
padding: 3px;
box-shadow: 1px 1px 0 #CCC;
}
.setPerfil p div{
display: inline;
}
.setPerfil h2 {
float: left;
font: bold 19px "Trebuchet MS";
display: block;
background: #E1E1E1;
width: 382px;
padding: 5px;
text-shadow: 1px 1px 0 white;
border-radius: 0 10px 0px 0;
box-shadow: 1px 1px 0 #CCC;
margin-bottom:10px;
}
.setPerfil p {
margin: 2px 5px;
float: right;
display: block;
background: #F1F1F1;
width: 350px;
text-align: left;
padding: 5px;
box-shadow: 1px 1px 0 #CCC;
font-weight: normal;
border-left: 3px solid #333;
border-top: 1px solid #333;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
}
.setPerfil p:hover {
box-shadow: 1px 1px 0 #9A9A9A;
}
4º - Aplicando o código CSS:
Agora deverá seguir um esquema de onde o código deverá ser adicionado:
Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS- Resultado:(carregue na imagem para aumentar)
Até mais.
Re: Informações de um membro em balão
Olá!
Acabo de verificar e o código que eu te passei não foi colocado em seu fórum. Mantenha o código ativo para que eu possa encontrar o erro. E outra, o senhor não instalou o CSS do mesmo, poderia ver o Spoiler novamente?
Até mais.![Piscada](/users/2612/28/77/07/smiles/426228.gif)
Acabo de verificar e o código que eu te passei não foi colocado em seu fórum. Mantenha o código ativo para que eu possa encontrar o erro. E outra, o senhor não instalou o CSS do mesmo, poderia ver o Spoiler novamente?
Até mais.
![Piscada](/users/2612/28/77/07/smiles/426228.gif)
Re: Informações de um membro em balão
Olá amigão!
Aqui está normal. Limpe teu navegador talvez o problema seja este![Piscada](/users/2612/28/77/07/smiles/426228.gif)
Até mais!
Aqui está normal. Limpe teu navegador talvez o problema seja este
![Piscada](/users/2612/28/77/07/smiles/426228.gif)
Até mais!
Re: Informações de um membro em balão
Olá!
Como dito, o senhor não adicionou o código CSS:
Até mais.![Piscada](/users/2612/28/77/07/smiles/426228.gif)
Como dito, o senhor não adicionou o código CSS:
- Código:
.postbody dl.codebox dd{overflow-y:auto;overflow-x:auto;max-height:200px}.postbody dl.codebox pre{display:block;float:left;font-size:12px;line-height:15.199999809265137px;padding:5px;border-right:3px solid #6CE26C;margin-top:2px;color:#A8A5A5;margin-right:5px;font-family:Consolas,'Bitstream Vera Sans Mono','Courier New';padding-right:8px}.postbody dl.codebox code{overflow-y:hidden;overflow-x:hidden;max-height:none;font-family:Consolas,'Bitstream Vera Sans Mono','Courier New';background:url(http://i.imgur.com/eHvfR.png) repeat 0px 0px;padding-top:0px;margin-top:7px}
.perfilInfo {
background: url(http://forum.teamspeak.com.br/public/style_images/master/stems/bottomleft.png) no-repeat 98% 0%;
float: left;
height: 14.8em;
left: -38em;
padding: 16px 0px 20px 5px;
top: 13px;
width: 510px;
z-index: 999;
}
.avatar-index img {
height: 70px;
float: left;
margin: 0 4px;
}
.linkPrf {
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
background: #F6F6F6;
border: 1px solid #DBDBDB;
border-radius: 0 0 4px 4px;
bottom: 4px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 1) inset, 0 1px 0 rgba(0, 0, 0, 0.3);
color: #616161;
float: left;
height: 14px;
left: 21.7em;
position:relative;
margin: 2px;
padding: 5px;
text-align: center;
text-decoration: none!important;
transition: all .2s ease-in-out;
width: 8em;
}
.linkPrf:hover{color: #4C4C4C;
border-color: #9A9A9A;}
.linkPrf:hover a{color: #4C4C4C;}
.linkPrf a{color:#616161 !important; font:normal 12px; text-decoration:none;}
.setPerfil {
background: rgba(0, 0, 0, 0.3);
display: block;
height: 100%;
padding: 5px;
padding-bottom: 10px;
border-radius: 3px;
}
.setPerfil > span {
background: #f9f9f9;
border-radius: 3px;
display: block;
height: 100%;
padding: 3px;
border: 1px solid #999;
}
.setPerfil .PerfilInfoImg {
width: 94px;
height: 166px;
float: left;
display: table;
background: #E1E1E1;
padding: 3px;
box-shadow: 1px 1px 0 #CCC;
}
.setPerfil p div, .setPerfil span p span{
display: inline;
}
.setPerfil h2 {
float: left;
font: bold 19px "Trebuchet MS";
display: block;
background: #E1E1E1;
width: 380px;
color:#333;
padding: 5px;
text-shadow: 1px 1px 0 white;
border-radius: 0 10px 0px 0;
box-shadow: 1px 1px 0 #CCC;
margin:0 0 10px;
}
.setPerfil p {
margin: 2px 5px;
float: right;
display: block;
background: #F1F1F1;
width: 350px;
text-align: left;
padding: 5px;
box-shadow: 1px 1px 0 #CCC;
font-weight: normal;
border-left: 3px solid #333;
border-top: 1px solid #333;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
}
.setPerfil p:hover {
box-shadow: 1px 1px 0 #9A9A9A;
}
.setPerfil p span{display:initial;}
Até mais.
![Piscada](/users/2612/28/77/07/smiles/426228.gif)
Re: Informações de um membro em balão
Olá!
Poderia adicionar o CSS que acabo de lhe fornecer acima?
https://ajuda.forumeiros.com/t72059-#492465
Até mais.![Piscada](/users/2612/28/77/07/smiles/426228.gif)
Poderia adicionar o CSS que acabo de lhe fornecer acima?
https://ajuda.forumeiros.com/t72059-#492465
Até mais.
![Piscada](/users/2612/28/77/07/smiles/426228.gif)
![-](https://2img.net/i/fa/fdf3/moins10.png)
» Informações do membro em forma de balão
» Informações de um membro em balão phpbb3
» [TUTORIAL] Informações de um membro em balão (PhpBB3 e PunBB)
» Erro nas informações dos usuário em balão
» Ajustar o código das informações do membro
» Informações de um membro em balão phpbb3
» [TUTORIAL] Informações de um membro em balão (PhpBB3 e PunBB)
» Erro nas informações dos usuário em balão
» Ajustar o código das informações do membro
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos