Efeito de descrição dos ranks

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

Resolvido Efeito de descrição dos ranks

Mensagem por PrisoN†BreaK em 30/01/17, 05:28 pm

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:
http://imgur.com/a/cFKpd
http://bestweb.forumais.com/
avatar

PrisoN†BreaK
Membro do Fórum

Masculino
Inscrito dia : 23/10/2015
Mensagens : 1236
Pontos Ativos : 1740

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

Resolvido Re: Efeito de descrição dos ranks

Mensagem por Kyo Panda em 31/01/17, 07:53 pm

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'
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

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

Resolvido Re: Efeito de descrição dos ranks

Mensagem por PrisoN†BreaK em 31/01/17, 08:18 pm

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
avatar

PrisoN†BreaK
Membro do Fórum

Masculino
Inscrito dia : 23/10/2015
Mensagens : 1236
Pontos Ativos : 1740

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

Resolvido Re: Efeito de descrição dos ranks

Mensagem por Kyo Panda em 31/01/17, 08:53 pm

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/
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

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

Resolvido Re: Efeito de descrição dos ranks

Mensagem por PrisoN†BreaK em 31/01/17, 09:09 pm

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 '~'
avatar

PrisoN†BreaK
Membro do Fórum

Masculino
Inscrito dia : 23/10/2015
Mensagens : 1236
Pontos Ativos : 1740

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

Resolvido Re: Efeito de descrição dos ranks

Mensagem por PrisoN†BreaK em 03/02/17, 10:26 am

UP
avatar

PrisoN†BreaK
Membro do Fórum

Masculino
Inscrito dia : 23/10/2015
Mensagens : 1236
Pontos Ativos : 1740

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

Resolvido Re: Efeito de descrição dos ranks

Mensagem por Kyo Panda em 03/02/17, 05:03 pm

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

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

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

Resolvido Re: Efeito de descrição dos ranks

Mensagem por PrisoN†BreaK em 04/02/17, 12:19 pm

Pronto, retirei o código
avatar

PrisoN†BreaK
Membro do Fórum

Masculino
Inscrito dia : 23/10/2015
Mensagens : 1236
Pontos Ativos : 1740

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

Resolvido Re: Efeito de descrição dos ranks

Mensagem por Kyo Panda em 04/02/17, 12:37 pm

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

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

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

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

Resolvido Re: Efeito de descrição dos ranks

Mensagem por PrisoN†BreaK em 04/02/17, 03:23 pm

pronto, coloquei.
avatar

PrisoN†BreaK
Membro do Fórum

Masculino
Inscrito dia : 23/10/2015
Mensagens : 1236
Pontos Ativos : 1740

Ver perfil do usuário http://brasilplayfreedomofc.forumeiros.com/forum
  • 0

Resolvido Re: Efeito de descrição dos ranks

Mensagem por Kyo Panda em 04/02/17, 03:56 pm

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

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

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

Resolvido Re: Efeito de descrição dos ranks

Mensagem por PrisoN†BreaK em 04/02/17, 04:07 pm

Sim, apliquei, e ele está ativo.
avatar

PrisoN†BreaK
Membro do Fórum

Masculino
Inscrito dia : 23/10/2015
Mensagens : 1236
Pontos Ativos : 1740

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

Resolvido Re: Efeito de descrição dos ranks

Mensagem por Kyo Panda em 04/02/17, 04:25 pm

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>

avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

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

Resolvido Re: Efeito de descrição dos ranks

Mensagem por PrisoN†BreaK em 04/02/17, 05:18 pm

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

PrisoN†BreaK
Membro do Fórum

Masculino
Inscrito dia : 23/10/2015
Mensagens : 1236
Pontos Ativos : 1740

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

Resolvido Re: Efeito de descrição dos ranks

Mensagem por Kyo Panda em 04/02/17, 05:51 pm

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;
}
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

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

Resolvido Re: Efeito de descrição dos ranks

Mensagem por PrisoN†BreaK em 04/02/17, 10:31 pm

Ainda sem resultado nas descrições dos ranks
avatar

PrisoN†BreaK
Membro do Fórum

Masculino
Inscrito dia : 23/10/2015
Mensagens : 1236
Pontos Ativos : 1740

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

Resolvido Re: Efeito de descrição dos ranks

Mensagem por Kyo Panda em 04/02/17, 10:46 pm

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

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

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

Resolvido Re: Efeito de descrição dos ranks

Mensagem por PrisoN†BreaK em 05/02/17, 12:23 am

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

PrisoN†BreaK
Membro do Fórum

Masculino
Inscrito dia : 23/10/2015
Mensagens : 1236
Pontos Ativos : 1740

Ver perfil do usuário http://brasilplayfreedomofc.forumeiros.com/forum
  • 0

Resolvido Re: Efeito de descrição dos ranks

Mensagem por Kyo Panda em 05/02/17, 12:24 am

Esqueci de passar essa parte no código acima:

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

Perdão. :/
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

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

Resolvido Re: Efeito de descrição dos ranks

Mensagem por PrisoN†BreaK em 05/02/17, 01:03 am

Resolvido, muito obrigado amigo.
avatar

PrisoN†BreaK
Membro do Fórum

Masculino
Inscrito dia : 23/10/2015
Mensagens : 1236
Pontos Ativos : 1740

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

Resolvido Re: Efeito de descrição dos ranks

Mensagem por Kyo Panda em 05/02/17, 08:00 am

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

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

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

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

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum