Troféus e medalhas

Detalhes da questão

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

Descrição

Bom Eu quero Fazer um Quadro e Dentro desse Quadro estrá as Medalhas Conquistada do Membro,e Quando Passar o Mouse em Cima do Icon da Imagem Aparecerá o nome da Conquista daquele Icon. Desse Jeito aqui - https://i.imgur.com/XqsuSVH.png
Vir Uns TÓPICOS Mais não é do Jeito que eu Quero,Testei uns e Tals,mais Ficou com o Nome do Lado e a Imagem no Outro Lado não ficou do jeito da Imagem acima

Obs. Lembrando que eu quero A Forma dos Icones Igual a Imagem 3 em Cima 3 Em Baixo de 3 em 3

Agradeço desde Já.

O senhor poderia criar os ícones da maneira convencional (fica o nome de um lado e o ícone do outro)? Assim poderemos bolar um código com o efeito.

Eu quero tipo Assim - 3 Icones TIPO - 1 2 3 e em Baixa tem mais 3 Os Montinho de 3 em 3 4 5 6
E quando passar o Mouse em Cima do Icone Aparecerá o Nome daquele Icone

Eu não Entendi isso - "O senhor poderia criar os ícones da maneira convencional"
Como assim Criar os Icones?
Desculpes Por não entender oque o Senhor quer,e que eu sou um Pouco Dificil de Entender as Coisas.

Facilitemos então. Siga esse tutorial: https://ajuda.forumeiros.com/t35486-tutorial-criar-campo-premios-para-membros

Quando for editar o perfil do membro para lhe atribuir as medalhas, coloque como:

Código:

[img]link da imagem 1[/img][b]Nome da caixinha 1[/b]
[img]link da imagem 2[/img][b]Nome da caixinha 2[/b]
[img]link da imagem 3[/img][b]Nome da caixinha 3[/b]

Assim que o fizer, nos avise para que possamos criar o efeito.

Prontinho,Ta feito

Poderia definir a visualização das medalhas para convidados e postar o link de qual usuário o senhor colocou as medalhas?

Vi que o senhor criou vários campos de perfil, um para cada imagem. No caso o senhor precisaria criar apenas 1 campo de perfil e todas adicionar as medalhas nele. Poderia edita-lo, por favor?

Prontinho,Editei
Desculpes ai pelo meu Erro, Com disse "Errar é Humano" Rs

Quase lá!

Algumas tags de imagens estão quebradas no perfil do membro:

Código:

[img]http://exemplo.com/link-da-imagem.jpg][b]Nome[/b]

Elas deveriam estar:

Código:

[img]http://exemplo.com/link-da-imagem.jpg[/img][b]Nome[/b]

Poderia corrigi-las?

Corrigidas!

Adicione a um novo Javascript com investimento em todos os tópicos:

Código:

(function($) {
   'use strict';
   
   $(function() {
      $('#field_id4 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);

E ao CSS:

Código:

#field_id4 br {
    display: none;
}

#field_id4 div[style] {
    width: 32px;
    height: 32px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

#field_id4 div[style]: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;
    opacity: 0;
    transition: 250ms opacity;
}

#field_id4 div[style]:hover:before {
    opacity: 1;
}

Mano,Eu queria isso no Post no Tópico,Olha como Ficou - https://i.imgur.com/IVkblte.png,E eu quero Dentro da Caixinha Desse Geito - https://imgur.com/XqsuSVH

Bem, o senhor não tinha ativado eles nos tópicos...

Troque o 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;
}

E o 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);

o/

Ficou TOP,Muito Obrigado