Best Style

Você não está conectado. Conecte-se ou registre-se

Widget Membro do Mês Elegante

Ir em baixo  Mensagem [Página 1 de 1]

1 Widget Membro do Mês Elegante em 18.12.15 12:04

Sliw

avatar
Administrador
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:

Ver perfil do usuário http://beststyle.forumeiros.com

Sliw

avatar
Administrador
Tutorial Aceito

Ver perfil do usuário http://beststyle.forumeiros.com

Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum