[Tutorial] Widget staff online

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 Qui Set 29, 2016 4:11 pm

Informações:

Autor: Daemon
Versões: Todas as versões
Introdução: Poderá destacar usuários que estão online recentemente.

Instalação:

Acesse:
Painel de Controle -> Modulos -> HTML & Javascript -> Gestão dos Códigos Javascripts
Crie um novo javascript com investimento em todas as paginas com esse código:
Código:
<script type="text/javascript">
  myStaff = ['/u1'];
  staff_cache_time = 4*60*1000; // mm*ss*ms;
  </script>
<div id="theStaff">
</div>
 
<div id="theContent" style="display:none">
</div><script type="text/javascript">
  if (localStorage.staffOn && localStorage.staffEx > +new Date - staff_cache_time) jQuery('#theStaff').html(localStorage.staffOn);
  else loadStaff();
  function loadStaff() {
    jQuery('#theContent').load('/viewonline #main-content a, a.gen', function() {
      for (i=0; i<myStaff.length; i++) jQuery('#theContent a').filter(function() { return jQuery(this).attr('href') === myStaff[i] }).appendTo('#theStaff').wrap('<div class="myStaff">');
      if (!jQuery('#theStaff .myStaff').length) jQuery('#theStaff').html('No staff online');
      jQuery('.myStaff a').each(function() {
        var href = jQuery(this).attr('href');
        jQuery(this).before('<span class="monAva"></span>').prev().load(href + ' #profile-advanced-right .module:first div img:first,.forumline td.row1.gensmall:first > img, .frm-set.profile-view.left dd img,dl.left-box.details:first dd img, .row1 b .gen:first img, .real_avatar img', function() {
          if (window.localStorage) {
            localStorage.staffOn = jQuery('#theStaff').html();
            localStorage.staffEx = +new Date;
          }
        });
      });
    });
  }
  </script>


Entendendo como saber o id do usuário:
Cada usuario tem um ID e este id seria o numero que ele é colocado no registro, por exemplo, me registrei no fórum hoje, e outro usuário se registrou a 5 minutos atrás, vamos dizer que o usuário é o /u2, porém outro usuário se registra neste momento... ele será o /u3, e eu o /u1, entenderam? se você ver o perfil dele ficará assim: www.urldofórum/uX , esse X é o numero de registro.

Adicionando novos membros:
Para adicionarmos novos membros no Widget é bem simples. No código, já pronto, basta adicionar uma virgula e logo depois da virgula o mesmo código, só que, com o numero do usuário diferente, exemplo abaixo:

Código:
myStaff = ['/u1', '/u2'];

Notou que depois do '/u1' adicionamos uma virgula e logo depois o numero de outro usuário? Só não esqueça que tem que ser dentro dos colchetes e com as aspas.

Agora, vamos adicionar o código css.
Acesse:
Painel de Controle -> Visualização -> Imagens e Cores -> Cores -> Folha de estilo CSS
Em seguida, basta adicionar esse código:

Código:
/******STAFF ONLINE**********/
.monAva img {
  height: 40px;
  width: 40px;
  margin-right: 5px;
  background: none repeat scroll 0 0 #FFF;
  border: 1px solid #d5d1c8;
  box-shadow: 0 2px 2px rgba(0,0,0,0.1);
  padding: 1px;
}
.monAva img:hover {
  border: 1px solid black;
}
.myStaff a {
  display:inline-block;
  vertical-align:top;
  margin-top:.75em;
}
/*******FIM STAFF ONLINE********/


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