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

Últimos assuntos
» Aparecer pop-up de login ao clicar em Conectar-se
Hoje à(s) 5:52 por Flames

» Colocar link do perfil no menu
Hoje à(s) 5:51 por Luiz

» Personalizar barra de ferramentas
Hoje à(s) 5:25 por Flames

» Logo do fórum
Hoje à(s) 5:04 por Luiz

» Cor do fundos dos tópicos
Hoje à(s) 5:02 por Luiz

» Como adicionar um Painel de Usuário no fórum?
Hoje à(s) 4:59 por Luiz

» Categoria do fórum
Hoje à(s) 0:06 por PrisoN†BreaK

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Os membros mais ativos da semana
Harleen
 
Kyo Panda
 
Luiz
 
Fatalisss
 
Holkis
 
Flames
 
JulioPais
 
Shek
 
APOllO
 
Forumpw
 

Quem está conectado
206 usuários online :: 2 usuários cadastrados, Nenhum Invisível e 204 Visitantes :: 2 Motores de busca

Flames, Luiz

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez 2009 - 13: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 - 17: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 : 1106
Pontos Ativos : 1560

http://brasilplayfreedomofc.forumeiros.com/forum

Resolvido Re: Efeito de descrição dos ranks

Mensagem por Kyo Panda em Ter 31 Jan 2017 - 19: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 : 3708
Pontos Ativos : 4952

http://ajuda.forumeiros.com

Resolvido Re: Efeito de descrição dos ranks

Mensagem por PrisoN†BreaK em Ter 31 Jan 2017 - 20: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 : 1106
Pontos Ativos : 1560

http://brasilplayfreedomofc.forumeiros.com/forum

Resolvido Re: Efeito de descrição dos ranks

Mensagem por Kyo Panda em Ter 31 Jan 2017 - 20: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 : 3708
Pontos Ativos : 4952

http://ajuda.forumeiros.com

Resolvido Re: Efeito de descrição dos ranks

Mensagem por PrisoN†BreaK em Ter 31 Jan 2017 - 21: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 : 1106
Pontos Ativos : 1560

http://brasilplayfreedomofc.forumeiros.com/forum

Resolvido Re: Efeito de descrição dos ranks

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

UP
avatar

PrisoN†BreaK
Membro do Fórum

Masculino
Inscrito dia : 23/10/2015
Mensagens : 1106
Pontos Ativos : 1560

http://brasilplayfreedomofc.forumeiros.com/forum

Resolvido Re: Efeito de descrição dos ranks

Mensagem por Kyo Panda em Sex 3 Fev 2017 - 17: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 : 3708
Pontos Ativos : 4952

http://ajuda.forumeiros.com

Resolvido Re: Efeito de descrição dos ranks

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

Pronto, retirei o código
avatar

PrisoN†BreaK
Membro do Fórum

Masculino
Inscrito dia : 23/10/2015
Mensagens : 1106
Pontos Ativos : 1560

http://brasilplayfreedomofc.forumeiros.com/forum

Resolvido Re: Efeito de descrição dos ranks

Mensagem por Kyo Panda em Sab 4 Fev 2017 - 12: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 : 3708
Pontos Ativos : 4952

http://ajuda.forumeiros.com

Resolvido Re: Efeito de descrição dos ranks

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

pronto, coloquei.
avatar

PrisoN†BreaK
Membro do Fórum

Masculino
Inscrito dia : 23/10/2015
Mensagens : 1106
Pontos Ativos : 1560

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

Resolvido Re: Efeito de descrição dos ranks

Mensagem por Kyo Panda em Sab 4 Fev 2017 - 15: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 : 3708
Pontos Ativos : 4952

http://ajuda.forumeiros.com

Resolvido Re: Efeito de descrição dos ranks

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

Sim, apliquei, e ele está ativo.
avatar

PrisoN†BreaK
Membro do Fórum

Masculino
Inscrito dia : 23/10/2015
Mensagens : 1106
Pontos Ativos : 1560

http://brasilplayfreedomofc.forumeiros.com/forum

Resolvido Re: Efeito de descrição dos ranks

Mensagem por Kyo Panda em Sab 4 Fev 2017 - 16: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 : 3708
Pontos Ativos : 4952

http://ajuda.forumeiros.com

Resolvido Re: Efeito de descrição dos ranks

Mensagem por PrisoN†BreaK em Sab 4 Fev 2017 - 17: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 : 1106
Pontos Ativos : 1560

http://brasilplayfreedomofc.forumeiros.com/forum

Resolvido Re: Efeito de descrição dos ranks

Mensagem por Kyo Panda em Sab 4 Fev 2017 - 17: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 : 3708
Pontos Ativos : 4952

http://ajuda.forumeiros.com

Resolvido Re: Efeito de descrição dos ranks

Mensagem por PrisoN†BreaK em Sab 4 Fev 2017 - 22:31

Ainda sem resultado nas descrições dos ranks
avatar

PrisoN†BreaK
Membro do Fórum

Masculino
Inscrito dia : 23/10/2015
Mensagens : 1106
Pontos Ativos : 1560

http://brasilplayfreedomofc.forumeiros.com/forum

Resolvido Re: Efeito de descrição dos ranks

Mensagem por Kyo Panda em Sab 4 Fev 2017 - 22: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 : 3708
Pontos Ativos : 4952

http://ajuda.forumeiros.com

Resolvido Re: Efeito de descrição dos ranks

Mensagem por PrisoN†BreaK em Dom 5 Fev 2017 - 0: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 : 1106
Pontos Ativos : 1560

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

Resolvido Re: Efeito de descrição dos ranks

Mensagem por Kyo Panda em Dom 5 Fev 2017 - 0: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 : 3708
Pontos Ativos : 4952

http://ajuda.forumeiros.com

Resolvido Re: Efeito de descrição dos ranks

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

Resolvido, muito obrigado amigo.
avatar

PrisoN†BreaK
Membro do Fórum

Masculino
Inscrito dia : 23/10/2015
Mensagens : 1106
Pontos Ativos : 1560

http://brasilplayfreedomofc.forumeiros.com/forum

Resolvido Re: Efeito de descrição dos ranks

Mensagem por Kyo Panda em Dom 5 Fev 2017 - 8: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 : 3708
Pontos Ativos : 4952

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