Modificar o código padrão do avatar
2 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1 • Compartilhe
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.
![Admineiro Admineiro](https://i.imgur.com/TuksIJS.png)
Re: Modificar o código padrão do avatar
Olá @Connor R.,
O senhor só quer adicionar a moldura a volta do avatar, correto?
Aguardo uma resposta sua,
pedxz.
O senhor só quer adicionar a moldura a volta do avatar, correto?
Aguardo uma resposta sua,
pedxz.
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7886
Pontos : 9135
Re: Modificar o código padrão do avatar
@"pedxz" Isto mesmo, mas como pode notar a moldura às vezes passa por cima do avatar e isto gera um problema para adaptar.
![Admineiro Admineiro](https://i.imgur.com/TuksIJS.png)
Re: Modificar o código padrão do avatar
Basta usar:
Demostração
- 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
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7886
Pontos : 9135
Re: Modificar o código padrão do avatar
@"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?
![Admineiro Admineiro](https://i.imgur.com/TuksIJS.png)
Re: Modificar o código padrão do avatar
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;
}
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7886
Pontos : 9135
Re: Modificar o código padrão do avatar
Muito bom, bem melhor dessa maneira. Obrigado.
![Admineiro Admineiro](https://i.imgur.com/TuksIJS.png)
Re: Modificar o código padrão do avatar
![Eu amo você](/users/2612/28/77/07/smiles/10288.gif)
Tópico resolvidoMovido para "Questões resolvidas". |
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7886
Pontos : 9135
![-](https://2img.net/i/fa/fdf3/moins10.png)
» Retirar ou modificar o nome padrão
» Como modificar o "Valor padrão" do formulário de postagens?
» Avatar padrao: Membro sem avatar
» Avatar padrão
» Avatar padrão
» Como modificar o "Valor padrão" do formulário de postagens?
» Avatar padrao: Membro sem avatar
» Avatar padrão
» Avatar padrão
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos