Preciso de ajuda para corrigir o CSS dos comentários abaixo do post do WP

Suporte WordPress
1

Então, conectei o plugin WP Discourse ao meu fórum, mas os comentários abaixo das postagens estão ficando bem feios.

Exemplo:

image
image1068×846 106 KB

Qualquer sugestão sobre como modificar o CSS adequadamente para que os comentários fiquem apresentáveis será muito bem-vinda!

2

E quanto a isso?

.discourse-comments-area {
    padding-top: 15px;
}
.discourse-comments-title {
    font-size: 2em;
}
.comment {
    padding-top: 30px;
    min-height: 70px;
}
.comment-body {
    display: flex;
}
.comment-meta {
    display: flex;
    position: absolute;
    width: 100%;
    
}
.comment-metadata {
    margin-left: 5px;
    margin-top: 2px;
    color: #aaa;
    &:before {
        content: "/";
    }
}
.comment-author {
    display: flex;
    .fn {
        font-size: 1.4em;
        margin-left: 15px;
    }
}
.comment-content {    
    margin-left: 79px;
    margin-top: 30px;
    font-size: 1.15em;
    line-height: 1.5;
}

image
image1147×943 246 KB

3

Alternativa:

.discourse-comments-area {
    padding-top: 15px;
}
.discourse-comments-title {
    font-size: 2em;
}
.comment {
    padding-top: 20px;
    min-height: 70px;
}
.comment-body {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd;
}
.comment-meta {
    display: flex;
    //position: absolute;
    align-items: center;
    width: 100%;
    
}
.comment-metadata {
    margin-left: 5px;
    margin-top: 2px;
    color: #aaa;
    &:before {
        content: "/";
    }
}
.comment-author {
    display: flex;
    align-items: center;
    .avatar {
        width: 40px;
        height: 40px;
    }
    .fn {
        font-size: 1.4em;
        margin-left: 15px;
    }
}
.comment-content {
    margin-top: 15px;
    font-size: 1.15em;
    line-height: 1.5;
}

image
image1152×1034 245 KB

4

Isso parece ótimo. Obrigado! Prefiro o 1º exemplo.

Preciso apenas ajustar o espaçamento entre o avatar e o nome de usuário, e também o que vem abaixo dos comentários:

image
image1201×1004 162 KB

Também não sei por que o link para Continuar Discussão não está sendo exibido abaixo dos comentários.

5

Esqueci que, no seu caso, não estamos usando o Discourse, e meu código usava SCSS, não CSS. Por isso, algumas coisas não funcionaram.

Aqui está o CSS compilado:

.discourse-comments-area {
	 padding-top: 15px;
}
 .discourse-comments-title {
	 font-size: 2em;
}
 .comment {
	 padding-top: 30px;
	 min-height: 70px;
}
 .comment-body {
	 display: flex;
}
 .comment-meta {
	 display: flex;
	 position: absolute;
	 width: 100%;
}
 .comment-metadata {
	 margin-left: 5px;
	 margin-top: 2px;
	 color: #aaa;
}
 .comment-metadata:before {
	 content: "/";
}
 .comment-author {
	 display: flex;
}
 .comment-author .fn {
	 font-size: 1.4em;
	 margin-left: 15px;
}
 .comment-content {
	 margin-left: 79px;
	 margin-top: 30px;
	 font-size: 1.15em;
	 line-height: 1.5;
}

Para os avatares na parte inferior, você pode fazer o seguinte:

#comments .comment-reply-title .avatar {
    display: inline-block;
    margin-right: 10px;
    margin-top: 15px;
}

image
Acho que você só precisa deixar as duas frases acima um pouco maiores, mas também pode fazer isso você mesmo. Basta encontrar as classes HTML corretas usando as ferramentas de desenvolvedor do seu navegador.

Talvez você precise verificar uma configuração no WP-Discourse?