[Widget] Membro do Mês Elegante

Relembrando a primeira mensagem :

Nome do Arquivo: [Widget] Membro do Mês Elegante
Autor: Cepheus - Design & Daemon - Código
Funcionalidade: PunBB
Categoria: Recursos BestSkins

Para começar você precisará criar um novo widget.

Se você está começando agora a mexer com a plataforma forumeiros siga as seguintes instruções.

Entre no Painel de administração.

Na aba Módulos > Gestão dos widgets do fórum
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Criar um widget personalizado
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Em nome do widget coloque um nome desejado, assim como no titulo do widget.
Em utilizar table type marque (não)

Fonte do widget coloque o código.
[guest]

Código:

<script>
  jQuery(document).ready(function() {
        function makeArray() {
            for (i = 0; i < makeArray.arguments.length; i++)
                this[i + 1] = makeArray.arguments[i];
        }
        var months = new makeArray('Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro');
        var date = new Date();
        var month = date.getMonth() + 1;
        var yy = date.getYear();
        var year = (yy < 1000) ? yy + 1900 : yy;
        var member_of_month = sessionStorage.getItem('member_of_month');
        if (member_of_month) {
            jQuery('#member_of_month').html(member_of_month);
        } else {
            // var link = jQuery('.module table[summary="Os membros mais ativos do mês"] td:eq(0) a').attr('href');
 var link = jQuery('.module table[summary="Os membros mais ativos do mês"] > tbody > tr:first td > a').attr('href');
 
            jQuery.get(link, function(b) {
                var usernametxt = jQuery('#profile-advanced-right .module .main-head .h3:eq(0) strong', b).text();
                var avatar = jQuery('#profile-advanced-right .main-content.clearfix.center:eq(0) img', b).attr('src');
                var rep = jQuery('#field_id-14 div', b).html();
                var posts = jQuery('#field_id-6 div', b).html();
                var register = jQuery('#field_id-4 div', b).html();
                var birth = jQuery('#field_id-12 div', b).html();
                var id = link.match(/\d+/g);
                jQuery('.box_container').html('<div id="member_of_month"> <div style="" class="box_container"> <div class="box_head"> <div class="head_avatar"> <div class="av"><img src="' + avatar + '" alt="' + avatar + '"><br><br>Rank: <div class="rank admin"><span name="gtitle">test</span></div></div><br> </div> <div class="head_info"> <span class="info_nameHead"><a href="' + link + '" title="' + usernametxt + '">' + usernametxt + '</a></span> <span class="mimp"><a href="privmsg?mode=post&u=' + id + '"><img src="http://i.imgur.com/1B61PFG.png" alt="Procurar posts"></a></span> <span class="mipost"><a href="spa/Admin"><img src="http://i.imgur.com/Ex7KhNG.png" alt="Procurar posts"></a></span><br> <span>Membro do mês </span><span class="info_mes">' + months[month] + ' ' + year + '</span> </div> </div> </div> <div class="main-content"> <div class="box_bottom"> Parabéns a <span id="memberNick">' + usernametxt + '</a></span>. nosso novo membro do mês. <br>Registrado pela primeira vez neste fórum <span id="memberReg">' + register + '</span>. Ele comemora aniversário em <span id="memberData">' + birth + '</span>. Tem o total de <span id="memberMsg">' + posts + '</span> posts. Ele recebeu <span id="memberReput">' + rep + '</span> pontos de reputação. Parabéns ao membro do mês. </div> <div style="margin:10px;" align="right" class="irprofile"> <span class="info_irperfil"><a href="' + link + '">Ir para o perfil</a></span> </div> </div> </div>');
 
            });
        }
    });
</script>
<div id="member_of_month">
                    
 <div class="box_container" style="">
                                                  
 </div>
                                    
</div>
     <style>
