Modificar o código padrão do avatar

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

Atendido / Resolvido Modificar o código padrão do avatar

Mensagem por Connor R. 29.07.20 18:26

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.
Connor R.

Connor R.
Membro do Fórum

Masculino
Inscrito dia : 06/08/2012
Mensagens : 1182
Pontos ativos : 1914

http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Atendido / Resolvido Re: Modificar o código padrão do avatar

Mensagem por pedxz 29.07.20 18:30

Olá @Connor R.,

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


Aguardo uma resposta sua,
pedxz.


Boas-vindas ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a editando a sua primeira postagem.
Pedxz - Admineiro
pedxz

pedxz
Admineiro
Admineiro

Inscrito dia : 13/01/2017
Mensagens : 6059
Pontos ativos : 7197

Atendido / Resolvido Re: Modificar o código padrão do avatar

Mensagem por Connor R. 29.07.20 18:35

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

Connor R.
Membro do Fórum

Masculino
Inscrito dia : 06/08/2012
Mensagens : 1182
Pontos ativos : 1914

http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Atendido / Resolvido Re: Modificar o código padrão do avatar

Mensagem por pedxz 29.07.20 18:49

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


Modificar o código padrão do avatar Img_2089


Foi feito na versão ModernBB sem edições, então tem coisas a serem compatibilizadas com o seu tema.


Boas-vindas ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a editando a sua primeira postagem.
Pedxz - Admineiro
pedxz

pedxz
Admineiro
Admineiro

Inscrito dia : 13/01/2017
Mensagens : 6059
Pontos ativos : 7197

Atendido / Resolvido Re: Modificar o código padrão do avatar

Mensagem por Connor R. 29.07.20 20:11

@"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?
Connor R.

Connor R.
Membro do Fórum

Masculino
Inscrito dia : 06/08/2012
Mensagens : 1182
Pontos ativos : 1914

http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Atendido / Resolvido Re: Modificar o código padrão do avatar

Mensagem por pedxz 29.07.20 21:18

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;
}


Boas-vindas ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a editando a sua primeira postagem.
Pedxz - Admineiro
pedxz

pedxz
Admineiro
Admineiro

Inscrito dia : 13/01/2017
Mensagens : 6059
Pontos ativos : 7197

Atendido / Resolvido Re: Modificar o código padrão do avatar

Mensagem por Connor R. 29.07.20 21:57

Muito bom, bem melhor dessa maneira. Obrigado.
Connor R.

Connor R.
Membro do Fórum

Masculino
Inscrito dia : 06/08/2012
Mensagens : 1182
Pontos ativos : 1914

http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Atendido / Resolvido Re: Modificar o código padrão do avatar

Mensagem por pedxz 29.07.20 22:00

Eu amo você

Tópico resolvido


Movido para "Questões resolvidas".


Boas-vindas ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a editando a sua primeira postagem.
Pedxz - Admineiro
pedxz

pedxz
Admineiro
Admineiro

Inscrito dia : 13/01/2017
Mensagens : 6059
Pontos ativos : 7197

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum