Detalhes da dúvida

Versão do fórum : PunBB
Nível de acesso : Fundador
Navegador usado : Google Chrome
Imagem :

Imagem da minha dúvida:

Membros afetados : Todos os membros do fórum
Endereço do fórum : http://teste98.forumeiros.com

Descrição do problema

Olá!

gostaria de colocar a imagem perfil no Widget Staff Online, o ícone da imagem seria este das categorias do meu fórum,
https://i.imgur.com/mYFuuPK.png

Até mais!

Olá,

Poderia me fornecer o código que está utilizando neste momento?


Atenciosamente.

Código do Widget Staff Online:

Código:

<script type="text/javascript">
myStaff = ['Admin'];
staff_cache_time = 4*60*1000; // mm*ss*ms;
</script>
<div id="theStaff">
</div>
<div id="theContent" style="display:none">
</div><noscript><div style="color:red;font-size:9px">Functionality of this widget is not possible, as JavaScript is disabled or unsupported.</div></noscript> <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).text() === myStaff[i] }).appendTo('#theStaff').wrap('<div class="myStaff">');
    if (!jQuery('#theStaff .myStaff').length) jQuery('#theStaff').html('Nenhum staff online');
    if (window.localStorage) {
      localStorage.staffOn = jQuery('#theStaff').html();
      localStorage.staffEx = +new Date;
    }
  })
}
</script>

Boa tarde!

Substitua por:

Código:

  <script type="text/javascript">
    myStaff = ['/u1', '/u7', '/u2'];
    staff_cache_time = 4*60*1000; // mm*ss*ms;
    </script>
<div id="theStaff">
</div>
 
<div id="theContent" style="display:none">
</div>
    <noscript><div style="color:red;font-size:9px">Functionality of this widget is not possible, as JavaScript is disabled or unsupported.</div></noscript>    <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>

Este será executado por id, procure por 'u1', 'u7' e 'u2'.
Basta alterar pelos respectivos id de seus staffs, poderá incrementar multiplicando o número com , e mantendo o " u ".

Olá,

o código não resultou

@Edit

resultou sim, na imagem, porem não no jeito que quero

Olá,

Peço ao senhor que substitua do nosso amigo por este.

Código:

<script type="text/javascript">
myStaff = ['Admin'];
staff_cache_time = 4*60*1000; // mm*ss*ms;
</script>
<div id="theStaff">
</div>
<div id="theContent" style="display:none">
</div><noscript><div style="color:red;font-size:9px">Functionality of this widget is not possible, as JavaScript is disabled or unsupported.</div></noscript> <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).text() === myStaff[i] }).appendTo('#theStaff').wrap('<div class="myStaff">');
    if (!jQuery('#theStaff .myStaff').length) jQuery('#theStaff').html('Nenhum staff online');
    if (window.localStorage) {
      localStorage.staffOn = jQuery('#theStaff').html();
      localStorage.staffEx = +new Date;
    }
  })
}
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
   jQuery(document).ready(function(){
      jQuery.get('/profile?mode=editprofile&page_profil=avatars', function(data){
         avatar = jQuery('.frm dl dd img', data).attr('src');
         jQuery("#theStaff .myStaff a").prepend('<img class="PerfilInfoImg" src="'+avatar+'"/>');
         jQuery(".PerfilInfoImg").css({"max-height": "50px", "max-width": "50px", "float": "left"});
      });
   });
});
</script>

Atenciosamente.

Agora ficou duas imagens

@Edit

Ooh, não ficou com duas imagens, falta o efeito bolinha em roda.

Olá,

Poderia deixar o código ativo em vosso fórum por gentileza? E me fornece o endereço corretamente por favor.


Atenciosamente.

Olá!

Este é o fórum, porem ele esta na fase de teste, depois vai pro fórum original.

E o efeito que quero é este https://i.imgur.com/mYFuuPK.png

Olá Faeel!

Mantenha o meu primeiro código, e acrescente este CSS:

Código:

.PerfilInfoImg, .myStaff img {border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;}

Abraços.

@EuficoLoko veja como ficou http://prntscr.com/6dvpjl

E, eu me baseei no código que o senhor adicionou por último.
Troque por:

Código:

    .PerfilInfoImg, .myStaff img {border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;width: 15px;height: 15px;max-width: 16px; }

Agora ficou muito pequena a imagem.

Olá,

Adicione este código em seu css.

Código:

.PerfilInfoImg, .myStaff img {
max-height: 50px;
max-width: 50px;
float: left;
}

Os valores 50px peço que o senhor regula ao seu gosto.


Atenciosamente.

Seria interessante mencionar as suas dimensões na próxima, mas para alterar:

Código:

    .PerfilInfoImg, .myStaff img {border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;width: 15px;height: 15px;max-width: 16px; }

width: 15 / largura
height: 15 / altura
max-width: 15 / largura max

@EuficoLoko não tenho dimensões, só gostaria que ficasse igual a imagem https://i.imgur.com/8DM9SZH.png

Esta imagem foi retirada do meu fórum, das categorias.

" width: 15 / largura
height: 15 / altura
max-width: 15 / largura max

"

Aumente e diminua os números, por favor. Assim ficará ao teu gosto.

Já coloquei ao tamanho certo, agora queria o efeito igual a imagem https://i.imgur.com/8DM9SZH.png

Hey!

Troque por:

Código:

       .PerfilInfoImg, .myStaff img {max-width: 16px;
background: none repeat scroll 0px 0px #FFF;
border: 1px solid #D5D5D5;
border-radius: 100%;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
height: 38px; /* ALTURA EDITAR 38 */
margin: 5px;
padding: 1px;
width: 38px; /* LARGURA EDITAR 38 */
 }

Abraços!

Agora ficou muito fino, tentei editar a largura e altura não consegui

Há sim, esqueci de nomear o max-width:

Código:

          .PerfilInfoImg, .myStaff img {max-width: 16px; /* EDITAR LARGURA AQUI */
    background: none repeat scroll 0px 0px #FFF;
    border: 1px solid #D5D5D5;
    border-radius: 100%;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
    height: 38px !important; /* ALTURA EDITAR 38 */
    max-height: 39px !important; /* ALTURA AQUI */
    margin: 5px;
    padding: 1px;
    width: 38px; /* LARGURA EDITAR 38 */
    }

Olá, poderia deixar do lado o nickname do usuario?

Adicione mais isto na sua CSS:

Código:

.myStaff a span strong {line-height: 20px }

Vá aumentando e diminuindo o número 20.

Tentei vários números e não resultou

Estranho. Troque por:

Código:

.myStaff a span strong {position: relative;top: -10px; /* VÁ SUBINDO O NÚMERO 10  */}

Não consigo ver o efeito do avatar em seu fórum, ele está ativo?

Resultou, Obrigado!

Até!