Modificações no Widget Staff Online

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.

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

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?

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?

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

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

Olá!

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

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.

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é!

Olá!

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

@zSuYaNw, isso era como estava antes amigo!

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

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

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

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

Olá!

Ficou perfeito obrigado iChees e MateusA