Serve aiuto per correggere il CSS dei commenti sotto il post WP

Supporto WordPress
1

Quindi ho collegato il plugin WP Discourse al mio forum, ma i commenti sotto i post sembrano piuttosto brutti.

Esempio:

image
image1068×846 106 KB

Qualsiasi suggerimento su come modificare correttamente il CSS in modo che i commenti appaiano decenti sarebbe molto apprezzato!

2

Che ne dici di questo?

.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

Sembra ottimo. Grazie! Preferisco il primo esempio.

Devo solo correggere lo spazio tra l’avatar e il nome utente, nonché il contenuto che appare sotto i commenti:

image
image1201×1004 162 KB

Inoltre, non sono sicuro del motivo per cui il link per “Continua la discussione” non viene visualizzato sotto i commenti.

5

Ho dimenticato che nel tuo caso non eravate su Discourse e che il mio codice utilizzava SCSS, non CSS; ecco perché alcune cose non funzionavano.

Ecco il CSS compilato:

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

Per le avatar in basso, puoi fare così:

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

image
Dovresti solo rendere, immagino, le due frasi sopra un po’ più grandi, ma puoi farlo anche da solo: basta trovare le classi HTML giuste usando gli strumenti per sviluppatori del tuo browser.

Forse devi controllare una impostazione in WP-Discourse?