This small patch moves the indenting of deep comments in threads from comment.module and into misc/drupal.css. This makes it easy to override the default indent by using a CSS file. For example, I needed to set up a right-to-left web site, and by default comments are indented from the left. I needed to have an easy way of changing it to be from the right.

CommentFileSizeAuthor
#2 comment-indent.patch1.94 KBcalanya
comment_indent_css.patch1.94 KBcalanya

Comments

dries’s picture

dries commented

Wouldn't nested div's de-align the comments vertically on what would be the non-indented side? I can't easily test it as the patch does not apply against HEAD.

calanya’s picture

calanya commented
Title: CSS styling of comment indentation. » Here's an updated patch.
StatusFileSize
new comment-indent.patch1.94 KB

I just made it. I hope it applies against HEAD.

I don't think adding more divs creates additional vertical spacing. Please test and see.

Ori

dries’s picture

dries commented

I seems to work with all themes. The approach is a bit awkward though as it adds a lot of nested <div>s.

calanya’s picture

calanya commented
Title: Here's an updated patch. » A possible different approach.

I also thought of giving each depth level its own class:

comment body
a reply to the previous comment

And then in the CSS:

.comment-indent-1 {
margin-left : 25px;
}
.comment-indent-2 {
margin-left : 50px;
}

It keeps the HTML clean with the price of a somewhat more awkward CSS.
This approach might be superior actually because it allows for a greater variety of designs (coloring comments based on their depth?).

calanya’s picture

calanya commented

I also thought of giving each depth level its own class:

<div class="comment-indent-1">comment body</div>
<div class="comment-indent-2">a reply to the previous comment</div>

And then in the CSS:

.comment-indent-1 {
margin-left : 25px;
}
.comment-indent-2 {
margin-left : 50px;
}

It keeps the HTML clean with the price of a somewhat more awkward CSS.
This approach might be superior actually because it allows for a greater variety of designs (coloring comments based on their depth?).

Brian@brianpuccio.net’s picture

Brian@brianpuccio.net commented

At what point does one stop indenting/modifying appearance? 5 comments in? 10? Pretty soon a very active thread will take up 5% of your browsers width. :D

Wouldn't it also be possibly to make an unordered list for this to handle indenting?

dries’s picture

dries commented
Title: A possible different approach. » Comment indenting

Please, use meaningful titles for issues.

moshe weitzman’s picture

moshe weitzman commented

an unordered list does seem like the 'proper' way to do this.

calanya’s picture

calanya commented
Title: Comment indenting » nested div's

In my previous attempt, I wrapped each comment in several div's, as many as its depth. As Dries pointed, that's a lot of extra DIV's.
A UL is not appropiate because it's hard to make UL's CSS work the same across browsers.
What about adding a single DIV to each comment, a wrapper around its child comments?
This keeps the number of extra tags to a minimum, and allows for easy styling of the tree structure.

<div class="comment">
  <div class="comment-title">Parent Comment</div>
  <div class="comment-body">This is the parent comment</div>
  <div class="comment-links">reply | moderate</div>
  <div class="comment-children">
     <div class="comment">
       <div class="comment-title">First Child</div>
       .
       .
       .
     </div>
     <div class="comment">
       <div class="comment-title">Secondt Child</div>
       .
       .
       .
     </div>
  </div>
</div>
dries’s picture

dries commented
Title: nested div's » Nesting comments

Please, use meaningful titles for issues (again).

Your last suggestion makes good sense IMO.

Why would you use 'comment-title' when 'title' is sufficent?

calanya’s picture

calanya commented

(Sorry, I thought follow ups were like comments, with their own subject)

I'll post a patch later tonight.

Re comment-title, it differentiates the comment's title from other DIV with class title which might some day be placed under comment. It's protective programming, probably not a good idea. I'll leave it out of the patch.

dries’s picture

dries commented

Looking forward to the patch as it makes for better semantic markup.

dries’s picture

dries commented
jonbob’s picture

jonbob commented
Title: Nesting comments » Render nested comments using nested DIV elements
chrismessina’s picture

chrismessina commented
Title: Render nested comments using nested DIV elements » Nested comments might be better rendered in definition lists
Component: other » comment.module

I've been thinking about how I would like to be able to more effectively style threaded comments and the way that has been proposed here seems to have little semantic basis. Especially if you were to completely disable all styles, threaded comments would render as though they were paragraphs. I think coding threaded comments as definition lists is more semantic and in fact would offer a more reasonable default layout structure.

Consider this example:

<dl class="comments">
  <dt class="comment" id="comment-1">
    <dl>...</dl>
  </dt>
    <dd class="reply" id="reply-1-1">
      <dl>...</dl>
    </dd>
    <dd class="reply" id="reply-1-2">
      <dl>...</dl>
    </dd>
  <dt class="comment" id="comment-2">
    <dl>...</dl>
  </dt>
    <dd class="reply" id="reply-2-1">
      <dl>...</dl>
    </dd>
</dl>

And now consider this rendering (ignore this theme's default formatting and view source):

Comment 1
Comment 1 Body
Chris Messina
Oct 22, 2004 3:45pm
Reply 1-1 Subject
Reply 1 Body
Bob Dole
Oct 22, 2004 3:55pm



Reply 1-2 Subject
Reply 2 Body
Ed Kennedy
Oct 22, 2004 4:33pm
Reply 1-3 Subject
Reply 3 Body
Donnie Darko
Oct 22, 2004 6:36pm



Comment 2
Comment 2 Body
Donnie Darko
Oct 23, 2004 10:36am
Reply 2-1 Subject
Reply 1 Body
Sarah Parker
Oct 23, 2004 12:26am



ontwerpwerk’s picture

ontwerpwerk commented

This issue is still not solved in a clean way,

At the moment comments get indented by <div style="margin-left: 25px;">[comment here]</div>

Which is overridable in the theme, but it should either be decided that this issue is closed and the inline CSS stays there to make themers lives hard - or the default behaviour should use no inline CSS.

I vote for no inline CSS.

ontwerpwerk’s picture

ontwerpwerk commented
Status: Active » Closed (duplicate)

This is handled in: http://drupal.org/node/87995