Efeito de descrição dos ranks

2 participantes

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

Tópico resolvido Efeito de descrição dos ranks

Mensagem por PrisoN†BreaK 30.01.17 19:28

Detalhes da questão


Endereço do fórum: http://easydm.forumeiro.com/
Versão do fórum: PunBB

Descrição


Bom, quero deixa a descrição aparecer, somente quando passar o mouse em cima da imagem dele, como aqui:
https://imgur.com/a/cFKpd
http://bestweb.forumais.com/
PrisoN†BreaK

PrisoN†BreaK
Super Membro

Membro desde : 23/10/2015
Mensagens : 1243
Pontos : 1753

http://brasilplayfreedomofc.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito de descrição dos ranks

Mensagem por Kyo Panda 31.01.17 21:53

Olá,

Vá em Painel de controle Flecha ajudeiros Módulos Flecha ajudeiros HTML & JavaScript Flecha ajudeiros Gestão dos códigos JavaScripts Flecha ajudeiros Criar um novo JavaScript e adicione esse código com Investimento em Nos tópicos:

Código:
/* global jQuery */

(function($) {
  'use strict';

  if (!/^\/t\d+.*/i.test(location.pathname)) {
    return;
  }

  $(function() {
    var $span = $('<span class="fa-useless-rank-hover"></span>');

    $('.user-basic-info span').each(function() {
      var $self = $(this);
      $span.clone().text($self.text()).appendTo($self);
    });
  });
}(jQuery));

Após, vá em Painel de controle Flecha ajudeiros Visualização Flecha ajudeiros Imagens e Cores Flecha ajudeiros Cores Flecha ajudeiros Folha de estilo CSS e adicione o seguinte código ao final da caixa de texto:

Código:
.user-basic-info > span {
  position: relative;
}

.fa-useless-rank-hover {
  background-color: #fff;
  border: 1px #ccc solid;
  display: block;
  padding: 10px 5px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  color: #333;
  text-shadow: none;
  margin-bottom: 0;
  opacity: 0;
  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.2);
  transition: 250ms ease;
  transition-property: opacity, margin-bottom;
}

.fa-useless-rank-hover:after,
.fa-useless-rank-hover:before {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.fa-useless-rank-hover:after {
  border-color: transparent;
  border-top-color: #fff;
  border-width: 10px;
  margin-left: -10px;
}

.fa-useless-rank-hover:before {
  border-color: transparent;
  border-top-color: #ccc;
  border-width: 11px;
  margin-left: -11px;
}

.user-basic-info > span:hover .fa-useless-rank-hover {
  opacity: 1;
  margin-bottom: 15px;
}

o7

---

Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre códigos'
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito de descrição dos ranks

Mensagem por PrisoN†BreaK 31.01.17 22:18

A descrição do rank, ainda continua aparecendo, não fica ocultada como no do bestweb, e teria também como você arredondar a borda.

Veja como está: http://easydm.forumeiro.com/t269-sugestoes-e-melhorias-leia
PrisoN†BreaK

PrisoN†BreaK
Super Membro

Membro desde : 23/10/2015
Mensagens : 1243
Pontos : 1753

http://brasilplayfreedomofc.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito de descrição dos ranks

Mensagem por Kyo Panda 31.01.17 22:53

PrisoN†BreaK escreveu:Endereço do fórum: http://exercito-bpf.forumeiro.com/

PrisoN†BreaK escreveu:Veja como está: http://easydm.forumeiro.com/t269-sugestoes-e-melhorias-leia

Fórum errado = Código errado. ¯\_(ツ)_/¯

---

Troque o JS por esse:

Código:
/* global jQuery */

(function($) {
  'use strict';

  if (!/^\/t\d+.*/i.test(location.pathname)) {
    return;
  }

  $(function() {
    $('.user-basic-info > img').hover(function() {
      $(this).parent().toggleClass('fa-useless-rank-hover');
    });
  });
}(jQuery));

E o CSS por esse:

Código:
.user-basic-info {
  position: relative;
}

.user-basic-info > span {
  background-color: #fff;
  border: 1px #ccc solid;
  display: block;
  padding: 10px 5px;
  position: absolute;
  left: 20px;
  right: 20px;
  color: #333;
  text-shadow: none;
  margin-top: -20px;
  opacity: 0;
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2);
  transition: 250ms ease;
  transition-property: opacity, margin-top;
}

