Formatting Discourse Comments on WordPress

(Molly) #1

I’ve uploaded the discourse commenting system onto our WordPress site and our community is excited to have the articles published into the forum. So far, the comments are showing up on the articles, but they look a little wonky. I’ve been trying to mess around with the HTML tags and this is as structured as I’ve been able to get it:

I’m sure it’s in the HTML tags but I’m not super familiar with them. Here’s what I have for the two I’m assuming are most relevant:

HTML Template for when there are comments:

<div id="comments" class="comments-area">
  <h3 class="comments-title">Notable Replies</h3>
  <ol class="comment-list">{comments}</ol>
  <div class="respond" class="comment-respond">
    <p class="more-replies">{more_replies}</p>
    <p class="comment-reply-title">{participants}</p>
<h3 id="reply-title" class="comment-reply-title"><a href="{topic_url}">Continue the discussion</a></h3>
  </div><!-- #respond -->

HTML Template for each comment:

<li class="comment even thread-even depth-1">
  <article class="comment-body">
    <footer class="comment-meta">
      <div class="comment-author vcard">
        <img alt="" src="{avatar_url}" class="avatar avatar-64 photo avatar-default" height="50" width="50">
        <b class="fn"><a href="{topic_url}" rel="external" class="url">{username}</a></b>
        <span class="says">:</span>
      </div><!-- .comment-author -->
      <div class="comment-metadata">
        <time pubdate=""datetime="{comment_created_at}">{comment_created_at}</time>
      </div><!-- .comment-metadata -->
    </footer><!-- .comment-meta -->
    <div class="comment-content">{comment_body}</div><!-- .comment-content -->
  </article><!-- .comment-body -->

Any fixes or suggestions would be greatly appreciated!

(Jeff Atwood) #2

Can you provide the URL to this blog entry that you posted a screenshot of, so we can look closer?

(Molly) #3

Oops! Forgot to hyperlink it in the first one. Here ya go: - Ghost Volta Resources and Information.

(Molly) #4

We’re having some hosting issues so you may get a 502 error here and there. I’ve been having a fun service ticket chain with our host.

I wonder if the formatting is odd because of our site’s WordPress theme?

At least our forums work, right? :wink:

(Kane York) #5

This CSS should do you for a while, until you can come up with something that actually looks good (as opposed to merely properly laid out):

#comments .comment-metadata {
    float: right;

#comments ol.comment-list {
    list-style: none;

#comments .respond {
    clear: both;
    padding-left: 36px; /* eyeballed it */
    border-top: 1px solid #888;

#comments h3#reply-title {
    display: inline-block;
    font-size: 14px;
    margin: 10px;
    font-family: 'Roboto Slab',sans-serif; /* your main non-condensed text font, I think */

#comments p.comment-reply-title {
    display: inline-block;

(Molly) #6

Thank you so much! That looks a million times better.

I’ve seen the way they’re displayed here and I like the line separating each comment. Would anyone be willing to help me me do something similar?

(Steven Greco) #7

whoops somehow my reply got cut off.

Meant to say that added a bottom border to the Li style.

(Molly) #8

They just have a bottom? Or did you mean button?

(Nukeador) #9

Since we had a custom theme with no comments we had to style comments ids and classes from scratch. We styled them very similar to discourse blog.

Here the code:

/* Comments */

#comments h2.comments-title {
    color: rgb(153, 153, 153);
    margin: 1em 0px;
    font-size: 2em;

#comments .comment-list li {
    border-top: 1px solid rgb(221, 221, 221);

#comments article.comment-body {
    margin: 2em 0px;

#comments .comment-author img {
    float: left;
    margin-right: 14px;

#comments .comment-author .fn {
    font-size: 1.7em;

#comments .comment-metadata {
    font-size: 1.4em;
    margin-top: 1px;

#comments .comment-content {
    margin-top: 37px;
    font-size: 1.5em;

#comments .comment-reply-title a {
    font-size: 1.7em;
    color: rgb(255, 255, 255);
    background-color: rgb(0, 136, 204);
    border-radius: 5px;
    padding: 9px 15px;
    float: right;

Result example.