![[Tutorial]Membro do mês personalizado Buddy_Group](https://2img.net/h/cdn1.iconfinder.com/data/icons/df_On_Stage_Icon_Set/128/Buddy_Group.png){kind=icon}
Suporte Forumeiros
Início
Entrar
Cadastre-se
Mensagens
Moedas![[Tutorial]Membro do mês personalizado BV39tiF](https://i.imgur.com/bV39tiF.jpg)
Nome do Arquivo: [Tutorial]Membro do mês personalizado
Autor: Daemon
Funcionalidade: PunBB
Categoria: Recursos BestSkins
Neste tutorial estaremos aprendendo a adicionar um box de membro do mês na página inicial do fórum.
Primeiro aceda a Painel de controle
![[Tutorial]Membro do mês personalizado 1337678750](https://2img.net/u/1717/45/34/10/smiles/1337678750.png)
Módulos HTML & JAVSCRIPT Gestão dos códigos JavaScript Criar um novo JavaScriptCom investimento no índice adicione o código:
- Código:
$(document).ready(function(){
$.get($('.module table[summary="Os membros mais ativos do mês"] td:eq(0) a').attr('href'),function(d){
$('.motm').html($('.module table[summary="Os membros mais ativos do mês"] td:eq(0)').html());
var nome = $(d).find('#profile-advanced-right .module .main-head .h3:eq(0) strong').text();
$('.findposts a').attr('href','/spa/'+nome+'');
var x = $('.main.destaque')[0];
$(x).find('.main-content a[href^="/u"]').each(function() {
var md = $(this).attr('href');
var perf = $(this).attr('href');
$(this).parents('.main-content').find('.perf a').attr('href',''+perf+'');
$(this).parents('.main-content').find('td .img-d').load(md+'#profile-advanced-right .main-content.clearfix.center img:eq(0)');
$(this).parents('.main-content').find('td .reg').load(md+'.main #field_id-4 div');
$(this).parents('.main-content').find('td .posts').load(md+'.main #field_id-6 div');
$(this).parents('.main-content').find('td .rep').load(md+'.main #field_id-14 div');
$(this).parents('.main-content').find('td .status').load(md+'#profile-advanced-right .module:eq(0) .main-head em');
if($(this)) {
$('.main.destaque').show();
}
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;
$('.top-date').text(months[month] + " " + year);
});
});
$('.pun-crumbs').first().after('
<div class="main destaque" style="display: none;">
<div class="main-head">
<div class="page-title" style="padding: 3px 6px 3px;">
<h2><img src="http://i.imgur.com/fHukYSL.png" /> Membro do Mês</h2>
</div>
</div>
<div class="main-content">
<table>
<tbody class="statused">
<tr>
<td width="105px" align="center" style="background-color: aliceBlue;padding: 3px;">
<span class="img-d"></span><br><br>
<span class="ipsBadge findposts"
style="background:green;"><a href="#"
style="color:white;">Procurar Posts</a></span>
</td>
<td>
<div style="position:relative;left:-5px;padding:5px 0px 5px 15px;">
<div style="border-bottom:1px solid lightgrey;padding-bottom:3px;">
<h4> <span style="font-size:1.3em;" class="motm"></span></a></span>
<span
style="float:right;color:grey;font-size:10px;position:relative;">Membro
do Mês: <span class="top-date ipsBadge"
style="background:green;"></span></span></h4>
</div>
<span>
<p class="desc ipsType_small" style="padding-top:3px">
Parabéns a <span class="motm"></span> nosso
novo membro do mês - <strong><span
class="top-date"></span></strong>. Registado pela
primeira vez neste fórum <strong><span
class="reg"></span></strong>. Ele postou
<strong><span class="posts"></span></strong>
vezes. Ele recebeu <strong><span
class="rep"></span></strong> pontos de reputação.
<strong><span class="status"></span></strong>.
</p>
<strong><strong>
<div style="padding:5px;float:right">
<span class="ipsBadge ipsBadge_green reset_cursor"><span class="posts"></span> posts</span>
<span class="ipsBadge ipsBadge_green reset_cursor"><span class="rep"></span> Pontos de Reputação</span>
<span
class="ipsBadge ipsBadge_lightgrey reset_cursor perf"><a href="#"
style="color: white;">ir para o perfil</a></span>
</div>
</span>
</strong></strong></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
');
});
Depois vá até sua folha de css e adicione:
- Código:
/*Destaque do mês*/
.img-d img {
width: 50px;
height: 50px;
padding: 1px;
border: 1px solid #d5d5d5;
background: #fff;
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
}
.ipsBadge {
background: #7ba60d;
display: inline-block;
height: 16px;
line-height: 16px;
padding: 0 5px;
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
vertical-align: middle;
margin-right: 8px;
}
.ipsBadge_lightgrey {
background: #b3b3b3;
}
.destaque td span div {display: inline-block;}
.reset_cursor {
cursor: default;
}
.destaque .main-content table {
background: #F6F8FA;
border: 1px solid #DCE2EC;
}
Qualquer dúvida em relação a este tutorial, crie um tópico com o seguinte título: [Tutorial]Membro do mês personalizado
kk
