Efeito hover perfil

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

Resolvido Efeito hover perfil

Mensagem por Appoloz em 02/02/17, 01:51 am

Detalhes da questão


Endereço do fórum: http://narutottebayoteste.forumeiros.com/t1-seu-primeiro-topico
Versão do fórum: PhpBB3

Descrição


@edit:

quero todos os campos (mensagens, perfil, mp) igual ao campo de data de inscrição, aquela barra fininha, um em cima do outro
No momento, o campo de perfil e mp são icones, gostaria que ficasse somente o nome, para se igualar aos outros campos


Última edição por Appoloz em 04/02/17, 06:03 pm, editado 3 vez(es)
avatar

Appoloz
Usuário avançado

Masculino
Inscrito dia : 14/02/2012
Mensagens : 405
Pontos Ativos : 630

Ver perfil do usuário http://rpg-narutoworld.forumeiros.com/

Resolvido Re: Efeito hover perfil

Mensagem por Kyo Panda em 02/02/17, 07:42 pm

Antes de fazer isso, o senhor terá que remover o efeito que já está no seu fórum. As regras CSS possuem mikae no nome.
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 hover perfil

Mensagem por Appoloz em 03/02/17, 10:06 am

Editei o pedido

Só pra deixar claro: quero todos os campos (mensagens, perfil, mp) igual ao campo de data de inscrição, aquela barra fininha, um em cima do outro
No momento, o campo de perfil e mp são icones, gostaria que ficasse somente o nome, para se igualar aos outros campos
avatar

Appoloz
Usuário avançado

Masculino
Inscrito dia : 14/02/2012
Mensagens : 405
Pontos Ativos : 630

Ver perfil do usuário http://rpg-narutoworld.forumeiros.com/

Resolvido Re: Efeito hover perfil

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

Procure no seu CSS por isso:

Código:
.pr-campo:first-child #pr-dato {
    background: #000;
    display: inline-block;
    font-family: sans-serif;
    font-size: 12px;
    font-variant: normal;
    font-weight: lighter;
    line-height: 24px;
    margin-left: 86px;
    margin-top: -66px;
    padding: 15px 10px;
    text-align: center;
    text-transform: lowercase;
    width: 69px;
}

Código:
#pr-conta {
    display: inline-block;
    height: 66px;
    width: 116px;
}

E os remova.

Após adicione ao CSS:

Código:
#pr-conta {
  text-align: center;
}

#pr-conta a {
  background-color: #000;
}
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 hover perfil

Mensagem por Appoloz em 03/02/17, 06:18 pm

Os ícones continuam
(o ícone de perfil e mp são imagens escrito perfil e mp na verdade kk)
sem falar que o MENSAGENS está bem desalinhado
avatar

Appoloz
Usuário avançado

Masculino
Inscrito dia : 14/02/2012
Mensagens : 405
Pontos Ativos : 630

Ver perfil do usuário http://rpg-narutoworld.forumeiros.com/

Resolvido Re: Efeito hover perfil

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

Esse código:

Código:
.pr-campo:first-child #pr-dato {
    background: #000;
    display: inline-block;
    font-family: sans-serif;
    font-size: 12px;
    font-variant: normal;
    font-weight: lighter;
    line-height: 24px;
    margin-left: 86px;
    margin-top: -66px;
    padding: 15px 10px;
    text-align: center;
    text-transform: lowercase;
    width: 69px;
}

Ainda está no seu CSS.
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 hover perfil

Mensagem por Appoloz em 04/02/17, 12:57 am

Arrumado.
Agora resta colocar o 8 mensagens certinho (ta com um pulo de linha)
E colocar no lugar da foto, escrito.
avatar

Appoloz
Usuário avançado

Masculino
Inscrito dia : 14/02/2012
Mensagens : 405
Pontos Ativos : 630

Ver perfil do usuário http://rpg-narutoworld.forumeiros.com/

Resolvido Re: Efeito hover perfil

Mensagem por Kyo Panda em 04/02/17, 09:59 am

Adicione ao CSS:

Código:
.pr-campo:first-child #pr-dato:after {
  display: inline-block;
  margin-left: 5px;
}

Isso corrige o número.

Já as imagens não rolará, pois não tenho acesso a essas variáveis no HTML e, mesmo que seja possível fazer com jQuery, é um peso na página e muitas condicionais para que não hajam erros.

As imagens tem que ser criadas com:

  • Tamanho de fonte de 8px;
  • Espaçamento entre letras de 2px;
  • Fonte Verdana


Para ficar igual ao texto.
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 hover perfil

Mensagem por Appoloz em 04/02/17, 10:12 am

O campo de mensagens ainda fica com um espaçamento de linha...
avatar

Appoloz
Usuário avançado

Masculino
Inscrito dia : 14/02/2012
Mensagens : 405
Pontos Ativos : 630

Ver perfil do usuário http://rpg-narutoworld.forumeiros.com/
  • 0

Resolvido Re: Efeito hover perfil

Mensagem por Kyo Panda em 04/02/17, 10:15 am

Eu não encontrei o código passado na folha de CSS do seu fórum. Verifique se o código inserido está lá e que está no fim da folha de CSS.
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 hover perfil

Mensagem por Appoloz em 04/02/17, 06:02 pm

Havia colocado no início, valeu xD
avatar

Appoloz
Usuário avançado

Masculino
Inscrito dia : 14/02/2012
Mensagens : 405
Pontos Ativos : 630

Ver perfil do usuário http://rpg-narutoworld.forumeiros.com/

Resolvido Re: Efeito hover perfil

Mensagem por Luiz em 04/02/17, 06:07 pm

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

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5810
Pontos Ativos : 6649

Ver perfil do usuário https://github.com/lffg/

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