Detalhes da questão

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

Descrição

Olá queria mudar o corpo de tópico e mensagens do meu fórum, fiz um exemplo na imagem abaixo;
https://i.servimg.com/u/f62/15/86/28/62/2018-010.png

Tudo seria por base de códigos, até os ranks.
P.s O 'Centro' é o nick.

Seria possível deixar assim?

Olá @Tiaguu.

Bem, eu fiz o mais parecido possível. Acesse:

Painel de Controle Visualização Imagens e Cores Cores Folha de estilo CSS

Adicione o seguinte código:

Código:

.postprofile {
    margin-right: -1px;
}

.postprofile > dl > dt {
    background-color: #000;
    width: 110%;
}

.postprofile-avatar img {
    border-color: #fff;
}

.post-head {
    background-color: #000;
    border-color: #3793FF;
    border-radius: 3px 3px 0 0;
    border-style: solid;
    border-width: 0 0 1px;
    padding: 18px;
}

.post h2.topic-title a {
    color: #fff;
    font-size: 3rem;
}

.post-head .topic-date {
    color: #fff;
}

E valide.

Espero que goste.

AlexG escreveu:Olá @Tiaguu.

Bem, eu fiz o mais parecido possível. Acesse:

Painel de Controle Visualização Imagens e Cores Cores Folha de estilo CSS

Adicione o seguinte código:

Código:

.postprofile {
    margin-right: -1px;
}

.postprofile > dl > dt {
    background-color: #000;
    width: 110%;
}

.postprofile-avatar img {
    border-color: #fff;
}

.post-head {
    background-color: #000;
    border-color: #3793FF;
    border-radius: 3px 3px 0 0;
    border-style: solid;
    border-width: 0 0 1px;
    padding: 18px;
}

.post h2.topic-title a {
    color: #fff;
    font-size: 3rem;
}

.post-head .topic-date {
    color: #fff;
}

E valide.

Espero que goste.

Olá ficou ótimo, mas se conseguir "compactar"(deixar mais fina a parte preta) a parte do título do tópico e a data que que foi postado.
Mais uma coisinha, sabe me dizer o tamanho na parte do rank e perfil(avatar)? Assim eu posso criar um rank do msm tamanho pra ficar proporcional, tipo o exemplo que eu dei na imagem

Tiaguu escreveu:mas se conseguir "compactar"(deixar mais fina a parte preta) a parte do título do tópico e a data que que foi postado.

Você pode alterar esse valor nesta parte do código:

Código:

.post-head {
    background-color: #000;
    border-color: #3793FF;
    border-radius: 3px 3px 0 0;
    border-style: solid;
    border-width: 0 0 1px;
    padding: 18px;
}

Em:

Código:

padding: 18px;

Você pode alterar o valor 18px para o valor que achar que fica melhor. Lembrando que quanto for menor o número, mais "compacto" fica.

Caso queira deixar a medida de largura e só compactar a altura, basta trocar a linha acima para:

Código:

padding: (LARGURA)px (ALTURA)px;

--------------------------------

Tiaguu escreveu:Mais uma coisinha, sabe me dizer o tamanho na parte do rank e perfil(avatar)? Assim eu posso criar um rank do msm tamanho pra ficar proporcional, tipo o exemplo que eu dei na imagem

A largura "oficial" é 211px, mas se vai usar rank por CSS, depende do código que usar. No entanto, se assim for, terá que criar outro tópico.

AlexG escreveu:

Tiaguu escreveu:mas se conseguir "compactar"(deixar mais fina a parte preta) a parte do título do tópico e a data que que foi postado.

Você pode alterar esse valor nesta parte do código:

Código:

.post-head {
    background-color: #000;
    border-color: #3793FF;
    border-radius: 3px 3px 0 0;
    border-style: solid;
    border-width: 0 0 1px;
    padding: 18px;
}

Em:

Código:

padding: 18px;

Você pode alterar o valor 18px para o valor que achar que fica melhor. Lembrando que quanto for menor o número, mais "compacto" fica.

Caso queira deixar a medida de largura e só compactar a altura, basta trocar a linha acima para:

Código:

padding: (LARGURA)px (ALTURA)px;

--------------------------------

Tiaguu escreveu:Mais uma coisinha, sabe me dizer o tamanho na parte do rank e perfil(avatar)? Assim eu posso criar um rank do msm tamanho pra ficar proporcional, tipo o exemplo que eu dei na imagem

A largura "oficial" é 211px, mas se vai usar rank por CSS, depende do código que usar. No entanto, se assim for, terá que criar outro tópico.

Oi dnv.
Ficou um risco azul embaixo da barra preta, abaixo do titulo do tópico, teria como retirar?

Olá.

Claro que sim. Troque este troço do código:

Código:

.post-head {
    background-color: #000;
    border-color: #3793FF;
    border-radius: 3px 3px 0 0;
    border-style: solid;
    border-width: 0 0 1px;
    padding: 5px;
}

Para este:

Código:

.post-head {
    background-color: #000;
    border: none;
    padding: 5px;
}

(Já tem a modificação do tamanho feita, é só trocar mesmo)

Perfeito, criei um rank rapidinho aqui por imagem e ficou como eu queria, o resto que faltou eu crio outro tópico.
Obrigado pela ajuda.
<3