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

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

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 ->   e preencha assim os campos:
Tipo Zona de texto
Nome (À escolha)
Descrição (À escolha)
URL do ícone (À escolha)
Obrigatório o preenchimento Não
Visualização Perfil e Mensagens
Tipo de visualização Ícone
Quem pode modificar o valor do seu conteúdo Moderadores
Exibir este campo para os visitantes tendo ao menos o status Membros
Separador (À 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

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

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 .

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

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.

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

Obrigado!!! Pode fechar! Você é TOP

Tópico resolvido Movido para "Questões resolvidas".