[Tutorial] Membro do mês personalizado

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

avatar
Admin
Administrador
Tempo Online : 176d 8h 9m 37s
Mensagens : 693
Reputação : 3
Ver perfil do usuário http://bestweb.forumais.com

MensagemAdmin em Seg Out 03, 2016 8:09 pm

Informações:

Autor: Daemon
Versões: PunBB

Instalação:

Acesse:
Painel de controle ->> Modulos ->> HTML & Javascripts ->> Gestão dos códigos Javascripts
Então crie um novo javascript com investimento no indice com esse código:
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 disto, acesse:
Painel de Controle -> Visualização -> Imagens e Cores -> Cores -> Folha de Estilo CSS
E Adicione esse código na sua 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%;
}

Resultado:

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

Cria uma conta ou logue para postar uma mensagem.

Você precisa ser um membro, para poder postar uma resposta.

Criar conta

Participe de nossa comunidade, basta se registrar. É Fácil!


Criar uma conta

Logar

Já tem uma conta? Sem problemas, Logue agora.


Logar-se

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