Modificações no Widget Staff Online

5 participantes

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

Tópico resolvido Modificações no Widget Staff Online

Mensagem por IsmaelS. 01.06.15 19:22

Olá!

Estou a utilizar o código de Staff Online, que são:

Código CSS:
Código:
.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;
}

Código Widget:
Código:
<script type="text/javascript">
  myStaff = ['/u127', '/u413', '/u1', '/u36', '/u653', '/u716', '/u406'];
  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('Sem equipa moderação 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>

E está desta forma:
Modificações no Widget Staff Online 11m6r1f

Queria diminuir o tamanho dos avatares e dar mais espaço entre cada um, e queria colocar por baixo de cada nick se possível colocar 2 ícones um a ir para o Perfil e outro para enviar uma PM de cada usuário se possível.
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificações no Widget Staff Online

Mensagem por IsmaelS. 03.06.15 8:34

avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificações no Widget Staff Online

Mensagem por DeeW. 05.06.15 2:43

Troque o CSS por:
Código:
.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;
}
.myStaff {padding: 5px 0 0;}
.monAva img:hover {
border: 1px solid black;
}
.myStaff a {
display:inline-block;
vertical-align:top;
margin-top:.75em;
}

Colocar ícones, acho que até daria, mas não vejo utilidade ao mesmo.

[]'s
DeeW.

DeeW.
****

Membro desde : 27/05/2014
Mensagens : 271
Pontos : 389

http://webpixel.forum-pro.net https://www.facebook.com/headbanger.d

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificações no Widget Staff Online

Mensagem por IsmaelS. 05.06.15 8:36

Olá!

Testei o seu código mas retirei pois não estava a aparecer os avatares da staff, mas consegue realizar a tal função para os ícones? Se conseguir poderia colocar?
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificações no Widget Staff Online

Mensagem por IsmaelS. 08.06.15 18:27

avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificações no Widget Staff Online

Mensagem por IsmaelS. 11.06.15 19:04

avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificações no Widget Staff Online

Mensagem por IsmaelS. 13.06.15 14:44

avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Modificações no Widget Staff Online

Mensagem por RafaelS. 13.06.15 18:56

Olá @IsmaelS.,

Talvez você não tenha notado mas nas seções de JavaScript os UP's só são permitidos após 48 horas.
Peço que leia o seguinte tópico e se adapte ao regulamento deste setor, tudo bem? Positivo

Sobre sua questão ainda não tenho resultados plausíveis, assim que tiver uma solução irei imediatamente lhe notificar de tal.

Atenciosamente.
iChees
RafaelS.

RafaelS.
Membro Entusiasta
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificações no Widget Staff Online

Mensagem por MateusA 14.06.15 22:49

Olá amigo!

Eu ando um pouco febril então, não posso te garantir que funciona 100%(por falta de tempo mesmo). No meu fórum fake funcionou, experimente:
Código:
<script type="text/javascript">
myStaff = ['/u127', '/u413', '/u1', '/u36', '/u653', '/u716', '/u406'];
  staff_cache_time = 4*60*1000; // mm*ss*ms;
  </script>
<div id="theStaff">
</div>
 
<div style="display:none" id="theContent">
</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('Sem equipa moderação 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;
          }

        });
      });
    });
  }

jQuery(document).ready(function(){      jQuery('.myStaff a').each(function() {    var href = jQuery(this).attr('href');
var mp = this.pathname; var user = mp.substring(2,3); var usert = "/privmsg?mode=post&u=";var mpuser = usert + user;
 jQuery(this).after('<br><span class="monPro"> <a href='+href+'>Perfil</a> <a href='+mpuser+'>MP</a></span>');
});
});
  </script><style type="text/css">.monAva img {
  height: 20px;
  width: 20px;
  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;
}</style>
Resultado: http://prntscr.com/7h00rk
Obs: eu suponho que saiba substituir o link! Qualquer coisa avise.


Até breve. ^^
MateusA

MateusA
Hiper Membro

Membro desde : 13/05/2013
Mensagens : 3225
Pontos : 4215

https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificações no Widget Staff Online

Mensagem por IsmaelS. 14.06.15 23:29

Olá!

Poderia aumentar mais os avatares e colocar o "Perfil | MP" mesmo por baixo dos nicks? e com icons?
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificações no Widget Staff Online

Mensagem por MateusA 14.06.15 23:37

Olá!

Eu notei um bug, ele só encontrava o primeiro caractere.. Substitua por esse:
Código:
<script type="text/javascript">
myStaff = ['/u127', '/u413', '/u1', '/u36', '/u653', '/u716', '/u406'];
  staff_cache_time = 4*60*1000; // mm*ss*ms;
  </script>
<div id="theStaff">
</div>
 
<div style="display:none" id="theContent">
</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('Sem equipa moderação 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;
          }

        });
      });
    });
  }

jQuery(document).ready(function(){      jQuery('.myStaff a').each(function() {    var href = jQuery(this).attr('href');
var mp = this.pathname; var user = mp.substring(2,7); var usert = "/privmsg?mode=post&u=";var mpuser = usert + user;
 jQuery(this).after('<br><span class="monPro"> <a href='+href+'>Perfil</a> <a href='+mpuser+'>MP</a></span>');
});
});
  </script><style type="text/css">.monAva img {
  height: 20px;
  width: 20px;
  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;
}
    .monPro {position: relative; left: 25px;top: -10px}
</style>

Como o senhor não especificou as dimensões, vou lhe indicar os passos:
Código:
.monAva img {
  height: 20px;
  width: 20px;
  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;
}
Procure pelo código acima, no final do código que lhe forneci e, neste código, procure por:
height: 20px -> Aumente o 20 para aumentar a altura
width: 20px -> Aumente o 20 para aumentar a largura


