Compartilhe
Ver o tópico anteriorIr em baixoVer o tópico seguinte
avatar
Administrador
Mensagens : 441
Pontos : 9681
Reputação : 120
Ver perfil do usuáriohttp://beststyle.forumeiros.com

Widget Membro do Mês Elegante

em 18.12.15 12:04
Informações:
Autor:
Cepheus
Funcionalidade: PunBB




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.

Acesse:
Painel de Controle Modulos Gestão dos Widgets do fórum Estrutura





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 este código abaixo:

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>
 

Resultado:
avatar
Administrador
Mensagens : 441
Pontos : 9681
Reputação : 120
Ver perfil do usuáriohttp://beststyle.forumeiros.com

Re: Widget Membro do Mês Elegante

em 18.12.15 12:04
Tutorial Aceito
Ver o tópico anteriorVoltar ao TopoVer o tópico seguinte
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum