Modificações no Widget Staff Online

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

Resolvido Modificações no Widget Staff Online

Mensagem por IsmaelS. em 01/06/15, 03:22 pm

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:


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.

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Modificações no Widget Staff Online

Mensagem por IsmaelS. em 03/06/15, 04:34 am


IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Modificações no Widget Staff Online

Mensagem por DeeW. em 04/06/15, 10:43 pm

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
avatar

DeeW.
Nível 10

Masculino
Inscrito dia : 27/05/2014
Mensagens : 271
Pontos Ativos : 389

Ver perfil do usuário http://webpixel.forum-pro.net https://www.facebook.com/headbanger.d

Resolvido Re: Modificações no Widget Staff Online

Mensagem por IsmaelS. em 05/06/15, 04:36 am

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?

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Modificações no Widget Staff Online

Mensagem por IsmaelS. em 08/06/15, 02:27 pm


IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Modificações no Widget Staff Online

Mensagem por IsmaelS. em 11/06/15, 03:04 pm


IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Modificações no Widget Staff Online

Mensagem por IsmaelS. em 13/06/15, 10:44 am


IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Modificações no Widget Staff Online

Mensagem por Rafael em 13/06/15, 02:56 pm

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
avatar

Rafael
Hiperativo

Masculino
Inscrito dia : 26/04/2014
Mensagens : 3118
Pontos Ativos : 4029

Ver perfil do usuário http://maisforum.forumeiros.com

Resolvido Re: Modificações no Widget Staff Online

Mensagem por MateusA em 14/06/15, 06:49 pm

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. ^^
avatar

MateusA
Hiperativo

Masculino
Inscrito dia : 13/05/2013
Mensagens : 3225
Pontos Ativos : 4215

Ver perfil do usuário https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Resolvido Re: Modificações no Widget Staff Online

Mensagem por IsmaelS. em 14/06/15, 07:29 pm

Olá!

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

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Modificações no Widget Staff Online

Mensagem por MateusA em 14/06/15, 07:37 pm

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.
avatar

MateusA
Hiperativo

Masculino
Inscrito dia : 13/05/2013
Mensagens : 3225
Pontos Ativos : 4215

Ver perfil do usuário https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt
  • 0

Resolvido Re: Modificações no Widget Staff Online

Mensagem por GSCode em 14/06/15, 07:41 pm

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
avatar

GSCode
Usuário destaque

Masculino
Inscrito dia : 11/10/2013
Mensagens : 590
Pontos Ativos : 1031

Ver perfil do usuário http://testforumbrasil.forumeiros.com/forum

Resolvido Re: Modificações no Widget Staff Online

Mensagem por IsmaelS. em 15/06/15, 04:42 am

Olá!

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

@zSuYaNw, isso era como estava antes amigo!

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Modificações no Widget Staff Online

Mensagem por Rafael em 15/06/15, 05:34 am

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://illiweb.com/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
avatar

Rafael
Hiperativo

Masculino
Inscrito dia : 26/04/2014
Mensagens : 3118
Pontos Ativos : 4029

Ver perfil do usuário http://maisforum.forumeiros.com

Resolvido Re: Modificações no Widget Staff Online

Mensagem por MateusA em 15/06/15, 07:08 am

@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.
avatar

MateusA
Hiperativo

Masculino
Inscrito dia : 13/05/2013
Mensagens : 3225
Pontos Ativos : 4215

Ver perfil do usuário https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Resolvido Re: Modificações no Widget Staff Online

Mensagem por IsmaelS. em 15/06/15, 08:55 am

Olá!

Obrigado e ambos, e desculpe MateusA, não tinha lido essa parte :/ Mas queria ajustar só mais um pouco reparem:


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

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/
  • 0

Resolvido Re: Modificações no Widget Staff Online

Mensagem por Rafael em 15/06/15, 03:02 pm

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://illiweb.com/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
avatar

Rafael
Hiperativo

Masculino
Inscrito dia : 26/04/2014
Mensagens : 3118
Pontos Ativos : 4029

Ver perfil do usuário http://maisforum.forumeiros.com

Resolvido Re: Modificações no Widget Staff Online

Mensagem por IsmaelS. em 15/06/15, 03:14 pm

Olá!

Ficou perfeito obrigado iChees e MateusA Muito feliz

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Modificações no Widget Staff Online

Mensagem por Rafael em 15/06/15, 03:36 pm

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

Rafael
Hiperativo

Masculino
Inscrito dia : 26/04/2014
Mensagens : 3118
Pontos Ativos : 4029

Ver perfil do usuário http://maisforum.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum