Question

I am having some trouble working on a wordpress theme.

I am styling the Comments with CSS to look like this image below, you can see that the List items <li>comment stuff</li> have 3 DIVs inside them for an Avatar user image, an Arrow image connecting the comment and Avatar, and a DIV for the comment itself.

The trouble I am having is the Child comments, they are like <ul class="child"><li></li></ul> Nested Child UL list that is INSIDE my comments main list item.

So in the image below you get an idea how the comment list should look like, then you see the RED box I have drawn around the Child comments, you can see that they are nested inside the main comment box.

I need to somehow get these child comments outside of the main comment box so that each child comment can have it’s own box.

I cannot figure out how to accomplish this as the child comments remain NESTED, I only can change the CSS for that.

Ideally I would like to make the child comments look exactly like the main comments except they will be indented more underneath the main comments.

If you have any ideas how to do this I could really use the help, I have a Dabblet (just like JSFiddle but cooler for CSS) page here with the code in question http://dabblet.com/gist/1555382

Answer 1

If for some reason you need to leave threaded comments on, you could start by styling the comment box instead of the list item:

.commentlist > li.comment {
    position: relative;
    width: 400px;
}

.c-body {
    padding: 9px;
    border-image: initial;
    margin: 20px 0 30px 0;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 6px 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
    border-radius: 6px 6px 6px 6px;
    background-color: white;
}

That should get you part of the way, and from there you can style the child comments however you like.