![[Tutorial] Membro do Mês Elegante Empty](https://2img.net/i/empty.gif)
![[Tutorial] Membro do Mês Elegante EnjIzyQ](https://i.imgur.com/enjIzyQ.png)
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.
Entre no Painel de Administração.
Na aba Módulos > Gestão dos widgets do fórum
![[Tutorial] Membro do Mês Elegante 1gC2AwM](https://i.imgur.com/1gC2AwM.png)
Criar um widget personalizado
![[Tutorial] Membro do Mês Elegante 7oCStui](https://i.imgur.com/7oCStui.png)
Em nome do widget coloque um nome desejado, assim como no titulo do widget.
Em utilizar table type marque (não)
Código:
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 usernametxt = jQuery('.module table[summary="Os membros mais ativos do mês"] td:eq(0) a').text();
jQuery('.info_nameHead').html(jQuery('.module table[summary="Os membros mais ativos do mês"] td[width="30%"]:eq(0)').html());
jQuery('#memberNick').html(jQuery('.module table[summary="Os membros mais ativos do mês"] td[width="30%"]:eq(0)').html());
jQuery.get(link, function(bs){
var id = link.match(/\d+/g);
jQuery('.av').html(jQuery('#profile-advanced-right .main-content.clearfix.center:eq(0)',bs).html());
jQuery('#memberMsg').html(jQuery('#field_id-6 dd div',bs).html());
jQuery('#memberReg').html(jQuery('#field_id-4 dd div',bs).html());
jQuery('#memberReput').html(jQuery('#field_id-14 dd div',bs).html());
jQuery('#memberData').html(jQuery('#field_id-12 dd div',bs).html());
jQuery('.info_mes').html(months[month] +" "+ year);
jQuery('.info_irperfil').html('<a href="'+link+'">Ir para o perfil</a>');
jQuery('.mimp').html('<a href="/privmsg?mode=post&u='+id+'"><img src="http://i.imgur.com/1B61PFG.png" alt="Procurar posts"></a>');
jQuery('.mipost').html('<a href="spa/'+usernametxt+'"><img src="http://i.imgur.com/Ex7KhNG.png" alt="Procurar posts"></a>');
});}
});
</script>
<div id="member_of_month">
<div class="box_container" style="">
<div class="box_head">
<div class="head_avatar"><div class="av"> </div><br>
</div>
<div class="head_info">
<span class="info_nameHead"></span> <span class="mimp"><a href="/privmsg?mode=post&u=46"><img src="http://i.imgur.com/1B61PFG.png" alt="Enviar PM"></a></span>
<span class="mipost"><a href="spa/test"><img src="http://i.imgur.com/Ex7KhNG.png" alt="Procurar posts"></a></span><br>
<span>Membro do mês </span><span class="info_mes"></span>
</div>
</div>
</div>
<div class="main-content">
<div class="box_bottom">
Parabéns a <span id="memberNick"></span>. nosso novo membro do mês. <br />
Registrado pela primeira vez neste fórum <span id="memberReg"></span>. Ele comemora aniversário em <span id="memberData"></span>. Tem o total de <span id="memberMsg"></span> posts. Ele recebeu <span id="memberReput"></span> pontos de reputação. Parabéns ao membro do mês. </div>
<div class="irprofile" align="right" style="margin:10px;">
<span class="info_irperfil"></span>
</div>
</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;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>