Serendipity themes give us nearly unlimited customization options. We can change the color of a background, use of fonts, width of any particular browser's viewport, even the structure of any specific element.
I have found myself wanting to modify the display of comments for visual reasons in the past, but in my latest experiment, I wanted to modify the display of comments for semantic reasons.
My solution is to emit comments as an unordered list. This solution may not be better, it may not be worse, but it was an enjoyable exercise and maybe it will be useful to some portion of Serendipity users or Serendipity theme developers.
Wednesday, January 21. 2015
Serendipity comments via an unordered list

Serendipity uses threaded comments by default. Threaded comments make it easier to understand which comments are replies to other comments by indenting replies. Each comment contains a comment depth value indicating where in the hierarchy that particular comment belongs.
For example, a comment to the original post, and not a reply to any other comment, has a comment "depth" of 0. A reply to that comment would have a comment depth of 1. A reply to that reply would have a comment depth of 2. And so on.
To achieve the desired indented appearance, the original default comments template (comments.tpl) used inline styling. The comment depth was multipled by 20 to produce an inline left padding value:
As I looked at these examples, two thoughts occurred to me. The first was that I would like to eliminate inline styling, and the second was that the indented appearance reminded me of a different html element, that being an unordered list.
By its very design, unordered lists offer natural indentation:
The challenge for me was to properly build the unordered list using the comment depth value in comments.tpl. The idea is that each time through the loop, we close previously opened elements before opening the next element. The final pass through the loop, we check to see which elements remain open, and close them. The entire thing relies simply on the value of the current and previous comments' respective depth.
In the example code below, the exact html code building the comment has been removed for simplicity:
You can see a screenshot of my test using this method by clicking on the photo at the top of this article. Below you can download a zipfile containing the smarty templates comments.tpl and trackbacks.tpl. The styles have been included within comments-style.css. These are all the styles I wanted to achieve my desired appearance, but only a few are actually necessary to achieve the indented appearance I was seeking.
Disclaimer: I did not use html5 elements in my example because the template I was using is not html5. It should be pretty easy to modify this using html elements like <article>, <time> etc. Also, the smarty code above requires s9y version 1.7 or higher.
For example, a comment to the original post, and not a reply to any other comment, has a comment "depth" of 0. A reply to that comment would have a comment depth of 1. A reply to that reply would have a comment depth of 2. And so on.
To achieve the desired indented appearance, the original default comments template (comments.tpl) used inline styling. The comment depth was multipled by 20 to produce an inline left padding value:
<div id="serendipity_comment_{$comment.id}" class="serendipity_comment serendipity_comment_author_{$comment.author|@makeFilename} {if $entry.author == $comment.author}serendipity_comment_author_self{/if} {cycle values="comment_oddbox, comment_evenbox"}" style="padding-left: {$comment.depth*20}px">The Bulletproof template did nearly the exact same thing, but used left margin instead of padding:
<div id="serendipity_comment_{$comment.id}" class="serendipity_comment serendipity_comment_author_{$comment.author|@makeFilename} {if $entry.author == $comment.author}serendipity_comment_author_self{/if} {cycle values="comment_oddbox, comment_evenbox"}" style="margin-left: {$comment.depth*10}px">
As I looked at these examples, two thoughts occurred to me. The first was that I would like to eliminate inline styling, and the second was that the indented appearance reminded me of a different html element, that being an unordered list.
By its very design, unordered lists offer natural indentation:
- List item 1
- List item 1 sub 1
- List item 2
- List item 2 sub 1
- List item 2 sub 2
- List item 3
The challenge for me was to properly build the unordered list using the comment depth value in comments.tpl. The idea is that each time through the loop, we close previously opened elements before opening the next element. The final pass through the loop, we check to see which elements remain open, and close them. The entire thing relies simply on the value of the current and previous comments' respective depth.
In the example code below, the exact html code building the comment has been removed for simplicity:
<ul class="comment-list"> {foreach from=$comments item=comment name="comments"} {if $smarty.foreach.comments.first}{assign var="prevdepth" value=$comment.depth}{/if} {if ($comment.depth == $prevdepth) && !$smarty.foreach.comments.first} </li> {elseif $comment.depth < $prevdepth} {for $i=1 to $prevdepth} </li> </ul> {/for} </li> {elseif $comment.depth > $prevdepth} <ul class="comment-children"> {/if} <li id="comment-{$comment.id}" class="comment-list-item"> <!-- comment html structure goes here --> {if $smarty.foreach.comments.last} {if $comment.depth>0} {for $i=1 to $comment.depth} </li> </ul> {/for} {/if} </li> {/if} {assign var="prevdepth" value=$comment.depth} {foreachelse} <li class="comment-list-item"><div class="serendipity_center nocomments">{$CONST.NO_COMMENTS}</div></li> {/foreach} </ul>In the code example above, each time comment depth increases, a new <ul> is opened using the same class of "comment-children". That class will have a left margin assigned to it, but because this is an unordered list, the margin is relative to that particular list's position in the hierarchy, and therefore pushes that list item further right.
You can see a screenshot of my test using this method by clicking on the photo at the top of this article. Below you can download a zipfile containing the smarty templates comments.tpl and trackbacks.tpl. The styles have been included within comments-style.css. These are all the styles I wanted to achieve my desired appearance, but only a few are actually necessary to achieve the indented appearance I was seeking.
Disclaimer: I did not use html5 elements in my example because the template I was using is not html5. It should be pretty easy to modify this using html elements like <article>, <time> etc. Also, the smarty code above requires s9y version 1.7 or higher.
7 Comments
| No Trackbacks
Defined tags for this entry: serendipity themes
Garvin
Homepage
01/22/2015 09:02AM
Don Chambers
Homepage
01/22/2015 11:01AM
onli
Homepage
01/22/2015 09:42AM
To nest the comments is not a bad idea at all. I wished though we'd find nicer code for that.
Don Chambers
Homepage
01/22/2015 11:08AM
onli
Homepage
01/22/2015 12:36PM
Don Chambers
Homepage
01/22/2015 11:13PM
Don Chambers
Homepage
02/09/2015 02:49PM
http://board.s9y.org/viewtopic.php?f=5&t=20211&p=10441917#p10441917"