CODEWITHSUNDEEP
htmlcss
CodeDevelopr
CodeDevelopr

Reputation: 1265

Style a nested child Unordered List with CSS

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

enter image description here

Upvotes: 1

Views: 522

Answers (3)

David Brainer
David Brainer

Reputation: 6331

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.

Upvotes: 2

Matt
Matt

Reputation: 1757

Using CSS you can remove Bullet points and the padding to align them with the main comment above just use:

padding:none;
list-style:none;

On the li div that wraps the child comments.

But the best way is like Matt says below.

Upvotes: 0

Matt H
Matt H

Reputation: 6532

Just turn off nested comments in Wordpress. It's in Settings, Discussion, Enable threaded (nested) comments

Upvotes: 0

Related Questions