Besoin d'aide pour corriger le CSS des commentaires sous l'article WP

Soutien WordPress
1

Donc, j’ai connecté le plugin WP Discourse à mon forum, mais les commentaires sous les articles ont un aspect assez laid.

Exemple :

image
image1068×846 106 KB

Toute suggestion sur la manière de modifier correctement le CSS pour que les commentaires aient un aspect décent serait grandement appréciée !

2

Qu’en est-il de ceci ?

.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

Alternative:

.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

Cela a l’air super. Merci ! Je préfère le 1er exemple.

Il faut juste corriger l’espacement entre l’avatar et le nom d’utilisateur, ainsi que le contenu qui se trouve sous les commentaires :

image
image1201×1004 162 KB

Je ne sais pas non plus pourquoi le lien Continuer la discussion n’est pas affiché sous les commentaires.

5

J’ai oublié que, dans votre cas, vous n’utilisiez pas Discourse, et mon code utilisait SCSS, pas CSS. C’est pourquoi certaines choses ne fonctionnaient pas.

Voici le CSS compilé :

.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;
}

Pour les avatars en bas, vous pouvez faire ceci :

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

image
Vous devez simplement, je suppose, rendre les deux phrases ci-dessus un peu plus grandes, mais vous pouvez aussi le faire vous-même : il vous suffit de trouver les bonnes classes HTML en utilisant les outils de développement de votre navigateur.

Peut-être devez-vous vérifier un paramètre dans WP-Discourse ?