Canvas Docs

Comment Type

Comments

Canvas provides a threaded comment list plus a reply form for single blog posts. The markup mirrors the WordPress comment structure so it drops into WordPress themes cleanly, but works as static HTML too. All markup below is from blog-single-both-sidebar.html.

Structure

The comments area lives in #comments. It holds a title, an ordered .commentlist, and the reply form in #respond.

<div id="comments">

    <h3 id="comments-title"><span>3</span> Comments</h3>

    <!-- Comments List -->
    <ol class="commentlist">
        <!-- comment items -->
    </ol><!-- .commentlist end -->

    <div class="clear"></div>

    <!-- Comment Form -->
    <div id="respond">
        <!-- reply form -->
    </div><!-- #respond end -->

</div><!-- #comments end -->

A Single Comment

Each comment is an <li class="comment ..."> with a nested .comment-wrap. Inside are two blocks: .comment-meta (the avatar) and .comment-content (author, date, body, and reply link).

<li class="comment even thread-even depth-1" id="li-comment-1">

    <div id="comment-1" class="comment-wrap">

        <div class="comment-meta">
            <div class="comment-author vcard">
                <span class="comment-avatar">
                <img alt="Commenter avatar" src='https://0.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=60' class='avatar avatar-60 photo avatar-default' height='60' width='60'></span>
            </div>
        </div>

        <div class="comment-content">
            <div class="comment-author">John Doe<span><a href="#" title="Permalink to this comment">April 24, 2012 at 10:46 am</a></span></div>
            <p>This is exactly the kind of clear, practical write-up I was looking for.</p>
            <a class='comment-reply-link' href='#'><i class="bi-reply-fill"></i></a>
        </div>

        <div class="clear"></div>

    </div>

</li>

Threaded Replies

Nested replies go in a <ul class="children"> inside the parent <li>. The depth is reflected in the item class (depth-1, depth-2). Child avatars use the smaller avatar-40 size.

<li class="comment even thread-even depth-1" id="li-comment-1">

    <div id="comment-1" class="comment-wrap">
        <!-- parent comment content -->
    </div>

    <ul class='children'>

        <li class="comment byuser comment-author-_smcl_admin odd alt depth-2" id="li-comment-3">
            <div id="comment-3" class="comment-wrap">
                <div class="comment-meta">
                    <div class="comment-author vcard">
                        <span class="comment-avatar">
                        <img alt="Commenter avatar" src='https://1.gravatar.com/avatar/30110f1f3a4238c619bcceb10f4c4484?s=40' class='avatar avatar-40 photo' height='40' width='40'></span>
                    </div>
                </div>
                <div class="comment-content">
                    <div class="comment-author"><a href='#' rel='third-party nofollow' class='url'>SemiColon</a><span><a href="#" title="Permalink to this comment">April 25, 2012 at 1:03 am</a></span></div>
                    <p>Glad it helped, John. More tutorials like this are on the way soon.</p>
                    <a class='comment-reply-link' href='#'><i class="bi-reply-fill"></i></a>
                </div>
                <div class="clear"></div>
            </div>
        </li>

    </ul>

</li>

The Reply Form

The comment form lives in #respond as a <form id="commentform" class="row">. It uses standard Bootstrap form-group columns and form-control fields, plus a Canvas .button submit.

<div id="respond">

    <h3>Leave a <span>Comment</span></h3>

    <form class="row" action="#" method="post" id="commentform">
        <div class="col-md-4 form-group">
            <label for="author">Name</label>
            <input type="text" name="author" id="author" value="" size="22" tabindex="1" class="form-control">
        </div>

        <div class="col-md-4 form-group">
            <label for="email">Email</label>
            <input type="text" name="email" id="email" value="" size="22" tabindex="2" class="form-control">
        </div>

        <div class="col-md-4 form-group">
            <label for="url">Website</label>
            <input type="text" name="url" id="url" value="" size="22" tabindex="3" class="form-control">
        </div>

        <div class="w-100"></div>

        <div class="col-12 form-group">
            <label for="comment">Comment</label>
            <textarea name="comment" cols="58" rows="7" tabindex="4" class="form-control"></textarea>
        </div>

        <div class="col-12 form-group">
            <button name="submit" type="submit" id="submit-button" tabindex="5" value="Submit" class="button button-3d m-0">Submit Comment</button>
        </div>
    </form>

</div><!-- #respond end -->

Options

  • Depth classes: depth-1, depth-2, etc. control indentation of threaded replies.
  • Avatar sizes: top-level comments use avatar-60; nested replies use avatar-40.
  • State classes: even, odd, alt, thread-even, thread-odd alternate row styling. byuser and comment-author-* mark author comments.
  • Reply link: .comment-reply-link with a bi-reply-fill icon.

Tips

  • Always close each .comment-content with a <div class="clear"></div> so the floated avatar does not overlap the next comment.
  • The comment count in the #comments-title heading wraps the number in a <span> for styling.
  • The reply-link anchor points at #respond in a live site so clicking it jumps to and repositions the comment form.
  • Field tabindex values keep keyboard tab order sensible: Name, Email, Website, Comment, Submit.

Code Snippets

Facebook Comments

Use the official Facebook Comments plugin inside the post comments area. Add the SDK root, then the comments element.

<!-- Load the Facebook SDK once, right after <body> -->
<div id="fb-root"></div>
<script async defer crossorigin="anonymous"
    src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v19.0"></script>

<!-- Place where comments should appear -->
<div class="fb-comments"
     data-href="https://yourdomain.com/your-post-url"
     data-width="100%"
     data-numposts="5"></div>

Notes:

  • Set data-href to the canonical URL of the current post so threads stay unique.
  • data-width="100%" keeps it fluid inside Canvas' content column.
  • Load the SDK script only once per page.

Disqus Comments

Drop the standard Disqus embed into the comments area of a post. Canvas ships a #disqus_thread container in its blog templates.

<div id="comments" class="my-5">
    <div id="disqus_thread"></div>
</div>

<script>
    var disqus_config = function () {
        this.page.url = window.location.href;
        this.page.identifier = 'unique-post-id';
    };
    (function () {
        var d = document, s = d.createElement('script');
        s.src = 'https://YOUR-SHORTNAME.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();
</script>

Replace YOUR-SHORTNAME with your Disqus site shortname and set a stable page.identifier per post so comments stay attached to the right article.

Was this page helpful?