Discourse comment section formatting on Wordpress (Divi theme)

[newspring (EvaG)]

I have integrated Wordpress website with Discourse forum.
When I added a comments section to a blog, the formatting of the section is not accepting changes made in Divi. As a result, some of the text is way too large (“Notable Replies” and “Participants”).
Is there a way to fix the formatting?

[angus (Angus McLeod)]

Hey there

Comments in the Discourse plugin use the same elements as normal wordpress comments, so they will work out of the box with most wordpress themes. However pagebuilders like Divi take over the wordpress element and style structure quite significantly (more than a standard theme), and issues like this can result with any customisation (Discourse or otherwise).

This is more of an issue with Divi, and your child theme, than it is with the Discourse Wordpress Plugin, but if you link me to your site, I can suggest some CSS to add for a basic fix.

[newspring (EvaG)]

Hi Angus,
Typically Divi would retain the ability to change formatting. However in this case, only some of the text is responding to font changes.
Your help would be much appreciated.
The website is: https://about.openfoodnetwork.ca/tech-enabling-on-line-food-distribution

[angus (Angus McLeod)]

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

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

Issues with setting up Discourse with Wordpres

Hey there, great questions! You can do either. The key is you need to establish the connection between the two. Once that is there, the commenting functions will work. I’m guessing you know how to do handle the “Publish to Discourse” option, i.e. when the post is created. For the linking option, you can link any Discourse post to a Wordpress Post by using the “Link to Existing Topic” publishing option in the sidebar when you’re editing the Wordpress post. The key here is that when you have t…

[newspring (EvaG)]

I got Divi support help with the CSS. Any comments made on Discourse will be now formatted (colours were to show which CSS element was tight to which text).
From your comment I gather that you cannot have comments posted on Wordpress site to be shown on Discourse if you are already showing comments from Discourse. Is this correct?

[angus (Angus McLeod)]

@newspring

I got Divi support help with the CSS. Any comments made on Discourse will be now formatted (colours were to show which CSS element was tight to which text).

Great, glad you got that sorted.

@newspring

From your comment I gather that you cannot have comments posted on Wordpress site to be shown on Discourse if you are already showing comments from Discourse

I’m not sure if I’m 100% clear on your meaning, but if you mean can you import your old Wordpress comments into Discourse so they appear as Discourse posts, there isn’t an automated process to do that.

An import like that has to be done manually by someone familiar with the technical aspects of it. Keep in mind that this would involve things like ensuring all your Wordpress commenters had user accounts on your Discourse. It’s possible, but it requires custom work.

I would recommend you do the following:

1. Keep your existing Wordpress comments visible using this setting in the Discourse plugin “Comments” settings: “Show Existing WP Comments”

2. Disable new Wordpress comments following the steps in the post I linked above.

3. Enable Discourse commenting.

The upshot is that all your existing Wordpress comments will be visible on Wordpress, people will be able to post new comments on Discourse, and all those new comments will also be visible on Wordpress.