Нужна помощь с CSS для комментариев под постом в WP

Поддержка WordPress
1

Итак, я подключил плагин WP Discourse к моему форуму, но комментарии под постами выглядят довольно некрасиво.

Пример:

image
image1068×846 106 KB

Буду очень признателен за любые предложения, как правильно изменить CSS, чтобы комментарии выглядели прилично!

2

Что насчёт этого?

.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

Альтернатива:

.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

Выглядит отлично. Спасибо! Мне нравится первый пример.

Нужно только исправить отступы между аватаром и именем пользователя, а также элементы, расположенные под комментариями:

image
image1201×1004 162 KB

Также непонятно, почему ссылка «Продолжить обсуждение» не отображается под комментариями.

5

Я забыл, что в вашем случае мы не используем Discourse, и мой код был написан на SCSS, а не на CSS, поэтому некоторые элементы не работали.

Вот скомпилированный 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;
}

Для аватаров внизу можно сделать следующее:

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

image
Вам, вероятно, нужно немного увеличить размер двух строк выше, но вы также можете сделать это самостоятельно — просто найдите нужные классы HTML с помощью инструментов разработчика в браузере.

Возможно, вам стоит проверить настройку в плагине WP-Discourse?