Efeito de Avatar

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

Resolvido Efeito de Avatar

Mensagem por IsmaelS. em 09/09/14, 11:57 am

  • Descrição:
Gostaria saber se era possível ter este efeito de avatar no índice do fórum:
http://narutoeternal.ativoforum.com/

  • Informações:
Fórum:http://kodactheme.criaforum.com/Versão:PHPBB2
Tipo:Pedido de códigoTags:Efeito,Avatar


IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Efeito de Avatar

Mensagem por waghcwb em 09/09/14, 03:57 pm

Pode ser mais especifico a exatamente qual efeito o senhor deseja? é aquele ao passar o mouse em cima dos avatares no index ou o efeito completo deles em si?
avatar

waghcwb
Usuário destaque

Masculino
Inscrito dia : 06/09/2012
Mensagens : 734
Pontos Ativos : 1097

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

Resolvido Re: Efeito de Avatar

Mensagem por IsmaelS. em 09/09/14, 04:10 pm

Amigo ambos se possível!

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Efeito de Avatar

Mensagem por waghcwb em 09/09/14, 04:53 pm

Teste o seguinte

Código:
.lastpost-avatar img {
   background: #FFF;
   border: 1px solid #D5D5D5;
   border-radius: 50%;
   box-shadow: 0 2px 2px rgba(0,0,0,.1);
   height: 40px;
   padding: 1px;
   transition: all 1s;
   width: 40px;
}
.lastpost-avatar img:hover {
   border-color: #A1A1A1;
   border-radius: 1px;
   box-shadow: 0 2px 2px rgba(0,0,0,.2);
}
avatar

waghcwb
Usuário destaque

Masculino
Inscrito dia : 06/09/2012
Mensagens : 734
Pontos Ativos : 1097

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

Resolvido Re: Efeito de Avatar

Mensagem por IsmaelS. em 09/09/14, 07:01 pm

Seria possível colocar mais abaixo o avatar? Ou seja mover mais para o centro, que ao colocar o mouse em cima se reparar ele fica um bocadinho acima se possível colocar centrado!

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Efeito de Avatar

Mensagem por waghcwb em 09/09/14, 07:54 pm

Basta que o senhor use a seguinte propriedade
Código:
margin-top: -VALOR;

Note que o valor é negativo ( - )

Veja um exemplo:

Código:
.lastpost-avatar img {
  background: #FFF;
  border: 1px solid #D5D5D5;
  border-radius: 50%;
  box-shadow: 0 2px 2px rgba(0,0,0,.1);
  height: 40px;
  padding: 1px;
  transition: all 1s;
  width: 40px;
  /* NOTE A PROPRIEDADE AQUI */
  margin-top: -10px;
}

Basta usar o valor que o senhor deseja. Para os outros lados é a mesma coisa

margin-left para esquerda
margin-right para direita
margin-top para cima
margin-bottom para baixo

avatar

waghcwb
Usuário destaque

Masculino
Inscrito dia : 06/09/2012
Mensagens : 734
Pontos Ativos : 1097

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

Resolvido Re: Efeito de Avatar

Mensagem por IsmaelS. em 09/09/14, 08:56 pm

Olá,

No fórum quero deixar como está, mas nos sub-fóruns queria mexer também tem possibilidade?

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Efeito de Avatar

Mensagem por waghcwb em 11/09/14, 02:46 pm

Apenas nos subforuns? Se for, no caso o senhor pode fazer a alteração de forma global e na mensagem da homepage inserir a estilização que deseja apenas na homepage.

Ou seja, faça a alteração como deseja no CSS normal com as margens que deseja, e na mensagem da homepage altere as margens para 0

Exemplo
Código:
.lastpost-avatar img {
  margin-top: 0;
}
avatar

waghcwb
Usuário destaque

Masculino
Inscrito dia : 06/09/2012
Mensagens : 734
Pontos Ativos : 1097

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

Resolvido Re: Efeito de Avatar

Mensagem por IsmaelS. em 11/09/14, 03:29 pm

Então eu desejo assim na página inicial:
Código:
.lastpost-avatar img {
      background: #FFF;
      border: 1px solid #D5D5D5;
      border-radius: 50%;
      box-shadow: 0 2px 2px rgba(0,0,0,.1);
      height: 40px;
      padding: 1px;
      transition: all 1s;
      width: 40px;
      margin-top: 4;
    }
    .lastpost-avatar img:hover {
      border-color: #A1A1A1;
      border-radius: 1px;
      box-shadow: 0 2px 2px rgba(0,0,0,.2);
    }

