Right at the end of the last screencast we figured out that our Photoshop design, as simple as it is, has a problem that is going to be too hard to overcome with code. Reply comments live within the same list item element as the original comments. That makes it hard to accomplish the design where the original comment box kind of stops and reply comments are simply indented.<\/p>\n
Instead, we’re going to have the “parent” comment encapsulate all the replies as well. I might be trying to make myself feel better, but the longer I look at it, the more appropriate this new design looks anyway. The grid feels more structurally sound.<\/p>\n
All the work that we do here in the comment threads is going to transfer pretty directly over into the forums once we get there.<\/p>\n","protected":false},"excerpt":{"rendered":"
Right at the end of the last screencast we figured out that our Photoshop design, as simple as it is, has a problem that is going to be too hard to overcome with code. Reply comments live within the same list item element as the original comments. That makes it hard to accomplish the design […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":18010,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"lodge-video.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":18624,"url":"https:\/\/css-tricks.com\/lodge\/v10\/109-preparing-for-working-on-comments\/","url_meta":{"origin":18630,"position":0},"title":"#109: Preparing for Working on Comments","date":"October 1, 2012","format":false,"excerpt":"I'm very excited to work on the comments section for this site. CSS-Tricks is home to some excellent discussions, thanks to all you fine folks. Designing the comments section is important because it needs to showcase those great discussions, keep those great discussions happening, and facilitate all the functionality of\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18628,"url":"https:\/\/css-tricks.com\/lodge\/v10\/111-building-comment-thread\/","url_meta":{"origin":18630,"position":1},"title":"#111: Building Comment Thread","date":"October 1, 2012","format":false,"excerpt":"The design for comments might look very simple. And it is! But I think simple is effective in this case. Comments are such an important part of CSS-Tricks I want them to be very readable and comfortable. Now we're going to jump into WordPress and make this comment thread a\u2026","rel":"","context":"With 5 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18626,"url":"https:\/\/css-tricks.com\/lodge\/v10\/110-photoshopping-comment-thread\/","url_meta":{"origin":18630,"position":2},"title":"#110: Photoshopping Comment Thread","date":"October 1, 2012","format":false,"excerpt":"We start digging into Photoshop here and designing the comments area. We start at the top, meaning the individual comments themselves (as opposed to the comment form). We snag an avatar to work with. We'll be using the Gravatar service for sure, as that's tailor made for this and integrated\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18632,"url":"https:\/\/css-tricks.com\/lodge\/v10\/113-photoshopping-comment-form\/","url_meta":{"origin":18630,"position":3},"title":"#113: Photoshopping Comment Form","date":"October 1, 2012","format":false,"excerpt":"In this screencast we jump back into Photoshop and design the comment form itself. As in, the inputs and textarea users need to fill out to leave a comment. This is placed by default at the end of the comment thread, way at the bottom of the page. Although, it\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5018,"url":"https:\/\/css-tricks.com\/snippets\/wordpress\/customize-comments-markup\/","url_meta":{"origin":18630,"position":4},"title":"Customize Comments Markup","date":"December 12, 2009","format":false,"excerpt":"In a typical WordPress theme you output the entire list of comments for a Post\/Page by using the function wp_list_comments(). This doesn't offer much by the way of customizing what HTML markup gets generated for that comment list. To write your own markup for the comment list, you can use\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1643,"url":"https:\/\/css-tricks.com\/video-screencasts\/44-hodgepodge-of-wordpress-tricks\/","url_meta":{"origin":18630,"position":5},"title":"#44: Hodgepodge of WordPress Tricks","date":"January 14, 2009","format":false,"excerpt":"It's WordPress Week here at CSS-Tricks, so I wanted to so a WordPress-themed screencast and cover a lot of mini-tips that haven't made it into previous WordPress screencasts. We cover: Listing categories with a built-in function and building a tabbed navigation from them with \"current tab\" functionality Numbering comments with\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/18630"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=18630"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/18630\/revisions"}],"predecessor-version":[{"id":209725,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/18630\/revisions\/209725"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/18010"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=18630"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=18630"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}