Best Style

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

Widget Membro do Mês Elegante

Ver o tópico anterior Ver o tópico seguinte Ir para baixo  Mensagem [Página 1 de 1]

Sliw

Sliw
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

Widget Membro do Mês Elegante 1gC2AwM

Widget Membro do Mês Elegante 7oCStui

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:
Widget Membro do Mês Elegante EnjIzyQ

https://beststyle.forumeiros.com

Sliw

Sliw
Administrador
Tutorial Aceito

https://beststyle.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Ir para o topo  Mensagem [Página 1 de 1]

Permissões neste sub-fórum
Não podes responder a tópicos