Tenho que colocar esse na homepage, e este na .CSS?
Código:
    .lastpost-avatar img {
      margin-top: 0;
    }

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Efeito de Avatar

Mensagem por waghcwb em 11/09/14, 04:01 pm

Na verdade seria o contrário amigo, achei que entendesse um pouco de CSS por isso não deixei exemplos muito elucidativos, mas vamos lá então

Note seu código
Código:
.lastpost-avatar img {
      background: #FFF;
      border: 1px solid #D5D5D5;
      border-radius: 50%;
      box-shadow: 0 2px 2px rgba(0,0,0,.1);
      height: 40px;
      padding: 1px;
      transition: all 1s;
      width: 40px;
      margin-top: 4;
    }
    .lastpost-avatar img:hover {
      border-color: #A1A1A1;
      border-radius: 1px;
      box-shadow: 0 2px 2px rgba(0,0,0,.2);
    }

Não é errado não atribuir um valor especifico para um valor, porém cada navegador vai entender esse valor de uma maneira diferente, o "4" para você pode não ser o mesmo para mim, entende? Por isso, procure declarar o valor em pixels ou outra unidade de medida
Código:
margin-top: 4;

Poderia ser
Código:
margin-top: 4px;

Para inserir um CSS na homepage não basta colar ele lá, vai precisar inserir entre as tags "style", assim:
Código:
<style type="text/css">/* Códigos aqui */</styles>

Tenta fazer isso, se tiver dificuldades nos avise.

avatar

waghcwb
Usuário destaque

Masculino
Inscrito dia : 06/09/2012
Mensagens : 734
Pontos Ativos : 1097

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

Resolvido Re: Efeito de Avatar

Mensagem por IsmaelS. em 11/09/14, 04:07 pm

Olá,

Fiz o que pediu colocar em "4px", agora na parte de homepage que código coloco ao certo dentro?

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Efeito de Avatar

Mensagem por waghcwb em 11/09/14, 04:11 pm

Isso no CSS

Código:
.lastpost-avatar img {
      background: #FFF;
      border: 1px solid #D5D5D5;
      border-radius: 50%;
      box-shadow: 0 2px 2px rgba(0,0,0,.1);
      height: 40px;
      padding: 1px;
      transition: all 1s;
      width: 40px;
      margin-top: 4px;
    }
    .lastpost-avatar img:hover {
      border-color: #A1A1A1;
      border-radius: 1px;
      box-shadow: 0 2px 2px rgba(0,0,0,.2);
    }


E isso na mensagem da home

Código:
<style type="text/css">.lastpost-avatar img {
      margin-top: 0;
    }</style>
avatar

waghcwb
Usuário destaque

Masculino
Inscrito dia : 06/09/2012
Mensagens : 734
Pontos Ativos : 1097

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

Resolvido Re: Efeito de Avatar

Mensagem por IsmaelS. em 11/09/14, 04:15 pm

Fiz o que pediu mas não notei nada de diferente mas aqui fica uma print como quero:



Veja ao passar o mouse o efeito fica muito abaixo das informações ao lado direito, eu queria alinhado se possível, percebeu?

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/
  • 0

Resolvido Re: Efeito de Avatar

Mensagem por waghcwb em 12/09/14, 11:49 am

Amigo, você fez algo errado.. O valor dos pixels la não estão negativos, assim eles ficam mais para baixo ainda

Veja


Altere o valor para 4 pixels negativos
Código:
margin-top: -4px;
avatar

waghcwb
Usuário destaque

Masculino
Inscrito dia : 06/09/2012
Mensagens : 734
Pontos Ativos : 1097

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

Resolvido Re: Efeito de Avatar

Mensagem por IsmaelS. em 12/09/14, 03:18 pm

Obrigado amigo, ficou perfeito resolvido!!

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Efeito de Avatar

Mensagem por waghcwb em 12/09/14, 03:33 pm


Tópico movido de Questões sobre aparência do fórum para Questões resolvidas.
avatar

waghcwb
Usuário destaque

Masculino
Inscrito dia : 06/09/2012
Mensagens : 734
Pontos Ativos : 1097

Ver perfil do usuário http://punbb.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