Personalização do widget "ÚLTIMOS MEMBROS CONECTADOS"

Detalhes da questão

Endereço do fórum: clanowners.forumeiros.com
Versão do fórum: PhpBB3

Descrição

Olá, tenho em meu fórum o widget de "ÚLTIMOS MEMBROS CONECTADOS" que adicionei seguindo este tutorial: https://ajuda.forumeiros.com/t77192-tutorial-widget-ultimos-membros-conectados

O código que tenho no meu fórum é esse:

Código:


<script>jQuery(function(){jQuery(document).ready(function(){jQuery.get('/memberlist?mode=lastvisit&order=DESC&submit=Ok&username',function(conectados){jQuery('.ultimos').html(jQuery("td.avatar-mini a:lt(24), .avatar.mini:lt(24), .mini-avatar:lt(24)",conectados));})});});</script><style>.mini-avatar{display:inline-block;}.avatar.mini{display:inline-block !important;border:0px !important;margin-bottom:5px !important;margin-right:10px !important;}.ultimos a span strong{display:none;}.ultimos a{color:transparent !important;font-size:0px;}.ultimos img{    height: 36px;width: 36px;background-color:#FCFCFF;padding: 2px;border: 1px solid#CCC;margin-right:5px !important;border-radius: 4px;-webkit-border-radius: 4px;-moz-border-radius: 4px;-khtml-border-radius: 4px;}</style>
<div class="ultimos">
</div>


Minha questão é que eu gostaria de melhorar esse widget adicionando a função de aparecer o nome do usuário quando passar o mouse por cima do avatar do membro. Alguém sabe como isto seria possível?

Desde já agradeço.

Boa noite.

Tente com este código:

Código:

<style>div.ultimos td.avatar-mini { display: inline-block } div.ultimos td.avatar-mini a { display: none !important; } div.ultimos td.avatar-mini a:hover { display: block !important; }</style>    <script>jQuery(function(){jQuery(document).ready(function(){jQuery.get('/memberlist?mode=lastvisit&order=DESC&submit=Ok&username',function(conectados){jQuery('.ultimos').html(jQuery("td.avatar-mini",conectados));})});});</script>
<div class="ultimos"></div>

Até mais!

Aqui não funcionou shek

Bom dia Shek.
Com o código que você passou não apareceu sequer os avatares dos usuários, somente o título do widget.
Obrigado por tentar ajudar.

Oi, estou postando novamente para notifica-los que não abandonei o tópico e estou aguardando uma solução.

Obrigado.

Bom dia.

Desculpe pela demora na resposta, mas, como eu não tinha conhecimento para fazer isso, eu fui em busca de ajuda internacional. Por gentileza, troque seus códigos por:

Código:

<script>jQuery(function(){jQuery(document).ready(function(){jQuery.get('/memberlist?mode=lastvisit&order=DESC&submit=Ok&username',function(conectados){jQuery('.ultimos').html(jQuery("td.avatar-mini",conectados));jQuery('.ultimos .avatar-mini').each(function() { jQuery(this).append(jQuery(this).find('img')); });})});});</script>

Use este CSS:

Código:

.ultimos .avatar-mini {
  position:relative;
  display:inline-block;
  margin:3px;
}

.ultimos .avatar-mini a {
  color:#FFF;
  padding:3px;
  display:block;
  white-space:nowrap;
  z-index:1;
  position:absolute;
  background-color:#333;
  background-color:rgba(0, 0, 0, 0.8);
  border-radius:3px;
  opacity:0;
  visibility:hidden;
  transition:300ms;
}

.ultimos .avatar-mini:hover a {
  opacity:1;
  visibility:visible;
}

Atenciosamente,
Shek

Olá Shek.
Muito obrigado por responder.

Infelizmente seu código não resultou, não apareceu sequer os avatares dos usuários, somente o título do widget.

Você deve substituir o código pelo que tens atualmente no widget. Se colocar o mesmo código em outro widget de testes, ele não funcionará.

Sim Shek, eu fiz a substituição no widget atual, testei e não resultou. Depois eu retornei ao meu código antigo.

Mas... Ora bolas. Assim como eu, você provavelmente não percebeu a falta do <div class="ultimos"></div> no final do código, não é mesmo?

Realmente eu não tinha visto.

Agora o código até resultou, mas ficou bem diferente do desejado. mostrou apenas os últimos dois membros conectados de forma mal posicionada e com o nome de usuário fixo ao lado, podendo clicar no nome para acessar o perfil. A ideia era só aparecer o nome do usuário ao passar o mouse e que aparecesse muito mais do que apenas os últimos dois conectados.

Mas, o problema é que o script executa uma função de load, então, ele carrega os elementos da página /memberlist?mode=lastvisit&order=DESC&submit=Ok&username Isso quer dizer que, consequentemente, os links vem junto.

A respeito dos nomes, eu não entendi bem. Eles não estão sob os nomes? Usou o mesmo CSS que passei?

Com o meu código atual eu tenho esse efeito:



Meu objetivo é somente adicionar a função de aparecer o nome do usuário ao passar o mouse por cima do avatar.


Com o código que você me passou para o widget o resultado foi o seguinte:




Sim eu estou usando em meu CSS os códigos que você passou.

Mas, eu testei o código antes e funcionou. Tire o CSS desse efeito de sua folha de estilos CSS e no widget, troque o código por este:

Código:

<style>
.ultimos .avatar-mini {
  position:relative;
  display:inline-block;
  margin:3px;
}

.ultimos .avatar-mini a {
  color:#FFF;
  padding:3px;
  display:block;
  white-space:nowrap;
  z-index:1;
  position:absolute;
  background-color:#333;
  background-color:rgba(0, 0, 0, 0.8);
  border-radius:3px;
  opacity:0;
  visibility:hidden;
  transition:300ms;
}

.ultimos .avatar-mini:hover a {
  opacity:1;
  visibility:visible;
}
</style>
<script>jQuery(function(){jQuery(document).ready(function(){jQuery.get('/memberlist?mode=lastvisit&order=DESC&submit=Ok&username',function(conectados){jQuery('.ultimos').html(jQuery("td.avatar-mini",conectados));jQuery('.ultimos .avatar-mini').each(function() { jQuery(this).append(jQuery(this).find('img')); });})});});</script><div class="ultimos"></div>

Agora funcionou perfeitamente Shek! Muito obrigado!

Apenas uma observação, agora está aparecendo os últimos 50 membros conectados, seria possível diminuir para 30?

Bom dia @ShadowPrince!

Apenas alterando o código do nosso amigo @Shek e acrescentando um limite para os avatares:

Código:

<style>
.ultimos .avatar-mini {
  position:relative;
  display:inline-block;
  margin:3px;
}

.ultimos .avatar-mini a {
  color:#FFF;
  padding:3px;
  display:block;
  white-space:nowrap;
  z-index:1;
  position:absolute;
  background-color:#333;
  background-color:rgba(0, 0, 0, 0.8);
  border-radius:3px;
  opacity:0;
  visibility:hidden;
  transition:300ms;
}

.ultimos .avatar-mini:hover a {
  opacity:1;
  visibility:visible;
}
</style>
<script>jQuery(function(){jQuery(document).ready(function(){jQuery.get('/memberlist?mode=lastvisit&order=DESC&submit=Ok&username',function(conectados){jQuery('.ultimos').html(jQuery("td.avatar-mini:lt(30)",conectados));jQuery('.ultimos .avatar-mini').each(function() { jQuery(this).append(jQuery(this).find('img')); });})});});</script><div class="ultimos"></div>

Procure por :lt(30) e altere o número 30 para o número de avatares que deseja estar visível!

Abraços, MateusAnjos.

Olá Mateus, continua aparecendo 50.

Hm... que estranho amigo, eu testei novamente aqui e deu êxito, a proposito, pode me confirmar se adicionou o meu código ou o antigo do Shek? Não consigo visualizar o :lt no código fonte do widget.
Veja, nomeei com apenas um: http://prntscr.com/8sxnay

Troquei o código CSS que o Shek passou por o que tu forneceu.

Hã... poderia tentar só com o meu? Afinal, aquele "meu" código é o do Shek, apenas adicionei o lt! Se não modificar nada, tenho certeza que terá êxito.

Agora estou confuso.

O Shek me passou dois códigos, um para colocar no Widget e outro para colocar na minha Folha de estilo CSS.

O código que você me passou era o código que o Shek solicitou que eu colocasse na minha Folha de estilo CSS mas modificado. O que eu fiz foi substituir no meu CSS o código do Shek por o seu... Não entendo o que quer dizer com "tentar só com o meu".

Bom dia novamente amigo!

Bom, vamos lá? Veja o que o shek disse em sua última postagem:
Tire o CSS desse efeito de sua folha de estilos CSS e no widget,
Ou seja, era para remover o código dele anteriormente!

Em resumo, delete todos os códigos de todo lugar(que fornecemos nesse tópico) e utilize apenas o que eu forneci no widget!!!! Não é para por no CSS, ok? ^^

Certo, realmente eu não estava fazendo corretamente o que o Shek pediu pois não li o "e no widget"  o que causou o meu erro de interpretação.

Seu código está perfeito!

Pode fechar o tópico.