Fórum iBlue
[Tutorial]Membro do mês personalizado Buddy_Group

Bem Vindos ao iBlue GAMES!

Registre-se para obter acesso especial em todo conteúdo presente no Fórum!
Tenha um bom uso do nosso fórum, e seja ativo!





Fórum iBlue
[Tutorial]Membro do mês personalizado Buddy_Group

Bem Vindos ao iBlue GAMES!

Registre-se para obter acesso especial em todo conteúdo presente no Fórum!
Tenha um bom uso do nosso fórum, e seja ativo!





Somos ÚNICOS, somos o SEU fórum


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

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

T-Lord

1[Tutorial]Membro do mês personalizado Empty [Tutorial]Membro do mês personalizado Qua 4 Set 2013 - 19:04

T-Lord
Administrador
[Tutorial]Membro do mês personalizado BV39tiF

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 1337678750Módulos [Tutorial]Membro do mês personalizado 1337678750HTML & JAVSCRIPT [Tutorial]Membro do mês personalizado 1337678750Gestão dos códigos JavaScript [Tutorial]Membro do mês personalizado 1337678750Criar um novo JavaScript
Com 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>
');
});
Salve!

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;
}
Lembre-se que só irá funcionar com o widget "Os membros mais ativos do mês" ativo.

Qualquer dúvida em relação a este tutorial, crie um tópico com o seguinte título: [Tutorial]Membro do mês personalizado

http://www.zonetoony.net/
Meky

2[Tutorial]Membro do mês personalizado Empty Re: [Tutorial]Membro do mês personalizado Qua 4 Set 2013 - 19:42

Meky
Gerente
Seus tutoriais são ótimos T-Lord, valeu por colaborar.

T-Lord

3[Tutorial]Membro do mês personalizado Empty Re: [Tutorial]Membro do mês personalizado Qui 5 Set 2013 - 16:21

T-Lord
Administrador
De nada amigo, mas esse tutorial é do Daemon!

Até logo!

http://www.zonetoony.net/
ɃƦƟƵ

4[Tutorial]Membro do mês personalizado Empty Re: [Tutorial]Membro do mês personalizado Qui 5 Set 2013 - 20:38

ɃƦƟƵ
Visitante
Belo Tutorial Obrigado por Compartilhar

Meky

5[Tutorial]Membro do mês personalizado Empty Re: [Tutorial]Membro do mês personalizado Sex 6 Set 2013 - 7:35

Meky
Gerente
Mais você repassa Smile

juan™

6[Tutorial]Membro do mês personalizado Empty Re: [Tutorial]Membro do mês personalizado Sex 6 Set 2013 - 7:49

juan™
Administrador
Deveria colocar isso aki , o qual seria eu Very Happy kk

http://www.zonetoony.net/

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