Quadro post

Qual é minha questão:
Olá, eu quero meter o quadro geral das mensagens como está na imagem. O texto dentro de "caixa com uma borda arredondada, depois o post de perfil onde aparece o avatar tudo centrado e também numa borda arredondada. Podem ver na imagem.


Endereço do meu fórum:
http://fswrestling.foruns.com.pt

Versão do fórum:
PHPBB3

Olá,

Somente poderemos atender a uma questão por tópico, responderei-lhe a primeira questão.

Aceda à 'Folha de estilo CSS':
Painel de Controle ->> Visualização ->> Imagens e Cores ->> Cores / Folha de estilo CSS

Acrescente o código a seguir na folha:

Código:

.postbody {
border: 1px solid #ddd;
border-radius: 6px;
clear: both;
color: #7d7d7d;
float: right;
line-height: 1.48em;
margin-top: 5px;
padding: 7px;
width: 75%;
}

Valide!

Resulta?

Resultou, mas falta o perfil centrado e também com uma borda arredondada.

Utilize o código abaixo:

Código:

.postprofile {
background: #DEDEDE!important;
background-color: #DEDEDE;
border: 2px solid #DEDEDE!important;
border-radius: 5px 5px 5px 5px!important;
text-align: center;
}

Adicione este código no início do CSS.

Abraços!

Como eu previa os dois quadros ficam colados um ao outro, e eu quero com um espaço como se encontra na imagem, para visualizar o erro visite: http://check-point.foruns.com.pt/t1-topico-de-teste

Troque o código por este:

Código:

.postprofile {
position: relative;
right: 5px;
width: 21%!important;
background: #DEDEDE!important;
background-color: #DEDEDE;
border: 2px solid #DEDEDE!important;
border-radius: 5px 5px 5px 5px!important;
text-align: center;
}

Resulta?

Dá para por um pouco mais longe? Não muito, só mais um pouco..

Sim, no código procure e altere o seguinte:

right: 5px;

Altere até ajustar como queira, aumentando o valor o mesmo irá para a esquerda e diminuindo irá para a direita.

Até mais!

Obrigado, mas falta um pequeno promonor..
Como pode ver na imagem que está a seguir cada post de usuário incluído o perfil e tudo mais está dentro de uma linha que vai ficando mais clara a medida que desce. A ultima linha que é o da seta que aponta para baixo já faz parte do post seguinte mas dá para ficar com uma ideia do que é..

Já são três questões em um único tópico hem, da próxima vez queira sanar uma questão por tópico, creio que entendi, queira experimentar o código abaixo:

Código:

.row1 {
border-top: 1px solid #C7C7C7!important;
}
.row2 {
border-top: 1px solid #C7C7C7!important;
}

Até mais.

Obrigado, e quanto a isso de serem 3 questões na minha opinião está errado, pois podem todas entrar em conflitos..