Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Acesso rápido

Fóruns de suporte oficiais
Conectar-se

Esqueci minha senha

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Quem está conectado
169 usuários online :: 3 usuários cadastrados, Nenhum Invisível e 166 Visitantes :: 1 Motor de busca

PESS_dodo, Railison Ramon, Shek Crowley

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez 2009 - 15:05

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

PrisoN†BreaK
Membro do Fórum

Masculino
Inscrito dia : 23/10/2015
Mensagens : 1095
Pontos Ativos : 2093

http://brasilplayfreedomofc.forumeiros.com/forum

Resolvido Re: Efeito de descrição dos ranks

Mensagem por Kyo Panda em Ter 31 Jan 2017 - 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'
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3095
Pontos Ativos : 6391

http://ajuda.forumeiros.com

Resolvido Re: Efeito de descrição dos ranks

Mensagem por PrisoN†BreaK em Ter 31 Jan 2017 - 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
avatar

PrisoN†BreaK
Membro do Fórum

Masculino
Inscrito dia : 23/10/2015
Mensagens : 1095
Pontos Ativos : 2093

http://brasilplayfreedomofc.forumeiros.com/forum

Resolvido Re: Efeito de descrição dos ranks

Mensagem por Kyo Panda em Ter 31 Jan 2017 - 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/


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3095
Pontos Ativos : 6391

http://ajuda.forumeiros.com

Resolvido Re: Efeito de descrição dos ranks

Mensagem por PrisoN†BreaK em Ter 31 Jan 2017 - 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 '~'
avatar

PrisoN†BreaK
Membro do Fórum

Masculino
Inscrito dia : 23/10/2015
Mensagens : 1095
Pontos Ativos : 2093

http://brasilplayfreedomofc.forumeiros.com/forum

Resolvido Re: Efeito de descrição dos ranks

Mensagem por PrisoN†BreaK em Sex 3 Fev 2017 - 12:26

UP
avatar

PrisoN†BreaK
Membro do Fórum

Masculino
Inscrito dia : 23/10/2015
Mensagens : 1095
Pontos Ativos : 2093

http://brasilplayfreedomofc.forumeiros.com/forum

Resolvido Re: Efeito de descrição dos ranks

Mensagem por Kyo Panda em Sex 3 Fev 2017 - 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.


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3095
Pontos Ativos : 6391

http://ajuda.forumeiros.com

Resolvido Re: Efeito de descrição dos ranks

Mensagem por PrisoN†BreaK em Sab 4 Fev 2017 - 14:19

Pronto, retirei o código
avatar

PrisoN†BreaK
Membro do Fórum

Masculino
Inscrito dia : 23/10/2015
Mensagens : 1095
Pontos Ativos : 2093

http://brasilplayfreedomofc.forumeiros.com/forum

Resolvido Re: Efeito de descrição dos ranks

Mensagem por Kyo Panda em Sab 4 Fev 2017 - 14:37

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

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


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3095
Pontos Ativos : 6391

http://ajuda.forumeiros.com

Resolvido Re: Efeito de descrição dos ranks

Mensagem por PrisoN†BreaK em Sab 4 Fev 2017 - 17:23

pronto, coloquei.
avatar

PrisoN†BreaK
Membro do Fórum

Masculino
Inscrito dia : 23/10/2015
Mensagens : 1095
Pontos Ativos : 2093

http://brasilplayfreedomofc.forumeiros.com/forum
  • 0

Resolvido Re: Efeito de descrição dos ranks

Mensagem por Kyo Panda em Sab 4 Fev 2017 - 17:56

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


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3095
Pontos Ativos : 6391

http://ajuda.forumeiros.com

Resolvido Re: Efeito de descrição dos ranks

Mensagem por PrisoN†BreaK em Sab 4 Fev 2017 - 18:07

Sim, apliquei, e ele está ativo.
avatar

PrisoN†BreaK
Membro do Fórum

Masculino
Inscrito dia : 23/10/2015
Mensagens : 1095
Pontos Ativos : 2093

http://brasilplayfreedomofc.forumeiros.com/forum

Resolvido Re: Efeito de descrição dos ranks

Mensagem por Kyo Panda em Sab 4 Fev 2017 - 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>



Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3095
Pontos Ativos : 6391

http://ajuda.forumeiros.com

Resolvido Re: Efeito de descrição dos ranks

Mensagem por PrisoN†BreaK em Sab 4 Fev 2017 - 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.
avatar

PrisoN†BreaK
Membro do Fórum

Masculino
Inscrito dia : 23/10/2015
Mensagens : 1095
Pontos Ativos : 2093

http://brasilplayfreedomofc.forumeiros.com/forum

Resolvido Re: Efeito de descrição dos ranks

Mensagem por Kyo Panda em Sab 4 Fev 2017 - 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;
}


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3095
Pontos Ativos : 6391

http://ajuda.forumeiros.com

Resolvido Re: Efeito de descrição dos ranks

Mensagem por PrisoN†BreaK em Dom 5 Fev 2017 - 0:31

Ainda sem resultado nas descrições dos ranks
avatar

PrisoN†BreaK
Membro do Fórum

Masculino
Inscrito dia : 23/10/2015
Mensagens : 1095
Pontos Ativos : 2093

http://brasilplayfreedomofc.forumeiros.com/forum

Resolvido Re: Efeito de descrição dos ranks

Mensagem por Kyo Panda em Dom 5 Fev 2017 - 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.


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3095
Pontos Ativos : 6391

http://ajuda.forumeiros.com

Resolvido Re: Efeito de descrição dos ranks

Mensagem por PrisoN†BreaK em Dom 5 Fev 2017 - 2:23

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

PrisoN†BreaK
Membro do Fórum

Masculino
Inscrito dia : 23/10/2015
Mensagens : 1095
Pontos Ativos : 2093

http://brasilplayfreedomofc.forumeiros.com/forum
  • 0

Resolvido Re: Efeito de descrição dos ranks

Mensagem por Kyo Panda em Dom 5 Fev 2017 - 2:24

Esqueci de passar essa parte no código acima:

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

Perdão. :/


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3095
Pontos Ativos : 6391

http://ajuda.forumeiros.com

Resolvido Re: Efeito de descrição dos ranks

Mensagem por PrisoN†BreaK em Dom 5 Fev 2017 - 3:03

Resolvido, muito obrigado amigo.
avatar

PrisoN†BreaK
Membro do Fórum

Masculino
Inscrito dia : 23/10/2015
Mensagens : 1095
Pontos Ativos : 2093

http://brasilplayfreedomofc.forumeiros.com/forum

Resolvido Re: Efeito de descrição dos ranks

Mensagem por Kyo Panda em Dom 5 Fev 2017 - 10:00

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

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


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3095
Pontos Ativos : 6391

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