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:


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



Seria possível?

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.

o/

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.

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/

Entendi. Bom, veja como ficou na prática para mim:



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?

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.

Tópico resolvido? o/

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.