My comments section looks like butt

Request custom templates here. There is no guarantee that it will be made for you. Please be respectful, polite, and patient when posting a request.

My comments section looks like butt

Postby ryank_119 » November 29th, 2017, 4:17 pm

My comment section is pretty much unchanged from the default (other than cosmetic changes) and I despise it!

Replies to comments aren't nested under the original post, everything is just ordered by time posted.

I would love to have it look a lot more like Facebook or Reddit's nested comments but I'm not sure where to even start with coding something like that.

Does anyone have something similar on their site or at least a lead to some code?

Thanks!

( www.cityfolk.ca )
Image
User avatar
ryank_119
 
Posts: 84
Joined: November 12th, 2008, 8:49 pm
Location: Okanagan, BC

Re: My comments section looks like butt

Postby eishiya » November 29th, 2017, 4:39 pm

You should be able to adapt your existing code for nested comments pretty easily. Post your current code here here, perhaps? (Use the "code" BBCode to make it look nice.) The comment code is in the Comic Page section, between <!-- BEGIN loop_user_comments --> and <!-- END loop_user_comments --> (there's a similar loop for author comments). You could also grab the code from the default templates, but that'll mean re-styling them.

The basic structure for nested comments is like this:

Code: Select all
<div class="comment">
(your simple comment code goes in here, i.e. the comment text, delete/edit/reply links, avatar, etc, strucrured however you want it.)
   <div class="replies">
      {loop_user_comments.COMMENT_REPLIES}
   </div>
</div>


{loop_user_comments.COMMENT_REPLIES} copies the entire comment structure for the replies, and putting it in a "replies" DIV means you can have proper nesting by indenting "replies" with CSS, something like this:
Code: Select all
.replies {
margin-left: 30px;
}


Edit: You may also want to prevent too much nesting so that comments don't get too narrow. For example, this stops ending comments further after 5 levels:
Code: Select all
.replies .replies .replies .replies .replies .replies {
margin-left: 0px;
}
Image
User avatar
eishiya
 
Posts: 9685
Joined: December 5th, 2009, 11:17 am

Re: My comments section looks like butt

Postby ryank_119 » November 29th, 2017, 4:48 pm

Thanks! I'll give that a try and report back later!
Image
User avatar
ryank_119
 
Posts: 84
Joined: November 12th, 2008, 8:49 pm
Location: Okanagan, BC

Re: My comments section looks like butt

Postby ryank_119 » November 29th, 2017, 4:50 pm

Code: Select all
<!----------------------------------------------- BEGIN loop_user_comments --------------------------------------------------------------------------->
   <div id="comment">
   <a href="{loop_user_comments.POSTER_PROFILE_URL}" title="{loop_user_comments.NAME}"><img class="avatar" src="{loop_user_comments.POSTER_AVATAR_IMG_SRC}" height="{loop_user_comments.POSTER_AVATAR_IMG_HEIGHT}" width="{loop_user_comments.POSTER_AVATAR_IMG_WIDTH}" alt="view {loop_user_comments.NAME}'s profile"></a>
   
   <div class="commentheader">
      <h4>{loop_user_comments.DATE_POSTED}</h4>
      <h2><a href="{loop_user_comments.POSTER_PROFILE_URL}" title="{loop_user_comments.NAME}">{loop_user_comments.NAME}</a></h2>
   </div>
   
   <div class="commentcontent">

      <h3>{loop_user_comments.POST_TITLE}</h3>
      
      <!-- BEGIN switch_user_can_edit -->
      <a href="{loop_user_comments.EDIT_LINK}" onclick="var new_window = window.open('{loop_user_comments.EDIT_LINK}', 'sj_comment', 'height=320, width=420'); new_window.focus(); return false;"><span class="editdeletereply">edit comment</span></a> |
      <!-- END switch_user_can_edit -->
      
      <!-- BEGIN switch_user_can_delete -->
      <a href="{loop_user_comments.DELETE_LINK}" onclick="var new_window = window.open('{loop_user_comments.DELETE_LINK}', 'sj_comment', 'height=320, width=420'); new_window.focus(); return false;"><span class="editdeletereply">delete comment</span></a>
      <!-- END switch_user_can_delete -->

|
                 <a href="{loop_user_comments.REPLY_LINK}" onClick="var new_window = window.open('{loop_user_comments.REPLY_LINK}', 'sj_comment', 'height=320, width=420'); new_window.focus(); return false;">reply</a>
         

      <p>{loop_user_comments.MESSAGE}</p>
   
   </div>
   
   <div class="commentheader">end of message</div>
   
   </div>
   <!--------------------------------------------- END loop_user_comments ----------------------------------------------------------->
Image
User avatar
ryank_119
 
Posts: 84
Joined: November 12th, 2008, 8:49 pm
Location: Okanagan, BC

Re: My comments section looks like butt

Postby eishiya » November 29th, 2017, 5:09 pm

Try:

Code: Select all
<!----------------------------------------------- BEGIN loop_user_comments --------------------------------------------------------------------------->
   <div class="comment">
   <a href="{loop_user_comments.POSTER_PROFILE_URL}" title="{loop_user_comments.NAME}"><img class="avatar" src="{loop_user_comments.POSTER_AVATAR_IMG_SRC}" height="{loop_user_comments.POSTER_AVATAR_IMG_HEIGHT}" width="{loop_user_comments.POSTER_AVATAR_IMG_WIDTH}" alt="view {loop_user_comments.NAME}'s profile"></a>
   <div class="commentheader">
      <h4>{loop_user_comments.DATE_POSTED}</h4>
      <h2><a href="{loop_user_comments.POSTER_PROFILE_URL}" title="{loop_user_comments.NAME}">{loop_user_comments.NAME}</a></h2>
   </div>
   <div class="commentcontent">
      <h3>{loop_user_comments.POST_TITLE}</h3>
      <!-- BEGIN switch_user_can_edit -->
      <a href="{loop_user_comments.EDIT_LINK}" onclick="var new_window = window.open('{loop_user_comments.EDIT_LINK}', 'sj_comment', 'height=320, width=420'); new_window.focus(); return false;"><span class="editdeletereply">edit comment</span></a> |
      <!-- END switch_user_can_edit -->
     
      <!-- BEGIN switch_user_can_delete -->
      <a href="{loop_user_comments.DELETE_LINK}" onclick="var new_window = window.open('{loop_user_comments.DELETE_LINK}', 'sj_comment', 'height=320, width=420'); new_window.focus(); return false;"><span class="editdeletereply">delete comment</span></a>
      <!-- END switch_user_can_delete -->
|
                 <a href="{loop_user_comments.REPLY_LINK}" onClick="var new_window = window.open('{loop_user_comments.REPLY_LINK}', 'sj_comment', 'height=320, width=420'); new_window.focus(); return false;">reply</a>
      <p>{loop_user_comments.MESSAGE}</p>
   </div>
   <div class="commentheader">end of message</div>
   <div class="commentreplies">{loop_user_comments.COMMENT_REPLIES}</div>
   </div>
<!--------------------------------------------- END loop_user_comments ----------------------------------------------------------->


Some important notes:
I changed id="comment" to class="comment. IDs are unique, but "comment" is repeated many times on the page! That's bad coding. This change may break your existing styling. Go to your CSS and change #comment to .comment to fix it.


This modified code probably won't look any different to your existing comments (aside from ordering them better) until/unless you apply some styling. Here's a sample style that just indents the replies:

Code: Select all
.commentreplies {
margin-left: 30px;
}

.commentreplies .commentreplies .commentreplies .commentreplies .commentreplies .commentreplies {
margin-left: 0px;
}
Image
User avatar
eishiya
 
Posts: 9685
Joined: December 5th, 2009, 11:17 am

Re: My comments section looks like butt

Postby ryank_119 » November 29th, 2017, 5:35 pm

Bah, for some reason that removed my user comment section completely. I changed all the #comment to .comment on the overall template too.

Thanks for the assistance, Eishiya. I've been meaning to fix this for years, haha.
Image
User avatar
ryank_119
 
Posts: 84
Joined: November 12th, 2008, 8:49 pm
Location: Okanagan, BC

Re: My comments section looks like butt

Postby eishiya » November 29th, 2017, 5:40 pm

Try replacing
<!----------------------------------------------- BEGIN loop_user_comments --------------------------------------------------------------------------->
with
<!-- BEGIN loop_user_comments -->

and
<!--------------------------------------------- END loop_user_comments ----------------------------------------------------------->
with
<!-- END loop_user_comments -->

I am pretty sure those extra hyphens aren't meant to be there, and SJ is failing to recognize them as template code, instead it's just outputting the raw code.
Image
User avatar
eishiya
 
Posts: 9685
Joined: December 5th, 2009, 11:17 am

Re: My comments section looks like butt

Postby ryank_119 » November 29th, 2017, 5:45 pm

You are a genius! Thanks so much, that fixed it!

I usually stretch out the <!--------- dashes to divide the coding up better (I hate combing through coding) but that seems to have been the issue!

Thanks so much :)
Image
User avatar
ryank_119
 
Posts: 84
Joined: November 12th, 2008, 8:49 pm
Location: Okanagan, BC

Re: My comments section looks like butt

Postby eishiya » November 29th, 2017, 7:06 pm

You can always add your own stretchy comments next to the sections :D
Image
User avatar
eishiya
 
Posts: 9685
Joined: December 5th, 2009, 11:17 am

Re: My comments section looks like butt

Postby Campion » November 30th, 2017, 12:12 am

ryank_119 wrote:I usually stretch out the <!--------- dashes to divide the coding up better (I hate combing through coding) but that seems to have been the issue!



The <!-- XXXXXXXXXXX --> format is used by the parser to detect when to stop and start a function. If it doesn't see it exactly what it needs, it's ignored, and you get the results you had.
Image
User avatar
Campion
 
Posts: 74
Joined: September 14th, 2011, 4:11 pm

Re: My comments section looks like butt

Postby ryank_119 » November 30th, 2017, 12:53 am

Thanks guys, that makes a lot of sense.
Image
User avatar
ryank_119
 
Posts: 84
Joined: November 12th, 2008, 8:49 pm
Location: Okanagan, BC


Return to Template Requests

Who is online

Users browsing this forum: No registered users and 2 guests