.box_bottom{ float:left}
#memberReg, memberMsg, memberReput{ }
#member_of_month{
background: #fff;
border: 0px solid rgba(0,0,0,0.05);
border-radius: 4px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
z-index: 999;
}
.box_container{}
.box_head{
background-color: #262e33;
border-radius: 4px 4px 0 0;
color: #fff;
height: 85px;
padding: 15px;
}
.head_avatar{float:left; /*width:80px;*/ margin-right:10px; margin-top:0px;}
.head_info{foat:right;/* width:180px;*/ margin-top:10px;}
.head_info span{font-size:14px; position:relative; line-height:20px;}
.head_info a span{color: #fff!important;font-size:20px!important;line-height:14px; text-decoration:none;
transition: all 150ms linear;}
.head_info a{color: #fff!important;text-decoration:none!important;}

.info_nameHead{font-size:20px!important;line-height:14px; }
.info_mes,.info_mes a {background:#68a72f;border-radius:10px;color:#fff; padding:3px; text-decoration:none;
transition: all 150ms linear;}
.info_mes:hover{ background-color:#619c2b}
.info_mes a:hover{ background-color:#619c2b; margin:3px;}

.info_irperfil,.info_irperfil a {background:#68a72f;border-radius:10px;color:#fff; padding:3px; text-decoration:none;
transition: all 150ms linear;}
.info_irperfil a:hover{ background-color:#619c2b; margin:3px;}
.irprofile a, .irprofile span a{color:#fff!important;}
.av img{
background:#fff;
border-radius:38px;
height:75px;
line-height:1px;
width:75px}
.av{ font-size:0px; color:transparent}
.av div{ display:none}
.av br{ display:none}
.av1{
background:#fff;
border-radius:38px;
height:75px;
line-height:1px;
width:75px}
.mi, .mimp, .mipost {
background:#343f46;
cursor: default;
height: 17px;
line-height: 17px;
padding: 2px 5px;
font-size: 9px;
font-weight: bold;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
vertical-align: middle;
transition: all 150ms linear;
}
.mi:hover, .mimp:hover, .mipost:hover{ background-color:#3c4951;}
#member_of_month{}
.box_stem {
border-color: transparent transparent #fff;
border-style: solid;
border-width: 15px;
display: block;
height: 0;
left: 15px;
position: absolute;
top: -30px;
width: 0;
z-index: 3;
}
.box_bottom{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box; font-size:10px;
box-shadow: 0 5px 40px rgba(0,0,0,0.1), 0 5px 20px rgba(0,0,0,0.1);}
.box_bottom{background:#fbfbfb;margin-top:10px;padding:15px; margin-bottom:10px;}
</style>
 

[/guest]

Gostei, ficou muito bonito esse Membro do mês.

Demais. Postando para ver lek

gracias!!!!!!!!!!!!!!!!!!!!!!

pelas fotos parece ser muito bom msm,, vou testar

muito bom irei ultilizar

Realmente excelente! Vou testar no meu fórum. +1

very nice  .. thank you 

Muito bom vou usar no meu fórum.

Wow that is veryi cool 

Excelente, estarei utilizando

gracias for windget the best

VOU VER SE E BOM RS .

Obrigado vou testar...

Muito bom o código, parabéns.

Estava precisando disso, vlw

ghjmghhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh

Adminaaa escreveu:ghjmghhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh

Banido meu caro... eu avisei amigo.

Legal gostei comentado..

gRACias vou a probar si funciona

ffffffffffffffffffffffffffffffffff

William_iHarDzZzzzzzzz escreveu:ffffffffffffffffffffffffffffffffff

Ótimo comentário.
-25% na barra de ocorrências.

Target escreveu:

William_iHarDzZzzzzzzz escreveu:ffffffffffffffffffffffffffffffffff

Ótimo comentário.
-25% na barra de ocorrências.

Fico impressionado como ainda existem pessoas assim. Odeio "sanguessugas".

Incrível cara!
Curti a personalização !
Parabéns.

Gostei do estilo vlw   -

Obrigado por compartilhar vou testar