Detalhes da questão

Endereço do fórum: http://ftmyths.forumeiros.com
Versão do fórum: ModernBB

Descrição

Olá!

Recentemente utilizei um código para ajustar a forma como fica o avatar da versão ModernBB, de forma a deixa-lo mais parecido com versões mais antigas da forumeiros. O resultado me agradou com o código abaixo:

Código:

.field {
  background: none!important;
  border: solid 0px transparent!important;
  margin-bottom: 0px!important;
  padding-bottom: 0px!important;
  text-align: left!important;
}
 
.postprofile-rank {
  border-bottom: solid 3px #ccc;
}
 
postprofile-name span > strong {
  font-size: 30pt!important;
}
 
div.postprofile-name > a > span > strong {
  font-size: 11pt!important;
  margin: 10px 0px!important;
  display: inline-block!important;
}
 
.postprofile-rank > span[class] {
  margin-bottom: 12px;
}
 
.postprofile-avatar img {
  border-radius: 0px!important;
  width: 250px!important;
  height: 400px!important;
  border: solid 0px!important;
}

No entanto, como podem ver nesse print ( http://prntscr.com/nz0n2i ), a imagem ficou desproporcional em relação ao tópico. Eu gostaria de manter a imagem com essa proporção mesmo (250x400), mas gostaria de saber como posso aumentar o tópico em si de forma a se ajustar perfeitamente com essas proporções, inclusive de acordo com essa linha que separa a postagem em si da área com informações sobre a postagem.

Olá,

O código citado se encontra ativo?

Aguardando.

Sim, encontra-se ativo.

gudonho escreveu:Sim, encontra-se ativo.

Olá novamente,

Retire o atual código e adicione esse:

Código:

.postprofile {
    background: url(https://i.imgur.com/OH2IA0w.png) repeat-x #F6F6F6;
    border: 1px solid #DDD;
    border-radius: 3px;
    margin-bottom: 10px;
    padding: 60px 3px 3px;
    position: relative;
}
.desc-icon, .postprofile, .postprofile dd, .postprofile dd:last-child, .postprofile dt+dd {
    text-align: center;
}
.postprofile {
    border-color: #fff;
    border-left-style: solid;
    border-left-width: 1px;
    color: #666;
    display: inline;
    float: right;
    margin: 5px 0 0;
    min-height: 80px;
    position: relative;
    width: 22%;
    word-wrap: break-word;
}

Vamos ver o resultado.

Retirei e troquei por esse novo, mas bugou: http://prntscr.com/nz3t4r

Retire o mesmo e adicione esse:

Código:

.postprofile {
    background: url(https://i.imgur.com/OH2IA0w.png) repeat-x #F6F6F6;
    border: 1px solid #DDD;
    border-radius: 3px;
    margin-bottom: 10px;
    padding: 60px 3px 3px;
    position: relative;
}
.desc-icon, .postprofile, .postprofile dd, .postprofile dd:last-child, .postprofile dt+dd {
    text-align: center;
}
.postprofile {
    border: 1px solid #DDD;
    border-color: #fff;
    border-left-style: solid;
    border-left-width: 2px;
    border-radius: 4px;
    color: #666;
    display: inline;
    float: right;
    margin: 90px 0 0;
    min-height: 80px;
    padding: 60px 3px 3px;
    position: relative;
    width: 22%;
    word-wrap: break-word;
}

http://prntscr.com/nz43n9 Troquei, mas permanece da mesma forma.

gudonho escreveu:http://prntscr.com/nz43n9 Troquei, mas permanece da mesma forma.

Perdão retire o que repassei e adicione somente esse:

Código:

.postprofile {
    border: 1px solid #DDD;
    border-color: #fff;
    border-left-style: solid;
    border-left-width: 2px;
    border-radius: 4px;
    color: #666;
    display: inline;
    float: right;
    margin: 90px 0 0;
    min-height: 80px;
    padding: 60px 3px 3px;
    position: relative;
    width: 22%;
    word-wrap: break-word;
}

http://prntscr.com/nz6uif

O Bug desapareceu, mas agora permanece da maneira padrão, redondo e pequeno. Eu gostaria que ele ficasse retangular com 250x400. Há alguma forma de aumentar a área marcada aqui http://prntscr.com/nz6uxb para que o avatar fique ajustado nessas proporções que mencionei?

Agradeço a paciência!

Eu consegui resolver o problema! Usei o seu código e adicionei apenas o .postprofile-avatar img { final do meu, o que deu o resultado esperado. Obrigado!

Podem bloquear.