CODEWITHSUNDEEP
htmlcsswordpress
scorpnetwork
scorpnetwork

Reputation: 35

How to assign nested comments styling the right way in Wordpress?

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!

Upvotes: 0

Views: 937

Answers (2)

alesub
alesub

Reputation: 1492

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

.commentlist li li {}

Upvotes: 1

Nishant
Nishant

Reputation: 24

If you want to overwrite the default style of wordpress, you can try this in Css.

.anyclass

{
    color:#F00 !important;
}

try implement this in any class

!important will overwrite all the Css Styles defined previous

or you can try this

find out the nearby class for the tag you want to change

for eg.

Hello

so u can change like this also

.main span

{
   color:#F00 !important;
}

Hope It can resolve your problem

Upvotes: 0

Related Questions