Move Comment Like Box

[Skyrie]

How do I move the comment like box (acomment-reply-like-content) to the main comments ul? It’s currently called under the parent acomment-options, but that makes it really hard to format.

I’ve included a picture of what I mean. Thanks!

[Alyssa]

@skyrie it is under the parent comment, it is where it should be. Your arrow points to other comments. Why don’t you post an image of what you are trying to accomplish and perhaps I can help out better 🙂

[Skyrie]

@tjchester I’m trying to add a space between the like box and the sub comments on a custom theme. The problem is if I apply the margin to the like box itself then it shows up on liked comments that don’t have sub comments as well, which means that they look odd as they have an unneeded margin. So either I find a way to move the like box to the sub comments section or I find a way to give the sub comments section a class (right now it’s just a ul).

I’ve tried everything else I can think of (including several CSS hacks and mixing borders with margins), all with an unwanted gap somewhere. I’ll post a picture a bit later so you can see what I mean.

[Alyssa]

@skyrie we have a 1px border between the main content like text and the first sub comment. I believe this is the area you are referring to. If so, add this to custom.css:
#buddypress div.activity-comments ul li:nth-child(2){border-top:10px solid white;}

[Skyrie]

@tjchester I’m sorry, I actually explained it wrong because of some of the CSS hacks I did. I’ve removed all of the changes I made and this is what I’m left with (picture included).

I want to add a 6px border between the top of the like box and the buttons. The problem is, as I said before, the like box is a separate ul to the comments. If I try to add a top margin to the like box itself, then any section that has sub comments but no likes will not have that gap. If I try and add the gap to the top of the sub comments, then I end up with a gap above both the like box and under it.

The only way I can think of solving this is to either move the like box into the sub comments ul, or to give the sub comments ul its own class.

[Alyssa]

@skyrie perhaps this is what you want:

.activity-comments ul li{border-bottom:1px solid black !important;}
.activity-comments .activity-like-count{border-bottom:none !important;}

[Skyrie]

@tjchester No, that didn’t work. Here’s the result of your code, whereas I want a border where the red line is drawn.

[Alyssa]

@skyrie so then this:
#buddypress div.activity-meta{border-bottom:1px solid black;}

[Skyrie]

@tjchester As I said earlier, I’ve tried all of this and nothing works because the like box is under a separate ul. 🙁
The code you gave me adds a border in the wrong place. Even if I add it to the inner like box (see the second image) it doesn’t apply the same gap to sub comments without likes. There’s no way to do this unless I move the inner like box to the sub comments, or I give the sub comments their own class.

[Alyssa]

@skyrie what if you add this:
.acomment-reply-like-content{border-top:1px solid black !important;}

[Skyrie]

@tjchester That was one of the first things I tried. It fixes the problem for sub comments with likes and without, but messes things up for comments that don’t have likes or sub comments. Now I have an extra 6px gap that I can’t remove because I can’t target comments that don’t have likes or sub comments.

The way the like box is positioned makes it impossible to format without moving it, at least for sub comments.

[Alyssa]

@skyrie can you get by with the space between the subcomment and main comment?
.activity-comments>ul>li>ul{border-top:1px solid black !important;}

[Skyrie]

@tjchester Unfortunately not, since the space has to be at least 6px in order for it to have a big enough gap between the links and the like box. At 6px it is far too big to look clean.

The only way to do this is going to be to move the like box or to give the sub comments their own class. I wish BuddyPress had a has-sub-comments class like it has a has-comments one, then it would have been much easier.

[Alyssa]

@skyrie perhaps you may want to look into doing this via javascript/jquery

[Skyrie]

@tjchester That’s what I thought I’d have to end up doing. Do you know what JS file I’d need to edit to change where the comment like box is being displayed?