Melhoria do ''exibir perfil''

Detalhes da dúvida

Versão do fórum : PunBB
Nível de acesso : Fundador
Navegador usado : Google Chrome
Membros afetados : Todos os membros do fórum
Endereço do fórum : http://bomba-games.com/

Descrição do problema

Olá,
Eu estava procurando por soluções para otimizar o perfil do meu fórum (que está enorme) e achei esse tutorial: http://spdesign.ativoforum.com/t4473-tutorial-exibir-perfil só que tem um problema, apesar de tudo ter funcionado o botão ficou super feio no fórum, eu gostaria que alguém me auxíliasse com esses códigos para colocar um botão melhor, e se possível, o perfil já ser exibido apenas por passar o mause por cima.

Olá @BombaGames!

Troque o JavaScript pelo seguinte:

Código:

jQuery(document).ready(function() {
   jQuery('.post .postmain .postbody .user').each(function() {
      jQuery(this).find('.user-info').insertAfter(this);
      jQuery(this).find('.user-ident').after('<input onclick="jQuery(this).closest(\'.postbody\').find(\'.user-info\').fadeToggle();" style="font-weight: bold;font-family: Arial;" value="Exibir perfil" class="iheloadB" type="button">');
   });
});

Agora adicione isso a seu CSS:

Código:

.iheloadB {
  -moz-transition: background-color .5s;
  -o-transition: background-color .5s;
  -webkit-transition: background-color .5s;
  background-color: #1AB8D6;
  border-color: rgba(0,0,0,0.16);
  border-radius: 6px;
  border-style: solid;
  border-width: 1px 1px 3px;
  box-shadow: inset 0 0 2px rgba(255,255,255,0.76);
  color: #FFF;
  display: block;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 6px;
  text-align: center;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
  transition: background-color .5s;
  outline: none;
}
.iheloadB:hover {
  background-color: #22D5E7;
  cursor: pointer;
  outline: none;
}
.iheloadB:active {
  border-width: 1px;
  padding: 12px 6px 10px;
  outline: none;
}

Até mais.

Perfeito, só ouve um único infeliz incidente, o botão antigo ainda continuou mesmo com o código alterado. :/ Mas o novo apareceu, logo abaixo.

@BombaGames, o senhor alterou o código JavaScript ou adicionou o que eu passei, no caso contendo 2 códigos?

Espera um pouco, eu alterei o errado e agora bugou tudo, o que você passou tinha dado certo '-' e eu acabei apagando css q n era pra apagar

@BombaGames, apaga o CSS que eu te passei, e apaga o código que você tem do botão, e vamos de novo rsrs.

Coloque o seguinte JavaScript:

Código:

jQuery(document).ready(function() {
   jQuery('.post .postmain .postbody .user').each(function() {
      jQuery(this).find('.user-info').insertAfter(this);
      jQuery(this).find('.user-ident').after('<center><input onclick="jQuery(this).closest(\'.postbody\').find(\'.user-info\').fadeToggle();" style="font-weight: bold;font-family: Arial;" value="Exibir perfil" class="iheloadB" type="button"><br></center>');
   });
});

Agora adicione isso a seu CSS:

Código:

.iheloadB {
  -moz-transition: background-color .5s;
  -o-transition: background-color .5s;
  -webkit-transition: background-color .5s;
  background-color: #656666;
  border-color: rgba(0,0,0,0.16);
  border-radius: 6px;
  border-style: solid;
  border-width: 1px 1px 3px;
  box-shadow: inset 0 0 2px rgba(255,255,255,0.76);
  color: #FFF;
  display: block;
  font-size: 14px;
  font-weight: 700;
  padding: 7px 15px;
  text-align: center;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
  transition: background-color .5s;
  outline: none;
}
.iheloadB:hover {
  background-color: #888888;
  cursor: pointer;
  outline: none;
}
.iheloadB:active {
  border-width: 1px;
  padding: 8px 15px;
  outline: none;
}

Eu personalizei o botão, meio cinza escuro, para combinar com seu fórum! Se quiser azul como o antigo só falar.

Até mais.

Deu certo sim, mas tem apenas um problema. Os perfil já está aparecendo antes mesmo de clicar, só resolver isso que fica tudo ok. Veja nesse meu fórum de teste como ficou:
http://mundodaciencia.forumeiros.com/t36-didatica-artigos-didaticos-para-o-aprimoramento-pessoal

@BombaGames, este erro do perfil aparecer antes de clicar no botão, ocorria já antes de eu fazer as alterações, ou começou depois que eu editei o código?

Depois que editou

@BombaGames, troque por este seguinte código, e veja se resulta, pois estou confuso .

Código:

jQuery(document).ready(function() {
  jQuery('.post .postmain .postbody .user').each(function() {
      jQuery(this).find('.user-info').insertAfter(this);
      jQuery(this).find('.user-ident').after('<center><input onclick="jQuery(this).closest(\'.postbody\').find(\'.user-info\').fadeToggle();" style="font-weight: bold;font-family: century gothic;" value="Exibir perfil" class="iheloadB" type="button"><br></center>');
  });
});

Até.

Esse mudou a posição do botão, estava do lado esquerdo, dai foi pro direito '-'

Acabei de fazer um teste, deve ser com o css, pq eu botei o css do outro fórum, mesclado com o seu e precisava clicar para aparecer (apesar do botão continuar do mesmo jeito)

@BombaGames, tire o CSS que eu te passei, e o CSS que estava no tutorial do SPDesign, e adicione o seguinte a seu fórum:

Código:

.iheloadB {
  -moz-transition: background-color .5s;
  -o-transition: background-color .5s;
  -webkit-transition: background-color .5s;
  background-color: #656666;
  border-color: rgba(0,0,0,0.16);
  border-radius: 6px;
  border-style: solid;
  border-width: 1px 1px 3px;
  box-shadow: inset 0 0 2px rgba(255,255,255,0.76);
  color: #FFF;
  display: block;
  font-size: 14px;
  font-weight: 700;
  padding: 7px 15px;
  text-align: center;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
  transition: background-color .5s;
  outline: none;
}
.iheloadB:hover {
  background-color: #888888;
  cursor: pointer;
  outline: none;
}
.iheloadB:active {
  border-width: 1px;
  padding: 8px 15px;
  outline: none;
}
.pun .post .user {
background: -moz-linear-gradient(top, #DDD 0%, #BFBFBF 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#DDD), color-stop(100%,#BFBFBF));
background: -webkit-linear-gradient(top, #DDD 0%,#BFBFBF 100%);
background: -o-linear-gradient(top, #DDD 0%,#BFBFBF 100%);
background: -ms-linear-gradient(top, #DDD 0%,#BFBFBF 100%);
background: linear-gradient(to bottom, #DDD 0%,#BFBFBF 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#bfbfbf',GradientType=0 );
}
.user-basic-info {
margin-top: 20px;
}
.user-info {
display: none;
position: absolute;
left: 430px;
z-index: 999;
background: rgba(255, 255, 255, 0.92);
border: 12px solid rgba(0,0,0,0.7);
padding: 12px;
font-family: century gothic;
font-size: 14px;
line-height: 1.8em;
}

Mantenha o JavaScript como esta.

Até mais.

Muito obrigado!! agora deu certinho! agora só falta eu resolver a bananada que eu fiz no meu fórum principal