Troféus e medalhas

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

Atendido / Resolvido Troféus e medalhas

Mensagem por MtX em 24.07.17 16:54

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


Última edição por MtX em 25.07.17 17:48, editado 2 vez(es) (Razão : Errei a Versão do Fórum)
MtX

MtX
Nível 5

Masculino
Inscrito dia : 26/06/2017
Mensagens : 41
Pontos Ativos : 64

Ver perfil do usuário http://brasilprojectplay.forumeiros.com

Atendido / Resolvido Re: Troféus e medalhas

Mensagem por Kyo Panda em 24.07.17 17:29

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.
Kyo Panda

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4641
Pontos Ativos : 5934

Ver perfil do usuário https://ajuda.forumeiros.com

Atendido / Resolvido Re: Troféus e medalhas

Mensagem por MtX em 24.07.17 18:20

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

MtX
Nível 5

Masculino
Inscrito dia : 26/06/2017
Mensagens : 41
Pontos Ativos : 64

Ver perfil do usuário http://brasilprojectplay.forumeiros.com

Atendido / Resolvido Re: Troféus e medalhas

Mensagem por Kyo Panda em 24.07.17 18:36

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.
Kyo Panda

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4641
Pontos Ativos : 5934

Ver perfil do usuário https://ajuda.forumeiros.com

Atendido / Resolvido Re: Troféus e medalhas

Mensagem por MtX em 24.07.17 19:01

Prontinho,Ta feito
MtX

MtX
Nível 5

Masculino
Inscrito dia : 26/06/2017
Mensagens : 41
Pontos Ativos : 64

Ver perfil do usuário http://brasilprojectplay.forumeiros.com

Atendido / Resolvido Re: Troféus e medalhas

Mensagem por Kyo Panda em 24.07.17 19:10

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

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4641
Pontos Ativos : 5934

Ver perfil do usuário https://ajuda.forumeiros.com

Atendido / Resolvido Re: Troféus e medalhas

Mensagem por Kyo Panda em 24.07.17 19:59

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?
Kyo Panda

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4641
Pontos Ativos : 5934

Ver perfil do usuário https://ajuda.forumeiros.com

Atendido / Resolvido Re: Troféus e medalhas

Mensagem por MtX em 24.07.17 20:10

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

MtX
Nível 5

Masculino
Inscrito dia : 26/06/2017
Mensagens : 41
Pontos Ativos : 64

Ver perfil do usuário http://brasilprojectplay.forumeiros.com

Atendido / Resolvido Re: Troféus e medalhas

Mensagem por Kyo Panda em 24.07.17 20:18

Quase lá! Muito feliz

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?
Kyo Panda

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4641
Pontos Ativos : 5934

Ver perfil do usuário https://ajuda.forumeiros.com

Atendido / Resolvido Re: Troféus e medalhas

Mensagem por MtX em 24.07.17 20:29

Corrigidas!
MtX

MtX
Nível 5

Masculino
Inscrito dia : 26/06/2017
Mensagens : 41
Pontos Ativos : 64

Ver perfil do usuário http://brasilprojectplay.forumeiros.com

Atendido / Resolvido Re: Troféus e medalhas

Mensagem por Kyo Panda em 25.07.17 13:30

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;
}
Kyo Panda

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4641
Pontos Ativos : 5934

Ver perfil do usuário https://ajuda.forumeiros.com

Atendido / Resolvido Re: Troféus e medalhas

Mensagem por MtX em 25.07.17 15:00

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
MtX

MtX
Nível 5

Masculino
Inscrito dia : 26/06/2017
Mensagens : 41
Pontos Ativos : 64

Ver perfil do usuário http://brasilprojectplay.forumeiros.com

Atendido / Resolvido Re: Troféus e medalhas

Mensagem por Kyo Panda em 25.07.17 17:19

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/
Kyo Panda

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4641
Pontos Ativos : 5934

Ver perfil do usuário https://ajuda.forumeiros.com

Atendido / Resolvido Re: Troféus e medalhas

Mensagem por MtX em 25.07.17 17:45

Ficou TOP,Muito Obrigado Muito feliz Eu amo você
MtX

MtX
Nível 5

Masculino
Inscrito dia : 26/06/2017
Mensagens : 41
Pontos Ativos : 64

Ver perfil do usuário http://brasilprojectplay.forumeiros.com

Atendido / Resolvido Re: Troféus e medalhas

Mensagem por Harleen em 25.07.17 17:50

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.
Harleen

Harleen
Membro do Fórum

Feminino
Inscrito dia : 09/07/2012
Mensagens : 1696
Pontos Ativos : 2245

Ver perfil do usuário http://master-publicitario.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