Форматирование раздела комментариев Discourse в WordPress (тема Divi)

Привет @newspring, я посмотрел, и у вас есть две проблемы.

Стилизация

Во-первых, как я уже упоминал выше, тема Divi использует собственные пользовательские элементы комментариев и предоставляет стили только для них. Это означает, что стандартные элементы комментариев, используемые Discourse, не имеют никакой стилизации. Кроме того, Divi не может стилизовать их, так как ищет свои собственные пользовательские элементы комментариев.

По сути, это означает, что блоки комментариев Divi работают из коробки только с темой Divi. Если вы используете блок комментариев от Discourse или любой другой блок комментариев, не относящийся к Divi, вам придется стилизовать его самостоятельно. Вы можете увидеть, о чем я говорю, если примените стандартную тему WordPress, например Twenty Nineteen. Комментарии Discourse будут стилизованы CSS-кодом, предоставленным этой темой, и будут выглядеть нормально.

Но не переживайте! CSS относительно прост. Вот один простой способ сделать их более привычными. Вы можете добавить этот CSS в Divi или любую другую тему, которая его загрузит.

CSS
.comment-meta,
.comment-metadata,
.comment-author,
.comment-content,
.comment-author img {
  display: flex;
  align-items: center;
  margin-right: 10px;
  font-size: 1rem !important;
}

.comment::marker {
  content: '';
}

.comment-body {
  margin-bottom: 10px;
}

.et_pb_comments_0 {
  background-color: white; 
}

В результате это будет выглядеть так:

Я думаю, что причина, по которой фразы «Продолжить обсуждение на…» и «Участники» окрашены в синий и желтый цвета, заключается в том, что вы добавили стилизацию непосредственно к ним через Divi. Если вы хотите изменить эти цвета, удалите эту пользовательскую стилизацию в Divi.

Конфликт комментариев Discourse и WordPress

У вас также все еще включены комментарии WordPress, поэтому в нижней части поста отображается еще одна форма для написания комментария. Если вы хотите использовать комментарии Discourse, вам, вероятно, стоит их отключить. Более подробное объяснение этого вопроса можно найти здесь: