Hilfe beim Beheben des CSS für Kommentare unter WP-Beiträgen benötigt

Unterstützung WordPress
1

Also, ich habe das WP-Discourse-Plugin mit meinem Forum verbunden, aber die Kommentare unter den Beiträgen sehen ziemlich hässlich aus.

Beispiel:

image
image1068×846 106 KB

Jede Anregung, wie man den CSS-Code richtig anpassen kann, damit die Kommentare gut aussehen, wäre sehr willkommen!

2

Was ist mit diesem?

.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

Das sieht großartig aus. Danke! Ich bevorzuge das erste Beispiel.

Ich muss nur noch den Abstand zwischen Avatar und Benutzernamen sowie den Bereich unter den Kommentaren anpassen:

image
image1201×1004 162 KB

Außerdem bin ich mir nicht sicher, warum der Link „Diskussion fortsetzen

5

Ich habe vergessen, dass Sie in Ihrem Fall nicht auf Discourse sind, und mein Code verwendete SCSS, nicht CSS. Deshalb gab es einige Dinge, die nicht funktioniert haben.

Hier ist der kompilierte CSS:

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

Für die Avatare unten können Sie Folgendes tun:

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

image
Sie müssen wahrscheinlich nur die beiden Sätze oben etwas größer machen, aber Sie können es auch selbst tun. Suchen Sie einfach die richtigen HTML-Klassen mit den Entwicklertools Ihres Browsers.

Vielleicht müssen Sie eine Einstellung in WP-Discourse überprüfen?