.user-basic-info > span:after,
.user-basic-info > span:before {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.user-basic-info > span:after {
  border-color: transparent;
  border-top-color: #fff;
  border-width: 10px;
  margin-left: -10px;
}

.user-basic-info > span:before {
  border-color: transparent;
  border-top-color: #a9a9a9;
  border-width: 11px;
  margin-left: -11px;
}

.user-basic-info.fa-useless-rank-hover > span {
  opacity: 1;
  margin-top: -35px;
}

o/
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito de descrição dos ranks

Mensagem por PrisoN†BreaK 31.01.17 23:09

Tem como arredondar a borda dele?, e tira esse efeito de negrito?

@EDIT

O efeito na verdade é esse: http://bestweb.forumais.com/
Que no caso, ele substitui aquele balão padrão de quando passa o mouse em títulos por este atual, da bestweb, tem como coloca este efeito? É o mesmo efeito do rank '~'
PrisoN†BreaK

PrisoN†BreaK
Super Membro

Membro desde : 23/10/2015
Mensagens : 1243
Pontos : 1753

http://brasilplayfreedomofc.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito de descrição dos ranks

Mensagem por PrisoN†BreaK 03.02.17 12:26

UP
PrisoN†BreaK

PrisoN†BreaK
Super Membro

Membro desde : 23/10/2015
Mensagens : 1243
Pontos : 1753

http://brasilplayfreedomofc.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito de descrição dos ranks

Mensagem por Kyo Panda 03.02.17 19:03

Eu tentei ajustar o CSS do rank e não deu muito certo.

Vamos tentar outra rota. Peço que remova o CSS do rank.
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito de descrição dos ranks

Mensagem por PrisoN†BreaK 04.02.17 14:19

Pronto, retirei o código
PrisoN†BreaK

PrisoN†BreaK
Super Membro

Membro desde : 23/10/2015
Mensagens : 1243
Pontos : 1753

http://brasilplayfreedomofc.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito de descrição dos ranks

Mensagem por Kyo Panda 04.02.17 14:37

Agora siga esse tutorial: https://ajuda.forumeiros.com/t80634-tutorial-tooltip-no-forum

Quando o fizer, dê um toque para acertarmos o visual. o/
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito de descrição dos ranks

Mensagem por PrisoN†BreaK 04.02.17 17:23

pronto, coloquei.
PrisoN†BreaK

PrisoN†BreaK
Super Membro

Membro desde : 23/10/2015
Mensagens : 1243
Pontos : 1753

http://brasilplayfreedomofc.forumeiros.com/forum

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Efeito de descrição dos ranks

Mensagem por Kyo Panda 04.02.17 17:56

O senhor chegou a aplicar o alteração? Não encontrei as tags do tutorial no seu HTML.
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito de descrição dos ranks

Mensagem por PrisoN†BreaK 04.02.17 18:07

Sim, apliquei, e ele está ativo.
PrisoN†BreaK

PrisoN†BreaK
Super Membro

Membro desde : 23/10/2015
Mensagens : 1243
Pontos : 1753

http://brasilplayfreedomofc.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito de descrição dos ranks

Mensagem por Kyo Panda 04.02.17 18:25

Estava olhando para o fórum errado novamente... Alterei o tópico. >.>

---

Adicione ao CSS:

Código:
.tipsy {
  padding: 5px 5px 10px;
}

.tipsy-inner {
  background-color: #fff;
  color: #333;
  font-size: 14px;
  padding: 8px 10px;
}

.tipsy-arrow {
  top: 37px;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-top-color: #fff;
  border-width: 8px;
  margin-left: -13px;
}

.user-basic-info > span {
  display: none;
}

E troque essa parte do tutorial:

Código:
<script type='text/javascript'>
  $(function() {
    $('.tool-tip').tipsy({fade: true, gravity: 's'});
  });
</script>

Por:

Código:
<script type='text/javascript'>
  $(function() {
    $('.tool-tip').tipsy({fade: true, gravity: 's', opacity: 1});
  });
</script>

Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito de descrição dos ranks

Mensagem por PrisoN†BreaK 04.02.17 19:18

Na parte dos ranks ficou sem resultado, só fez ocultar os nomes. Teria como você também coloca uma cor mais branca no balão e preta nos nomes.
PrisoN†BreaK

PrisoN†BreaK
Super Membro

Membro desde : 23/10/2015
Mensagens : 1243
Pontos : 1753

http://brasilplayfreedomofc.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito de descrição dos ranks

Mensagem por Kyo Panda 04.02.17 19:51

O código CSS do Tipsy está sobrescrevendo as alterações...

Tente trocar o CSS por esse:

Código:
body .tipsy {
  padding: 5px 5px 10px;
}
 
body .tipsy-inner {
  background-color: #fff;
  color: #000;
  font-size: 14px;
  padding: 8px 10px;
}
 
body .tipsy-arrow {
  top: 37px;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-top-color: #fff;
  border-width: 8px;
  margin-left: -13px;
}
 
.user-basic-info > span {
  display: none;
}
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito de descrição dos ranks

Mensagem por PrisoN†BreaK 05.02.17 0:31

Ainda sem resultado nas descrições dos ranks
PrisoN†BreaK

PrisoN†BreaK
Super Membro

Membro desde : 23/10/2015
Mensagens : 1243
Pontos : 1753

http://brasilplayfreedomofc.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito de descrição dos ranks

Mensagem por Kyo Panda 05.02.17 0:46

O senhor marcou o script com Investimento em Todas as páginas? Pois ele não está sendo carregado na tela de tópico.

Mas ainda assim, troque o CSS:

Código:
body .tipsy {
    padding: 5px 5px 10px
}

body .tipsy-inner {
    background-color: #fff;
    color: #000;
    font-size: 14px;
    padding: 8px 10px;
    position: relative;
}

body .tipsy-inner:after {
   top: 100%;
   left: 50%;
   border: solid transparent;
   content: " ";
   height: 0;
   width: 0;
   position: absolute;
   pointer-events: none;
   border-color: rgba(255, 255, 255, 0);
   border-top-color: #fff;
   border-width: 8px;
   margin-left: -8px;
}

Para corrigir um problema com o posicionamento das setas.
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito de descrição dos ranks

Mensagem por PrisoN†BreaK 05.02.17 2:23

Funcionou, porém a descrição agora ficou visível.
PrisoN†BreaK

PrisoN†BreaK
Super Membro

Membro desde : 23/10/2015
Mensagens : 1243
Pontos : 1753

http://brasilplayfreedomofc.forumeiros.com/forum

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Efeito de descrição dos ranks

Mensagem por Kyo Panda 05.02.17 2:24

Esqueci de passar essa parte no código acima:

Código:
.user-basic-info > span {
  display: none;
}

Perdão. :/
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito de descrição dos ranks

Mensagem por PrisoN†BreaK 05.02.17 3:03

Resolvido, muito obrigado amigo.
PrisoN†BreaK

PrisoN†BreaK
Super Membro

Membro desde : 23/10/2015
Mensagens : 1243
Pontos : 1753

http://brasilplayfreedomofc.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito de descrição dos ranks

Mensagem por Kyo Panda 05.02.17 10:00

efeito - Efeito de descrição dos ranks Symbol10 Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

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