Discourse comment section formatting on Wordpress (Divi theme)

Support WordPress
4

Hey @newspring, I’ve taken a look, and you’ve got two issues there.

Styling

Firstly, as I suggested above, the Divi theme is using it’s own custom comment elements, and only providing styles for it’s own custom comment elements. This means that the standard comment elements that Discourse uses don’t have any styling. It also means that Divi can’t style them, as it’s looking for its own custom comment elements.

Essentially, this means you can only use Divi comment blocks with a Divi theme out of the box. If you use a comment block from Discourse, or any other non-Divi comment block, you’ll need to style it yourself. You can see what I mean here if you apply a standard Wordpress theme such as Twenty Nineteen. The Discourse comments will be styled by CSS provided by that theme and look normal.

But fear not! The CSS is relatively straightforward. Here’s one simple way you can make it look more normal. You can add this CSS to Divi, or any other theme that will load it

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

The end result will look like this

Screen Shot 2020-11-16 at 1.53.59 PM
Screen Shot 2020-11-16 at 1.53.59 PM2298×650 170 KB

I think the reason “Conitinue the discusson at…” and “Participants” are blue and yellow is because you’ve managed to add styling to those directly via Divi. If you want to change those colors, remove that custom styling in Divi.

Discourse and Wordpress comment conflict

You’ve also still got Wordpress comments turned on, which is why you’re seeing another comment compose at the bottom of the post. If you want to use Discourse comments, you’ll probably want to turn that off. Check out my longer explaination of that here

4 Likes