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

Ir para baixo

Tópico resolvido Campo de medalhas com descrição ao passar o mouse

Mensagem por Zênite 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
****

Membro desde : 18/12/2018
Mensagens : 218
Pontos : 316

https://fanttasia.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Campo de medalhas com descrição ao passar o mouse

Mensagem por Convidado 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)
Anonymous
Convidado
Convidado


Ir para o topo Ir para baixo

Tópico resolvido Re: Campo de medalhas com descrição ao passar o mouse

Mensagem por Zênite 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
****

Membro desde : 18/12/2018
Mensagens : 218
Pontos : 316

https://fanttasia.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Campo de medalhas com descrição ao passar o mouse

Mensagem por Convidado 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 .
Anonymous
Convidado
Convidado


Ir para o topo Ir para baixo

Tópico resolvido Re: Campo de medalhas com descrição ao passar o mouse

Mensagem por Zênite 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
****

Membro desde : 18/12/2018
Mensagens : 218
Pontos : 316

https://fanttasia.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Campo de medalhas com descrição ao passar o mouse

Mensagem por Convidado 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.
Anonymous
Convidado
Convidado


Ir para o topo Ir para baixo

Tópico resolvido Re: Campo de medalhas com descrição ao passar o mouse

Mensagem por Zênite 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
****

Membro desde : 18/12/2018
Mensagens : 218
Pontos : 316

https://fanttasia.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Campo de medalhas com descrição ao passar o mouse

Mensagem por Convidado 28.01.19 17:34

Piscada

Tópico resolvido


Movido para "Questões resolvidas".
Anonymous
Convidado
Convidado


Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos