[TUTORIAL] Gerir widget staff online

Muita das vezes, queremos mostrar aos usuários que a partir dos conectados e as estatísticas existentes nos fóruns que os Stafers estão presentes. Com este tutorial iremos ensinar como criar um Widget que irá automaticamente mostrar quando um membro da Staff se conectar.



1º - Ativando os Widgets:
Primeiramente é preciso saber que iremos fazer a função nos Widgets do teu fórum. Por isso pedimos que aceda ao teu painel administrativo e configure a seção dos Widgets como na imagem abaixo:


2º - Criando o Widget da Staff Online:
Agora, precisaremos criar um novo Widget e para isso pedimos que clique no botão:

Nome do widget - Este nome aparecerá no painel administrativo da seção dos Widgets. Coloque um nome a sua escolha.

Utilizar um table type - Nesta opção, deverá ser marcado "Sim" para que o Widget tenha uma estrutura no fórum.

Título do Widget - Coloque neste campo o mesmo nome dado na opção 1 desta explicação. O nome dado aqui aparecerá na visualização do Widget do fórum.

Fonte do widget - Insira neste campo o código que iremos mostrar logo abaixo.

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>

3º - Editando o código:
Para que os membros sejam adicionados no Widget criado em seu fórum, precisaremos fazer algumas edições básicas no código.

Código:

myStaff = ['/u1'];

Neste caso, o "/u1" é o usuário número 1 cadastrado em teu fórum, ou melhor dizendo, o fundador. Cada usuário tem um número em seu fórum, por ordem de registro. Para que possa pegar o número referente a cada membro em seu fórum, basta clicar sobre um membro em seu fórum e na URL em seu navegador irá aparecer algo como: "meuforum.forumeiros.com/u1".

4º - 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', '/u53077'];

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.

5º - Personalizando o Widget:
Agora que já entende o funcionamento do código, nós podemos personaliza-lo com CSS. Para isso, precisamos que aceda ao painel administrativo e logo depois na tua Folha de estilo CSS:

Ver o CSS da base do seu fórum - Permite o administrador conferir o estilo padrão do CSS do fórum. Mesmo se você tiver aplicado algum código CSS na folha de estilo, esse CSS base não será alterado. Ele mostra os códigos que personalizam seu fórum sem a necessidade do CSS adicional, que no caso seria a da folha de estilo.

Procurar CSS - Com essa ferramenta, podemos fazer uma busca nos códigos existentes na folha de estilo CSS. Por exemplo, se você adicionou algum código na folha de estilo, e pelo fato dela ser muito grande você não estiver encontrando o código desejado, a partir do momento em que digitar o código no campo "Procurar CSS", o código será encontrado (se digitado corretamente).

Desativar o CSS de base - Caso desabilite essa opção, o CSS base do seu fórum será desativado, deixando apenas o CSS da folha de estilo.

Melhorar seu CSS - Com essa função ativa, a capacidade de carregamento da página é aumentada, facilitando a navegação nas páginas de seu fórum. Mas é importante lembrar que, para que a função funcione normalmente como prometida, você terá que adicionar o código correto na folha de estilo.

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:

---

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [DÚVIDA] Gerir Widget Staff online