Question

Got a big problem here which killed my whole day… I cant fix it on my own, due to lack of CSS Skills I guess. I googled a lot, did a lot of trial+error, but nothing worked out…

I am building my first WordPress Template and would like to give my nested Comments some “style”. My problem is, that I dont know how to assign the “nested comments” specific css details, as the comments itself just use the basic comment css code, not the “nested” one!

So here is my HTML Code

<ol class="commentlist">
        <li class="comments" id="comment-<?php comment_ID(); ?>">
            <div class="commentAvatar"><?php echo $avatarurl["url"]; ?></div>
            <div class="comment" id="comment-<?php comment_ID() ?>">
                <div class="commentmetadata"><span><a href="#"><?php comment_author() ?></a></span> am <?php comment_date('j. F Y') ?> um <?php comment_time('H:i') ?> Uhr</div>
                    <?php comment_text() ?>
                    <?php if ( $comment->comment_approved == '0' ) : ?>
                        <em class="comment-awaiting-moderation">Achtung: Dein Kommentar muss erst noch freigegeben werden.</em>
                        <br />
                    <?php endif; ?>
                    <div class="reply">
                        <?php comment_reply_link( array_merge( $args, array( 'reply_text' => __( 'Reply <span>&darr;</span>', 'xxx' ), 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
                    </div><!-- .reply -->
                </div>
            <div style="clear:both"></div>
        </li>
</ol>

and this is my CSS Code

.commentlist{
    list-style:none;
    padding:0;
    margin:0;
    width:547px;
}
.comments{
    margin:0 0 15px;
    padding:0 0 15px;
    border-bottom:1px solid #333
}
    .commentAvatar{
        float:left;
    }
        .commentAvatar img{
            border:5px solid #339cdf; 
            border-radius:5px;
            max-width:75px;
            max-height:75px;
        }
    .comment{
        float:left;
        width:527px;
        padding:0 0 0 10px;
    }
    .commentmetadata{font-size:11px;}
    .commentmetadata a {font-size:18px; color:#f7941d; text-decoration:none}
    .commentlist ul.children{
        list-style:none;
        padding:0 0 0 35px;
        margin:0;
    }
        .commentlist ul.children li.comments .comment{
            float:left;
            width:492x;
            padding:0 0 0 10px;
        }
        .commentlist ul.children ul.children{
            list-style:none;
            padding:0 0 0 65px;
            margin:0;
        }

Weird thing is, the ul.children ul.children for does work, but ul.children li.comments .comment does not…

Nested Comments area activated 😉

Thanks for any help on this!

Answer 1

To assign styling to a nested comment, you should be able to do it with this selector:

.commentlist li li {}