Campo de medalhas com descrição ao passar o mouse

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

Atendido / Resolvido Campo de medalhas com descrição ao passar o mouse

Mensagem por Zênite em 28.01.19 16:02

Detalhes da questão


Endereço do fórum: http://rikudourpg.forumeiros.com/
Versão do fórum: ModernBB

Descrição


Olá meus queridos

Estou tentando instalar o sistema de troféus e medalhas em meu fórum, seguindo esses tópicos:
- https://ajuda.forumeiros.com/t35486-tutorial-criar-campo-premios-para-membros
- https://ajuda.forumeiros.com/t109534-trofeus-e-medalhas

Até então obtive algum sucesso, porém, alguns bugs surgiram. O ícone dos outros campos que aparecem no perfil nas mensagens está expandido, o que não queria que acontecesse, vejam: https://i.imgur.com/77mTy2k.png

O campo "EXP distributiva" e "EXP do personagem" ficou com os ícones grandes, o que não deveria estar acontecendo. Alguém pode me ajudar?

Os códigos usados são esses:

JS:
Código:
(function($) {
  'use strict';
 
  $(function() {
      $('#field_id4 img, .postprofile-info:contains("Troféus & Medalhas") img').each(function() {
        var $this = $(this);
        var $label = $this.next();
 
        $this.replaceWith($('<div>', {
            style: 'background-image: url(' + $this.attr('src') + ')',
            alt: $.trim($label.text())
        }));
     
        $label.remove();
      });
  });
})(jQuery);

CSS:
Código:
#field_id4 br {
    display: none;
}
 
#field_id4 div[alt],
.postprofile-info div[alt] {
    width: 32px;
    height: 32px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}
 
#field_id4 div[alt]:before,
.postprofile-info div[alt]:before {
    content: attr(alt);
    position: absolute;
    top: -100%;
    left: 50%;
    white-space: nowrap;
    transform: translate(-50%);
    background-color: #666;
    color: #fff;
    padding: 0 10px;
    border-radius: 3px;
    user-select: none;
  pointer-events: none;
    opacity: 0;
    line-height: 24px;
    transition: 250ms opacity;
}
 
#field_id4 div[alt]:hover:before,
.postprofile-info div[alt]:hover:before {
    opacity: 1;
}
 
.postprofile-info div[alt] + br { 
  display: none;
}
 
.postprofile-info .label {
  display: block;
  margin-bottom: 10px;
}

Obrigado desde já e até.
Zênite

Zênite
Nível 8

Masculino
Inscrito dia : 18/12/2018
Mensagens : 126
Pontos Ativos : 183

http://rikudourpg.forumeiros.com
  • 0

Atendido / Resolvido Re: Campo de medalhas com descrição ao passar o mouse

Mensagem por Roger123 em 28.01.19 16:34

Olá,
Remova todos os códigos passados pelos tutoriais e siga estes passos:
1- Aceda a: Painel de Controle -> Usuários & Grupos -> Usuários -> Perfis ->  Adicionar e preencha assim os campos:
Tipo Seta curta Zona de texto
Nome Seta curta (À escolha)
Descrição Seta curta (À escolha)
URL do ícone Seta curta (À escolha)
Obrigatório o preenchimento Seta curta Não
Visualização Seta curta Perfil e Mensagens
Tipo de visualização Seta curta Ícone
Quem pode modificar o valor do seu conteúdo Seta curta Moderadores
Exibir este campo para os visitantes tendo ao menos o status Seta curta Membros
Separador Seta curta (À escolha)
Conteúdo padrão:
Código:
[center][table][tr][td class="scrollable-zone"]Sem medalhas[/td][/tr][/table][/center]

2- Aceda a: Painel de Controle -> Módulos -> HTML e Javascript -> Gestão dos códigos Javascript -> Criar um novo javascript -> Investimento em todas as páginas e cole este código:
Código:
               $(function() {
                  var lista_de_medallas = [
                    'https://i62.servimg.com/u/f62/12/23/10/57/blue11.png', //Medalla 1
                    'https://i62.servimg.com/u/f62/12/23/10/57/dark_g11.png',  // Medalla 2
                    'https://i62.servimg.com/u/f62/12/23/10/57/gree11.png', // Medalla 3
                    'https://i62.servimg.com/u/f62/12/23/10/57/orange12.png', // Medalla 4
                    'https://i62.servimg.com/u/f62/12/23/10/57/perp12.png', // Medalla 5
                    'https://i62.servimg.com/u/f62/12/23/10/57/red10.png', // Medalla 6
                  
                  ];
                
                  var titulo_medallas = [
                  
                    'Alcanzaste los 100 Posts',                  // Medalla 1
                    'Alcanzaste los 200 Posts',                  // Medalla 2
                    'Alcanzaste los 500 Posts',                  // Medalla 3
                    'Alcanzaste los 5000 Posts',                 // Medalla 4
                    'Obtuviste 100 Me Gusta',                  // Medalla 5
                    'Compraste 10 o Más Objetos en la Tienda', // Medalla 6
                  
                  ];
                
                  $('.postprofile .scrollable-zone img').each(function() {
                    var a = lista_de_medallas.indexOf( $(this).attr('src') );
                    $(this).attr('title', titulo_medallas[a]);
                  });
                });

Edite o 'https://i.servimg.com/u/f62/12/23/10/57/blue11.png', //Medalla 1 para a imagem que quiser das medalhas.
Para além disso, troque 'Alcanzaste los 100 Posts', // Medalla 1 para a respetiva descrição de cada medalha.

Depois, com o mesmo endereço da imagem, basta aceder a cada perfil e mudar Sem medalhas para:
Código:
[img]Link duma medalha[/img]

Cordialmente,
Roger123


Última edição por Roger123 em 28.01.19 17:16, editado 1 vez(es)
Roger123

Roger123
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 30/06/2018
Mensagens : 1641
Pontos Ativos : 1896

https://todosostemas.forumeiros.com

Atendido / Resolvido Re: Campo de medalhas com descrição ao passar o mouse

Mensagem por Zênite em 28.01.19 17:08

Olá! Fenomenal sua resposta, já fiz tudo, mas a medalha padrão do "Sem Medalha" não aparece. Simplesmente fica vazio...

E o javascript no caso serve para que? Para que as descrições das medalhas apareçam??

Obrigado desde já, até!
Zênite

Zênite
Nível 8

Masculino
Inscrito dia : 18/12/2018
Mensagens : 126
Pontos Ativos : 183

http://rikudourpg.forumeiros.com

Atendido / Resolvido Re: Campo de medalhas com descrição ao passar o mouse

Mensagem por Roger123 em 28.01.19 17:14

O senhor deve ao campo das medalhas (no painel de controle) e clicar em Substituir conteúdo.
@Zênite escreveu:
E o javascript no caso serve para que? Para que as descrições das medalhas apareçam??

Obrigado desde já, até!
Exatamente, o JavaScript serve para a descrição das medalhas aparecer Piscada .
Roger123

Roger123
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 30/06/2018
Mensagens : 1641
Pontos Ativos : 1896

https://todosostemas.forumeiros.com

Atendido / Resolvido Re: Campo de medalhas com descrição ao passar o mouse

Mensagem por Zênite em 28.01.19 17:22

Aaaaaaa certo, funcionou perfeitamente! Vocês são sinistros! Muito obrigado mesmo!

Eu queria que as medalhas ficassem centralizadas, mas acredito que tenha que abrir outro tópico para essa questão, certo?

De qualquer forma, muito obrigado! Esse foi rápido, ein? Boa tarde!!!!!!
Zênite

Zênite
Nível 8

Masculino
Inscrito dia : 18/12/2018
Mensagens : 126
Pontos Ativos : 183

http://rikudourpg.forumeiros.com

Atendido / Resolvido Re: Campo de medalhas com descrição ao passar o mouse

Mensagem por Roger123 em 28.01.19 17:26

Veja se é isto que quer...
Troque para:
Código:
[center][table][tr][td class="scrollable-zone"][center][img]Link duma medalha[/img][/center][/td][/tr][/table][/center]
Fico no aguardo.


Seja bem-vindo ao Fórum dos Fóruns!
Veja aqui alguns links importantes a saber:



Roger123 - Ajudeiro

Campo de medalhas com descrição ao passar o mouse 1406
Roger123

Roger123
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 30/06/2018
Mensagens : 1641
Pontos Ativos : 1896

https://todosostemas.forumeiros.com
  • 0

Atendido / Resolvido Re: Campo de medalhas com descrição ao passar o mouse

Mensagem por Zênite em 28.01.19 17:33

Sim, era isso mesmo! Acabei percebendo que já estava centralizado, engano meu, mil perdões!

Obrigado!!! Pode fechar! Você é TOP
Zênite

Zênite
Nível 8

Masculino
Inscrito dia : 18/12/2018
Mensagens : 126
Pontos Ativos : 183

http://rikudourpg.forumeiros.com

Atendido / Resolvido Re: Campo de medalhas com descrição ao passar o mouse

Mensagem por Roger123 em 28.01.19 17:34

Piscada

Tópico resolvido


Movido para "Questões resolvidas".
Roger123

Roger123
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 30/06/2018
Mensagens : 1641
Pontos Ativos : 1896

https://todosostemas.forumeiros.com

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


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