Movimentação do perfil/mp:
Código:
  .monPro {position: relative; left: 25px;top: -10px}
Procure pelo código acima, no final do código que lhe forneci e, neste código, procure por:
left: 25px -> Quanto mais aumentar, mais para o lado >> ele irá.
top: -10px -> Altura, quanto mais aumentar (com o - na frente) mais ele ira para cima / idem ao contrário.
Agora os ícones, você pode me fornecer? Preciso dos ícones para poder por eles.
MateusA

MateusA
Hiper Membro

Membro desde : 13/05/2013
Mensagens : 3225
Pontos : 4215

https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Modificações no Widget Staff Online

Mensagem por GSCode 14.06.15 23:41

Olá,
Veja se lhe agrada o avatar deste tamanho, segue o código:
Substitua a CSS por essa:

Código:
.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;
}

Até! zen
GSCode

GSCode
Membro

Membro desde : 11/10/2013
Mensagens : 591
Pontos : 1031

http://testforumbrasil.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificações no Widget Staff Online

Mensagem por IsmaelS. 15.06.15 8:42

Olá!

@MateusA, está quase amigo mas será que dava para substituir os links "Perfil,MP" por ícones?

@zSuYaNw, isso era como estava antes amigo!
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Modificações no Widget Staff Online

Mensagem por RafaelS. 15.06.15 9:34

Olá,

Troque por este:

Código:
<script type="text/javascript">
myStaff = ['/u127', '/u413', '/u1', '/u36', '/u653', '/u716', '/u406'];
  staff_cache_time = 4*60*1000; // mm*ss*ms;
  </script>
<div id="theStaff">
</div>
 
<div style="display:none" id="theContent">
</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('Sem equipa moderação 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;
          }

        });
      });
    });
  }

jQuery(document).ready(function(){      jQuery('.myStaff a').each(function() {    var href = jQuery(this).attr('href');
var mp = this.pathname; var user = mp.substring(2,7); var usert = "/privmsg?mode=post&u=";var mpuser = usert + user;
 jQuery(this).after('<br><span class="monPro"> <a href='+href+'><img src="http://2img.net/i/fa/prosilver_grey/icon_user_profile.png"></a> <a href='+mpuser+'><img src="http://i19.servimg.com/u/f19/18/07/03/67/add10.png"></a></span>');
});
});
  </script><style type="text/css">.monAva img {
  height: 20px;
  width: 20px;
  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;
}
    .monPro {position: relative; left: 25px;top: -10px}
</style>

Atenciosamente,
iChees
RafaelS.

RafaelS.
Membro Entusiasta
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificações no Widget Staff Online

Mensagem por MateusA 15.06.15 11:08

@IsmaelS, olá!

Eu lhe pedi os ícones, no post anterior:
Agora os ícones, você pode me fornecer? Preciso dos ícones para poder por eles.

Mas como iChees agora, resolveu ajudar, após 14 dias aqui parado, eu me abstenho.  (Devo ter açúcar)
Juro que não consigo compreender, mas enfim...
A proposito, ele apenas adicionou <img>  dentro do link do meu código; é exatamente, o que eu faria se tivesse me fornecido o link.


Qualquer coisa é só pedir.
MateusA

MateusA
Hiper Membro

Membro desde : 13/05/2013
Mensagens : 3225
Pontos : 4215

https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificações no Widget Staff Online

Mensagem por IsmaelS. 15.06.15 12:55

Olá!

Obrigado e ambos, e desculpe MateusA, não tinha lido essa parte :/ Mas queria ajustar só mais um pouco reparem:
Modificações no Widget Staff Online Fep2xd

Queria colocar o Nick mais os ícones alinhado com o avatar se possível, se repararem está ligeiramente para baixo...
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta
  • 0

Tópico resolvido Re: Modificações no Widget Staff Online

Mensagem por RafaelS. 15.06.15 19:02

Olá @IsmaelS.,

Troque novamente por este:

Código:
    <script type="text/javascript">
    myStaff = ['/u127', '/u413', '/u1', '/u36', '/u653', '/u716', '/u406'];
      staff_cache_time = 4*60*1000; // mm*ss*ms;
      </script>
    <div id="theStaff">
    </div>
   
    <div style="display:none" id="theContent">
    </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('Sem equipa moderação 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;
              }

            });
          });
        });
      }

    jQuery(document).ready(function(){      jQuery('.myStaff a').each(function() {    var href = jQuery(this).attr('href');
    var mp = this.pathname; var user = mp.substring(2,7); var usert = "/privmsg?mode=post&u=";var mpuser = usert + user;
    jQuery(this).after('<br><span class="monPro"> <a href='+href+'><img src="http://2img.net/i/fa/prosilver_grey/icon_user_profile.png"></a> <a href='+mpuser+'><img src="http://i19.servimg.com/u/f19/18/07/03/67/add10.png"></a></span>');
    });
    });
      </script><style type="text/css">.monAva img {
      height: 20px;
      width: 20px;
      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 {
    margin: 0 !important;
    vertical-align: top !important;
}
        .monPro {position: relative; left: 25px;top: -10px}
    </style>

Atenciosamente,
iChees
RafaelS.

RafaelS.
Membro Entusiasta
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificações no Widget Staff Online

Mensagem por IsmaelS. 15.06.15 19:14

Olá!

Ficou perfeito obrigado iChees e MateusA Muito feliz
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Modificações no Widget Staff Online

Mensagem por RafaelS. 15.06.15 19:36

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.
RafaelS.

RafaelS.
Membro Entusiasta
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

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