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

5 participantes

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

Tópico resolvido Personalização do widget "ÚLTIMOS MEMBROS CONECTADOS"

Mensagem por ShadowPrince 05.10.15 21:07

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

ShadowPrince
****

Membro desde : 30/03/2011
Mensagens : 225
Pontos : 360

http://clanowners.forumeiros.com/

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Personalização do widget "ÚLTIMOS MEMBROS CONECTADOS"

Mensagem por Shek 06.10.15 4:50

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

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalização do widget "ÚLTIMOS MEMBROS CONECTADOS"

Mensagem por Japa.Original 06.10.15 5:18

Aqui não funcionou shek
Japa.Original

Japa.Original
Novo Membro

Membro desde : 06/10/2015
Mensagens : 2
Pontos : 2

http://barao.livreforum.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalização do widget "ÚLTIMOS MEMBROS CONECTADOS"

Mensagem por ShadowPrince 06.10.15 12:45

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

ShadowPrince
****

Membro desde : 30/03/2011
Mensagens : 225
Pontos : 360

http://clanowners.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalização do widget "ÚLTIMOS MEMBROS CONECTADOS"

Mensagem por ShadowPrince 12.10.15 15:13

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

Obrigado.
ShadowPrince

ShadowPrince
****

Membro desde : 30/03/2011
Mensagens : 225
Pontos : 360

http://clanowners.forumeiros.com/

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Personalização do widget "ÚLTIMOS MEMBROS CONECTADOS"

Mensagem por Shek 16.10.15 13:07

Bom dia.

Desculpe pela demora na resposta, mas, como eu não tinha conhecimento para fazer isso, eu fui em busca de ajuda internacional. Feliz 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 King
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalização do widget "ÚLTIMOS MEMBROS CONECTADOS"

Mensagem por ShadowPrince 16.10.15 17:27

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

ShadowPrince
****

Membro desde : 30/03/2011
Mensagens : 225
Pontos : 360

http://clanowners.forumeiros.com/

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Personalização do widget "ÚLTIMOS MEMBROS CONECTADOS"

Mensagem por Shek 16.10.15 17:40

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

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalização do widget "ÚLTIMOS MEMBROS CONECTADOS"

Mensagem por ShadowPrince 16.10.15 17:43

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

ShadowPrince
****

Membro desde : 30/03/2011
Mensagens : 225
Pontos : 360

http://clanowners.forumeiros.com/

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Personalização do widget "ÚLTIMOS MEMBROS CONECTADOS"

Mensagem por Shek 16.10.15 17:50

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? Suspeito... Suspeito...
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalização do widget "ÚLTIMOS MEMBROS CONECTADOS"

Mensagem por ShadowPrince 16.10.15 17:59

Realmente eu não tinha visto. Louco

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.

ShadowPrince

ShadowPrince
****

Membro desde : 30/03/2011
Mensagens : 225
Pontos : 360

http://clanowners.forumeiros.com/

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Personalização do widget "ÚLTIMOS MEMBROS CONECTADOS"

Mensagem por Shek 16.10.15 18:16

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

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

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalização do widget "ÚLTIMOS MEMBROS CONECTADOS"

Mensagem por ShadowPrince 16.10.15 18:29

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

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

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:

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


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

ShadowPrince
****

Membro desde : 30/03/2011
Mensagens : 225
Pontos : 360

http://clanowners.forumeiros.com/

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Personalização do widget "ÚLTIMOS MEMBROS CONECTADOS"

Mensagem por Shek 18.10.15 6:01

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

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalização do widget "ÚLTIMOS MEMBROS CONECTADOS"

Mensagem por ShadowPrince 19.10.15 12:24

Agora funcionou perfeitamente Shek! Muito obrigado! Tive uma idéia!

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

ShadowPrince
****

Membro desde : 30/03/2011
Mensagens : 225
Pontos : 360

http://clanowners.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalização do widget "ÚLTIMOS MEMBROS CONECTADOS"

Mensagem por MateusAnjosV 19.10.15 13:10

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>
Seta Procure por :lt(30) e altere o número 30 para o número de avatares que deseja estar visível!

Abraços, MateusAnjos.

Feliz
MateusAnjosV

MateusAnjosV
Super Membro

Membro desde : 16/10/2015
Mensagens : 1718
Pontos : 2373

http://holder.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalização do widget "ÚLTIMOS MEMBROS CONECTADOS"

Mensagem por ShadowPrince 19.10.15 13:32

Olá Mateus, continua aparecendo 50. Triste
ShadowPrince

ShadowPrince
****

Membro desde : 30/03/2011
Mensagens : 225
Pontos : 360

http://clanowners.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalização do widget "ÚLTIMOS MEMBROS CONECTADOS"

Mensagem por MateusAnjosV 19.10.15 13:36

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
MateusAnjosV

MateusAnjosV
Super Membro

Membro desde : 16/10/2015
Mensagens : 1718
Pontos : 2373

http://holder.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalização do widget "ÚLTIMOS MEMBROS CONECTADOS"

Mensagem por ShadowPrince 19.10.15 13:41

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

ShadowPrince
****

Membro desde : 30/03/2011
Mensagens : 225
Pontos : 360

http://clanowners.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalização do widget "ÚLTIMOS MEMBROS CONECTADOS"

Mensagem por MateusAnjosV 19.10.15 13:45

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

MateusAnjosV
Super Membro

Membro desde : 16/10/2015
Mensagens : 1718
Pontos : 2373

http://holder.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalização do widget "ÚLTIMOS MEMBROS CONECTADOS"

Mensagem por ShadowPrince 19.10.15 14:15

Agora estou confuso. Louco

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

ShadowPrince
****

Membro desde : 30/03/2011
Mensagens : 225
Pontos : 360

http://clanowners.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalização do widget "ÚLTIMOS MEMBROS CONECTADOS"

Mensagem por MateusAnjosV 19.10.15 14:32

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? ^^
MateusAnjosV

MateusAnjosV
Super Membro

Membro desde : 16/10/2015
Mensagens : 1718
Pontos : 2373

http://holder.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalização do widget "ÚLTIMOS MEMBROS CONECTADOS"

Mensagem por ShadowPrince 19.10.15 15:34

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

Pode fechar o tópico.
ShadowPrince

ShadowPrince
****

Membro desde : 30/03/2011
Mensagens : 225
Pontos : 360

http://clanowners.forumeiros.com/

Ir para o topo Ir para baixo

Ajudeiro

Tópico resolvido Re: Personalização do widget "ÚLTIMOS MEMBROS CONECTADOS"

Mensagem por Fraise 19.10.15 15:37

Personalização do widget "ÚLTIMOS MEMBROS CONECTADOS" Symbol10 Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".
Fraise

Fraise
Ajudeiro
Ajudeiro

Membro desde : 26/06/2015
Mensagens : 6558
Pontos : 8045

https://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

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