Necesito ayuda para arreglar el CSS de los comentarios debajo del post en WP

Soporte WordPress
1

Así que conecté el plugin WP Discourse con mi foro, pero los comentarios debajo de las publicaciones se ven bastante feos.

Ejemplo:

image
image1068×846 106 KB

¡Cualquier sugerencia sobre cómo modificar el CSS correctamente para que los comentarios se vean decentes será muy apreciada!

2

¿Qué hay de esto?

.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

Eso se ve genial. ¡Gracias! Prefiero el primer ejemplo.

Solo necesito corregir el espaciado entre el avatar y el nombre de usuario, y también lo que aparece debajo de los comentarios:

image
image1201×1004 162 KB

También no estoy seguro de por qué el enlace a Continuar la discusión no se muestra debajo de los comentarios.

5

Se me olvidó que en tu caso no estamos en Discourse y mi código usaba SCSS, no CSS; por eso algunas cosas no funcionaron.

Aquí está el 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 los avatares inferiores, puedes hacer esto:

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

image
Supongo que solo necesitas hacer un poco más grandes esas dos líneas, pero también puedes hacerlo tú mismo; simplemente busca las clases HTML correctas usando las herramientas de desarrollo de tu navegador.

Quizás necesites revisar una configuración en WP-Discourse.