Modificar o código padrão do avatar

Detalhes da questão

Endereço do fórum: https://somosmugiwara.forumeiros.com/
Versão do fórum: ModernBB

Descrição

Olá, estou tentando colocar uma moldura ao redor do avatar nos tópicos, porém ando tendo dificuldade em realizar tal processo. No caso, a própria estrutura padrão da imagem do avatar me impossibilita. Abaixo segue o código que estou tentando.

https://jsfiddle.net/fys8ukh1/

Na primeira imagem é como está atualmente, a segunda refere-se à como desejo que fique. Teria alguma forma por CSS para deixar a primeira imagem como a segunda. O atributo position é o que uso para sobrepor a imagem.

Olá @Connor R.,

O senhor só quer adicionar a moldura a volta do avatar, correto?


Aguardo uma resposta sua,
pedxz.

@"pedxz" Isto mesmo, mas como pode notar a moldura às vezes passa por cima do avatar e isto gera um problema para adaptar.

Basta usar:

Código:

.postprofile-avatar {
  position: relative;
  background: url(https://i.imgur.com/Z51xWHw.png);
  background-size: 155px 341px;
  background-repeat: no-repeat;
  width: 155px;
  height: 341px;
  padding: 0!important;
}
 
.postprofile-avatar img {
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  width: 155px!important;
  height: 321px!important;
  margin: 0!important;
  padding: 1em;
  border-radius: 0!important;
  border-width: 0!important;
}

Demostração

@"pedxz" Gostaria exatamente o inverso, neste seu exemplo a moldura fica em cima do avatar, o que não dá um efeito legal. Teria como a moldura sobrepor a imagem?

Altere para:

Código:

.postprofile {
   position: relative;
   z-index: 10;
}

.postprofile-avatar {
   background: url(https://i.imgur.com/Z51xWHw.png);
   background-size: 155px 341px;
   background-repeat: no-repeat;
   width: 155px;
   height: 341px;
   padding: 0!important;
   position: relative!important;
   z-index: initial;
}

.postprofile-avatar img {
   -o-object-fit: cover;
   object-fit: cover;
   -o-object-position: center;
   object-position: center;
   width: 148px!important;
   height: 295px!important;
   margin: 0!important;
   margin-top: 2em!important;
   border-radius: 0!important;
   border-width: 0!important;
   padding: 0!important;
   position: relative;
   z-index: -1;
}

Muito bom, bem melhor dessa maneira. Obrigado.

Tópico resolvido Movido para "Questões resolvidas".