Tutorial: Forum Mouseover Profile Information

[balu♥krishnaKßZ ►☻◄ ƒøяυλ⁄(-αđмιиιѕтяαтσя]

File name: Mouseover Profile Information
Author: @balu krishna
Functionality: PunBB

First Go To Your

Administration Panel → Modules →Html & Javascript Management  → Javascript Management

Name:  Mouseover Profile Information
Placement: In homepage only

Code:

jQuery(document).ready(function(){
            jQuery('.tcr a[href*="/u"]').mouseover(function(){
            jQuery(this).parents('strong').css('position', 'relative');
            jQuery('.perfilInfo').remove();
            jQuery(this).parents('.tcr').css('overflow', 'visible');
            jQuery(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>'+jQuery(this).html()+'</h2>
            <p><b>Rank:</b><span></span></p>
            <p><b>Posts:</b><span></span></p>
            <p><b>Joined:</b><span></span></p>
            <p><b>Coins:</b><span></span></p>
            <span class="linkPrf"><a href="/privmsg?mode=post&u='+jQuery(this).attr('href').replace('/u', '')+'">Send PM</a></span>
            <span class="linkPrf"><a href="'+jQuery(this).attr('href')+'">View Profile</a></span>
            </span>
            </span>
            </span>
            </div>
            ');
            jQuery.get(jQuery(this).attr('href'), function(retornoMembro){
            var avtPrf = jQuery('#profile-advanced-right img:first', retornoMembro).attr('src');
            jQuery('.PerfilInfoImg').attr('src', avtPrf);
            var perfil_rank = jQuery('#profile-advanced-right .module .main-content img:eq(1)', retornoMembro).attr('alt');
            var perfil_post = jQuery('#field_id-6 dd', retornoMembro).html();
            var perfil_cad = jQuery('#field_id-4 dd', retornoMembro).html();
            var perfil_lastV = jQuery('#field_id-13 dd', retornoMembro).html();
            jQuery('.setPerfil p:eq(0) span').html(perfil_rank);
            jQuery('.setPerfil p:eq(1) span').html(perfil_post);
            jQuery('.setPerfil p:eq(2) span').html(perfil_cad);
            jQuery('.setPerfil p:eq(3) span').html(perfil_lastV);
            });
            //get
            jQuery('.perfilInfo').mouseleave(function(){
            jQuery(this).remove();
            });//mouseleave
            });
            //mouseover
            });

After you save, go to your

Administration Panel → Display → colors  → CSS

Then paste this

Code:

.perfilInfo{background:url(http://i77.servimg.com/u/f77/16/58/45/96/bottom10.png) no-repeat 98% 0;float:left;height:177px;left:-40em;padding:16px 0 38px 5px;top:13px;width:510px;z-index:999}
.setPerfil > span{background:#f9f9f9;border:1px solid #999;border-radius:3px;display:block;height:100%;padding:3px}
.sprite-icon_topic_latest{background:url(http://2img.net/i/fa/sprite_icons.png) no-repeat top left;background-position:-1083px 0;height:9px;width:11px}
.setPerfil{background:rgba(0,0,0,0.3);border-radius:3px;display:block;height:100%;padding:5px 5px 10px}
.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 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;float:right;font-weight:400;margin:2px 5px;padding:5px;text-align:left;width:350px}
.setPerfil p{font-weight:400;text-align:left}
.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;border-top:none;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:13.8em;margin:2px;padding:2px;text-align:center;text-decoration:none!important;transition:all .2s ease-in-out;width:8em}
.linkPrf a{color:#616161!important;font-size:12px;font-style:normal;font-variant:normal;font-weight:normal;text-decoration:none}
.setPerfil p:hover{box-shadow:1px 1px 0 #9A9A9A}
.setPerfil p div{display:inline}