[TUTORIAL] Gerir widget staff online
Fórum dos Fóruns :: Forumeiros e você ::
Página 1 de 1 • Compartilhe
![Ajudeiro Ajudeiro](https://i.imgur.com/uwJbOFU.png)
[TUTORIAL] Gerir widget staff online
![]() | 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
Gerir Widget Staff online
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:
Painel de controle ![]() ![]() ![]() |
![[TUTORIAL] Gerir widget staff online KtIkMsF](https://i.imgur.com/KtIkMsF.png)
2º - 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](https://i.servimg.com/u/f86/11/66/91/15/criar10.gif)
![[TUTORIAL] Gerir widget staff online FkIiGo2](https://i.imgur.com/fkIiGo2.png)
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
- 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'];
|
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:
Painel de controle ![]() ![]() ![]() |
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
- 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](https://i.imgur.com/5gDmL8y.png)
© Fórum dos Fóruns
![]() | 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 |
![-](https://2img.net/i/fa/fdf3/moins10.png)
» Gerir Widget Staff online
» Como gerir widget de staff online?
» WidGet Staff Online
» Widget staff online
» Widget staff online
» Como gerir widget de staff online?
» WidGet Staff Online
» Widget staff online
» Widget staff online
Fórum dos Fóruns :: Forumeiros e você ::
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos