[TUTORIAL] Gerir widget staff online

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

Ajudeiro

[TUTORIAL] Gerir widget staff online Empty [TUTORIAL] Gerir widget staff online

Mensagem por Fraise 13.11.15 19:26


[TUTORIAL] Gerir widget staff online Rang10

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.

--> Tutoriais, dicas e astúcias <--
Gerir Widget Staff online


- 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:

Painel de controle :seta2: Módulos :seta2: Portal & Widgets :seta2: Gestão dos Widgets do fórum
[TUTORIAL] Gerir widget staff online KtIkMsF

- Criando o Widget da Staff Online:
Agora, precisaremos criar um novo Widget e para isso pedimos que clique no botão: [TUTORIAL] Gerir widget staff online Criar10

[TUTORIAL] Gerir widget staff online FkIiGo2
[TUTORIAL] Gerir widget staff online 110111Seta Nome do widget - Este nome aparecerá no painel administrativo da seção dos Widgets. Coloque um nome a sua escolha.
[TUTORIAL] Gerir widget staff online 110210Seta Utilizar um table type - Nesta opção, deverá ser marcado "Sim" para que o Widget tenha uma estrutura no fórum.
[TUTORIAL] Gerir widget staff online 110310Seta 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.
[TUTORIAL] Gerir widget staff online 110410Seta 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>


- 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'];

[TUTORIAL] Gerir widget staff online Act_bottom 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".
- 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.

- 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:

Painel de controle :seta2: Visualização :seta2: Cores :seta2: "Aba" Folha CSS.
[TUTORIAL] Gerir widget staff online Css11
[TUTORIAL] Gerir widget staff online 110111Seta 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.
[TUTORIAL] Gerir widget staff online 110210Seta 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).
[TUTORIAL] Gerir widget staff online 110310Seta 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.
[TUTORIAL] Gerir widget staff online 110410Seta 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:

[TUTORIAL] Gerir widget staff online 5gDmL8y




© Fórum dos Fóruns
[TUTORIAL] Gerir widget staff online Questi11 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
Fraise

Fraise
Ajudeiro
Ajudeiro

Membro desde : 26/06/2015
Mensagens : 6566
Pontos : 8050

https://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos