Informações:
Autor: Daemon
Funcionalidade: PunBB
Neste tutorial estaremos aprendendo a adicionar um box de membro do mês no topo do fórum.
Acesse:
e Crie um novo Javascript com investimento no indice com esse código:Painel de controle ☛ Módulos ☛ Html e Javascript ☛ Gestão dos códigos Javascript
- Código:
$(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 link = $('.module table[summary="Os membros mais ativos do mês"] td:eq(0) a').attr('href');
$.get(link, function(d) {
var nome = jQuery('#profile-advanced-right .module .main-head .h3:eq(0) strong', d).text(),
avatar = jQuery('#profile-advanced-right .main-content.clearfix.center:eq(0) img', d).attr('src'),
register = jQuery('#field_id-4 dd', d).text(),
posts = jQuery('#field_id-6 dd', d).text(),
pontos = jQuery('#field_id-13 dd', d).text(),
rep_m = jQuery('#field_id-14 dd', d).text(),
id = link.match(/\d+/g),
verify = jQuery('#profile-advanced-right .module .main-head .h3:eq(0) em', d).text();
if(verify == '(conectado)') {
var status = 'online';
} else {
var status = 'offline';
}
var p = $('.pun-crumbs')[0];
$(p).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;">' +
' ` <img src="'+avatar+'" class="avatar_d" alt="'+avatar+'" />' +
' <br /><br />' +
' <span class="bs_badge" style="background: green;margin-bottom: 3px;margin-top: 3px;">' +
' <a href="/privmsg?mode=post&u='+id+'">Envie um pm</a>' +
' </span>' +
' <br />' +
' <span class="bs_badge" style="background: green;">' +
' <a href="/spa/'+nome+'">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;">'+nome+'</span>' +
' <span style="float: right;color: grey;font-size: 10px;position: relative;" class="m_o_m"></span>' +
' </h4>' +
' </div>' +
' <span>' +
' <p class="message_motm" style="padding-top: 3px;"></p>' +
' <div style="padding: 5px;float: right;">' +
' <span class="bs_badge reset_cursor" id="m_post"></span>' +
' <span class="bs_badge reset_cursor" id="m_rep"></span>' +
' <span class="bs_badge bs_badge_lightgrey reset_cursor perf">' +
' <a href="'+link+'">ir para o perfil</a>' +
' </span>' +
' </div>' +
' </span>' +
' </div>' +
' </td>' +
' </tr>' +
' </tbody>' +
' </table>' +
' </div>' +
'</div>'
);
if(link) {
$('.destaque').show();
}
$('p.message_motm').html('Parabéns '+nome+' nosso novo membro do mês - <strong>'+months[month]+' - '+year+'</strong>. Foi registrado nesse fórum em '+register+'. Ele postou um total de '+posts+' posts. Ele tem o total de '+pontos+' pontos. Ele recebeu '+rep_m+' pontos de reputação. Agora ele está '+status+'.');
$('.m_o_m').html('Membro do Mês: <span class="bs_badge" style="background:green;">'+months[month]+' - '+year+'</span>');
$('#m_post').html(''+posts+' posts');
$('#m_rep').html(''+rep_m+' Pontos de Reputação');
});
});
Depois acesse:
E você poe o seguinte código na sua folha de estilo:Painel de Controle ☛ Visualização ☛ Imagens e Cores ☛ Cores ☛ Folha de Estilo
- Código:
/*Destaque do mês*/
.destaque img.avatar_d {
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);
}
.destaque h4 {font-weight: normal;}
.bs_badge {
background: #7ba60d;
display: inline-block;
height: 16px;
line-height: 16px;
padding: 0 5px;
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
vertical-align: middle;
margin-right: 8px;
}
.bs_badge_lightgrey {
background: #b3b3b3;
}
.bs_badge, .bs_badge a {color: #fff !important;}
.reset_cursor {
cursor: default;
}
.destaque .main-content table {
background: #F6F8FA;
border: 1px solid #DCE2EC;
width: 100%;
}
OBS: Só irá funcionar se tiver o "Membro do Mês mais ativos" ativado no widgets do fórum (no indice);
Resultado: