[Pedido] Perfil ao passar o Mouse.

Tsurugi'  • Seg 20 maio 2013 - 19:36

[Dark]Doki-.  • Seg 20 maio 2013 - 19:42

Tsurugi'  • Seg 20 maio 2013 - 19:44

Inspirage  • Seg 20 maio 2013 - 19:45

Re: [Pedido] Perfil ao passar o Mouse. Seg 20 maio 2013 - 19:45

Olá, adicione o seguinte código em Painel de Controle Módulos HTML & JavaScript Gestão dos códigos JavaScript Criar um novo JavaScript

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://r26.imgfast.net/users/2617/31/90/74/avatars/1-40.png" />
<h2>'+$(this).html()+'</h2>
<p class="user_status"> <span></span></p>
<div class="setInfos">
<p><b>Posts:</b> <span></span></p>
<p><b>Cadastrado:</b> <span></span></p>
<p><b>Moedas:</b> <span></span></p>
<p><b>Humor:</b> <span></span></p>
</div>
<div class="linkPrfwidth">
<span class="reputation">
<span></span>
</span>
<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>
</div>
</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_rep = $('#field_id-14 dd', retornoMembro).html();
var perfil_pens = $('#field_id9 dd', retornoMembro).html();
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();
var perfil_mood = $('#field_id8 dd', retornoMembro).html();

$('.reputation:eq(0) span').html(perfil_rep);
$('.setPerfil p:eq(0) span').html(perfil_pens);
$('.setPerfil p:eq(1) span').html(perfil_post);
$('.setPerfil p:eq(2) span').html(perfil_cad);
$('.setPerfil p:eq(3) span').html(perfil_lastV);
$('.setPerfil p:eq(4) span').html(perfil_mood);

});
//get

$('.perfilInfo').mouseleave(function(){
$(this).remove();
});//mouseleave



});
//mouseover
});

Com o investimento em todas as páginas.

Depois vá no Painel de Controle Visualização Imagens e cores Cores Folha de estilo CSS, e adicione o seguinte código.

Código:

/* Perfil hover */

.perfilInfo{background:url(http://forum.teamspeak.com.br/public/style_images/master/stems/bottomleft.png) no-repeat 98% 0;float:left;height:198px;left:-43em;padding:16px 0 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:#ECECEC url(http://i74.servimg.com/u/f74/18/08/53/97/highli11.png) repeat-x 0 0;border:1px solid #DBDBDB;border-radius:2px;bottom:-7px;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:1em;margin:2px;padding:2px;text-align:center;text-decoration:none!important;text-shadow:#fff 0 1px 0;transition:all .2s ease-in-out;width:8em}.linkPrf:hover{background-color:#F8F8F8;color:#4C4C4C}.linkPrf:hover a{color:#4C4C4C}.linkPrf a{color:#616161!important;font-size:12px;font-style:normal;font-variant:normal;font-weight:normal;text-decoration:none}.setPerfil{background:rgba(0,0,0,0.3);border-radius:2px;display:block;height:100%;padding:5px 5px 10px}.setPerfil > span{background:#f9f9f9;border:1px solid #999;border-radius:3px;display:block;height:100%;padding:3px}.setPerfil .PerfilInfoImg{-moz-box-shadow:0 2px 2px rgba(0,0,0,0.1);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.1);background:#fff;border:1px solid #D5D5D5;box-shadow:0 2px 2px rgba(0,0,0,0.1);display:table;float:left;height:91px;padding:1px;width:91px}.setPerfil .PerfilInfoImg:hover{-moz-box-shadow:0 2px 2px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.2);border-color:#A1A1A1;box-shadow:0 2px 2px rgba(0,0,0,0.2)}.setPerfil p div{display:inline}.setPerfil h2{background:#E1E1E1;border-radius:0 10px 0 0;box-shadow:1px 1px 0 #CCC;display:block;float:left;font-family:"Trebuchet MS";font-size:19px;font-style:normal;font-variant:normal;font-weight:bold;margin-bottom:10px;padding:5px;text-shadow:1px 1px 0 #fff;width:382px}.setPerfil p{-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;background:#F1F1F1;border-left:3px solid #333;border-top:1px solid #333;box-shadow:1px 1px 0 #CCC;display:block;font-weight:400;margin:2px 5px;max-height:30px;padding:5px;text-align:left;width:350px}.setPerfil p:hover{box-shadow:1px 1px 0 #9A9A9A}.user_status{background:#EBFCDF!important;border:1px solid #A4CFA4!important;box-shadow:0 0 0!important;color:#0E440E;float:right;font-size:12px;line-height:1.6;margin-bottom:5px;max-height:23px!important;padding:5px}.linkPrfwidth{width:120px}.reputation{-moz-border-radius:3px;-webkit-border-radius:3px;background:#8DB13E url(http://i74.servimg.com/u/f74/18/08/53/97/highli10.png) repeat-x 0 1px;border-radius:3px;bottom:-7px;color:#fff;display:inline-block;float:left;font-weight:700;left:1em;margin:5px 2px 2px;padding:3px 8px;text-align:center;text-shadow:rgba(0,0,0,0.3) 0 -1px 0;width:7em}.setInfos{float:right}

Até mais.

[Dark]Doki-.  • Seg 20 maio 2013 - 19:46

Conteúdo patrocinado  •