WordPress.org

1. RichAdams
   Member
   Posted 9 months ago #

   I'm running a child theme of Twenty Eleven and I would like to remove the indentation that appears on the second and subsequent threaded comments. See this link for an example of the problem.

   As you can see, the second and subsequent threaded comments are increasingly indented.

   I would like that all threaded comments have the same indentation as the first one (the one that has text "Test Test Test" in the link above).

   I am a complete beginner when it comes to website construction, so I would appreciate a hand holding reply if any of you have the time.

   Many thanks.

2. alchymyth
   The Sweeper
   Posted 9 months ago #

   left and right padding in this style (to be added to the child styles) determines the indent from the main comment to the first reply:
   

   .commentlist > li.comment {
   	padding: 1.625em 0.4em;
   }

   and left and right padding in here determines the indents between replies of different levels:
   

   .commentlist .children li.comment {
   	padding: 1.625em 0.4em;
   }

   (example padding set to 0.4em - change that to 0em or whatever you need)

   http://www.w3schools.com/css/css_padding.asp

   edit - ps:
   this might be needed as well:
   

   .commentlist .children li.comment .comment-meta {
   	margin-left: 70px;
   }

3. RichAdams
   Member
   Posted 9 months ago #

   Thanks for the reply, Alchymyth. Many of your posts here have already helped me get this far with my site.

   If I have understood correctly, the code (I have had a good play around with it)

   .commentlist .children li.comment {
   	padding: 1.625em 0.4em;
   }

   will apply to each new threaded comment, causing an indent.

   If I want the second and further threaded comments to be indented/formatted exactly like the first threaded comment, then I don't see how adjusting the padding will help me. All I have been able to achieve is changing their relative sizes.

   I suppose, in my non-techy way of expressing things, what I'm asking is: is there a way to preserve the current layout of threaded comment one, and have all subsequent threaded comments look exactly the same?

   Edit:
   re: ps. I have just seen your edit. I will see what I can do with it...

4. RichAdams
   Member
   Posted 9 months ago #

   I have had a play around with

   .commentlist .children li.comment .comment-meta {
   	margin-left: 70px;
   }

   as well.

   I find myself in the same position. All three pieces of code appear to globally affect the threaded comments, whereas I am trying to effect a change of layout in only the second and subsequent threaded comments.

5. alchymyth
   The Sweeper
   Posted 9 months ago #

   whereas I am trying to effect a change of layout in only the second and subsequent threaded comments

   just checking - is that what you mean:

   main comment (bright grey)
   -first indented reply (darker grey)
   --second reply, indented
   --third reply, not further indented?
   --fourth reply

   the 'exact style for the first indented reply is:
   

   .commentlist .children li.comment.depth-2 {
   	padding: 1.625em 0.4em;
   }

   the 'exact style for the second indented reply is:
   

   .commentlist .children li.comment.depth-3 {
   	padding: 1.625em 0.4em;
   }

   and so on...

   similar with the comment-meta;
   for the first indented reply:
   

   .commentlist .children li.comment.depth-2 .comment-meta {
   	margin-left: 70px;
   }

   setting that margin there will effect all the replies after.
   i.e. if you want the second indented reply to have a different margin, you need to add, for example:
   

   .commentlist .children li.comment.depth-3 .comment-meta {
   	margin-left: 50px;
   }

   hope this helps - nobody said css is easy ;-)

6. RichAdams
   Member
   Posted 9 months ago #

   Edit: skip to the next post - I think I have a solution...

   It's certainly a steep learning curve! :-)

   I have a partial, and probably inelegant, solution:

   .commentlist .children li.comment.depth-3 {
   	margin-left: -1.625em;
   }
   
   .commentlist .children li.comment.depth-4 {
   	margin-left: -1.625em;
   }
   
   .commentlist .children li.comment.depth-5 {
   	margin-left: -1.625em;
   }

   If you check the page, you'll see what I was trying to do.

   All the threaded comments are now left-aligned under one another, which is good. The problem now is that each threaded comment, after the first one, gets progressively less wide.

   So the question now is: how do I make all the threaded comments have the same content width as the first one?

   (Or maybe the question should be: am I completely barking up the wrong tree with my solution?)

   Edit: p.s

   just checking - is that what you mean:

   main comment (bright grey)
   -first indented reply (darker grey)
   --second reply, indented
   --third reply, not further indented?
   --fourth reply

   I'm trying to get:

   main comment (bright grey)
   -first indented reply (darker grey)
   -second reply, layout as first
   -third reply, layout as first
   -fourth reply, layout as first

7. RichAdams
   Member
   Posted 9 months ago #

   Aha!

   I think I've got it:
   

   .commentlist .children li.comment.depth-3 {
   	margin-left: -1.625em;
   	margin-right: -1.625em;
   }
   
   .commentlist .children li.comment.depth-4 {
   	margin-left: -1.625em;
   	margin-right: -1.625em;
   }
   
   .commentlist .children li.comment.depth-5 {
   	margin-left: -1.625em;
   	margin-right: -1.625em;
   }

   Which gives me this, which is what I was after.

   So my final question is: is this a clunky way of doing it, or can I pat myself on the back for taking a few steps forward in the murky world of CSS?

8. alchymyth
   The Sweeper
   Posted 9 months ago #

   can I pat myself on the back for taking a few steps forward in the murky world of CSS?

   yes - well done ;-)

   that is a totally valid way of styling the comments.

9. RichAdams
   Member
   Posted 9 months ago #

   Thanks, Alchymyth, for steering me down the right path, much appreciated :-)

   Note: The links in this thread will soon go dead; as I finish building my site, I will be removing all the test posts.

Reply

You must log in to post.