Modificar campo de avatar

2 participantes

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

Tópico resolvido Modificar campo de avatar

Mensagem por BichodoMato 29.04.17 20:59

Detalhes da questão


Endereço do fórum: http://naruto-survival.forumeiros.com/
Versão do fórum: phpBB2

Descrição


Olá, gostaria de modificar o campo de avatar nas postagens para ficar com esta moldura aqui:

Modificar campo de avatar Oie_tr11

A ideia também é que o nome do usuário fique centralizado dentro da caixa verde, desta forma:

Antes

Modificar campo de avatar 110

Depois

Modificar campo de avatar 210

Seria possível?

BichodoMato

BichodoMato
****

Masculino
Membro desde : 07/07/2013
Mensagens : 396
Pontos : 657

Ver perfil do usuário http://naruto-survival.forumeiros.com

Ir para o topo Ir para baixo

Membro Proficiente

Tópico resolvido Re: Modificar campo de avatar

Mensagem por Luiz 29.04.17 21:12

Sim, é possível.
Adicione o código a seguir ao final de sua CSS:
Código:
.user-avatar img:hover {
  transform: initial!important;
}

.lz-aparente {
  position: relative;
  background-image: url(https://i58.servimg.com/u/f58/19/63/06/49/oie_tr11.png);
  background-position: -10px 3px!important;
  background-size: 220px!important;
  background-repeat: no-repeat!important;
  width: 286px!important;
  height: 360px!important;
  margin-top: 25px!important;
}

.lz-postprofile {
  width: 180px!important;
}

.user-avatar img {
  position: absolute!important;
  width: 127px!important;
  height: 254px!important;
  top: 66px!important;
  left: 37px!important;
}

.lz-postprofile {
  width: 235px!important;
}

.lz-postprofile span.btn {
  position: absolute!important;
  top: initial!important;
  bottom: 15px!important;
  padding: 1px 2px!important;
  left: 62px!important;
}

strong.lz-strong1 {
  position: absolute!important;
  top: -25px!important;
  left: 19px!important;
}

Algumas observações:

  • Não foi possível deixar o nome de usuário onde o senhor pediu, pois ficaria diferente para cada usuário, fora que o tamanho do perfil teria que ser enorme.
  • Desculpe o tanto de
    !important
    's na CSS acima. Envergonhado


o/
Luiz

Luiz
Membro Proficiente
Membro Proficiente

Masculino
Membro desde : 23/04/2016
Mensagens : 6644
Pontos : 7447

Ver perfil do usuário https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificar campo de avatar

Mensagem por BichodoMato 01.05.17 18:21

Humnn, apesar de aparecer no lugar que eu queria não deu muito certo não.. A imagem está pequena e o avatar sobrepõe ela. Eu mesmo recortei e montei a imagem para que o avatar se encaixasse perfeitamente nela, mas mesmo modificando alguns comandos pelo css não consegui resolver.
BichodoMato

BichodoMato
****

Masculino
Membro desde : 07/07/2013
Mensagens : 396
Pontos : 657

Ver perfil do usuário http://naruto-survival.forumeiros.com

Ir para o topo Ir para baixo

Membro Proficiente

Tópico resolvido Re: Modificar campo de avatar

Mensagem por Luiz 01.05.17 18:28

Olá, Bixo.
O CSS que te mandei funciona perfeitamente, só não está como o senhor pediu em alguns aspectos, pois se usássemos o tamanho real da imagem, o conteúdo em si da postagem ficaria muito menor, deixando o perfil desproporcional em relação ao resto da postagem, entende?

Veja como ficou o CSS que lhe mandei anteriormente pelo Inspecionar Elemento:
-> http://prntscr.com/f2xvtx

o/
Luiz

Luiz
Membro Proficiente
Membro Proficiente

Masculino
Membro desde : 23/04/2016
Mensagens : 6644
Pontos : 7447

Ver perfil do usuário https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificar campo de avatar

Mensagem por BichodoMato 01.05.17 18:48

Entendi. Bom, veja como ficou na prática para mim:
Modificar campo de avatar Print210


EDIT: Nossa, é claro que não deu certo. Conferi meu css e vi que tinha esse código lá:

Código:
.user-avatar img {
  height: 300px!important;
  width: 150px!important;
}

xD Agora foi. Obrigado. Mas e a questão do nome? Não tem como resolver não?
BichodoMato

BichodoMato
****

Masculino
Membro desde : 07/07/2013
Mensagens : 396
Pontos : 657

Ver perfil do usuário http://naruto-survival.forumeiros.com

Ir para o topo Ir para baixo

Membro Proficiente

Tópico resolvido Re: Modificar campo de avatar

Mensagem por Luiz 01.05.17 18:57

Não, o nome não tem como ficar naquele espaço minúsculo sem aumentar (e muito a imagem).
O único modo de alcançar o resultado seria diminuir muito (mesmo) o tamanho da fonte, o que não é muito bom, ou aumentar o tamanho da imagem de fundo, o que também não é muito bom. Triste

Tópico resolvido? o/
Luiz

Luiz
Membro Proficiente
Membro Proficiente

Masculino
Membro desde : 23/04/2016
Mensagens : 6644
Pontos : 7447

Ver perfil do usuário https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificar campo de avatar

Mensagem por BichodoMato 01.05.17 19:00

Entendi :/

Bom, de qualquer forma agradeço sua ajuda denovo Luiz. Vou ver se penso em outra imagem, vendo agora parece que essa imagem não foi uma boa escolha.

Resolvido.
BichodoMato

BichodoMato
****

Masculino
Membro desde : 07/07/2013
Mensagens : 396
Pontos : 657

Ver perfil do usuário http://naruto-survival.forumeiros.com

Ir para o topo Ir para baixo

Membro Proficiente

Tópico resolvido Re: Modificar campo de avatar

Mensagem por Luiz 01.05.17 19:06

Modificar campo de avatar Symbol10 Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

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

Luiz
Membro Proficiente
Membro Proficiente

Masculino
Membro desde : 23/04/2016
Mensagens : 6644
Pontos : 7447

Ver perfil do usuário https://luizfelipe.dev

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo


Permissões neste sub-fórum
Não podes responder a tópicos