[TommyParticipant]

Hi X,

This is doing my tree in! Can your experts answer the following?

Current i’m applying a border to article.comment which applies to all comments. What I would really like to do is apply a different color border depending on the depth of the article.comment. Currently using the following CSS to display the comments sections;

article.comment{margin:0 0 15px 66px;padding:5px;background-color:#f2f3f3; color: #38424b; border-left: solid 7px #049cdb !important; box-shadow: 3px 3px 1px #ddd;}

.x-comments-list .even .depth-2 .comment,
.x-comments-list .even .depth-3 .comment,
.x-comments-list .even .depth-4 .comment,
.x-comments-list .even .depth-5 .comment,
.x-comments-list .even .depth-6 .comment,
.x-comments-list .odd .depth-2 .comment,
.x-comments-list .odd .depth-3 .comment,
.x-comments-list .odd .depth-4 .comment,
.x-comments-list .odd .depth-5 .comment,
.x-comments-list .odd .depth-6 .comment{box-shadow: none !important; background-color: #fff !important; color: #38424b !important; }

.x-reply a {color: #049cdb !important;}

.x-reply a:hover {color: #db4031 !important;}

cite.x-comment-author {color: #049cdb !important;}

cite.x-comment-author a {color: #049cdb !important;}

Thanks in advance for your help

Cheers,

Tommy

X version 3.2.5
Wordpress 4.2.2

[ChristopherModerator]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[TommyParticipant]

Hi Support,

Sorry the url is https://allthingsfpl.com

Thanks,

Tommy

[Rue NelModerator]

Hello There,

Please use this block of code instead:

.x-comments-list .even.depth-1 .comment,
.x-comments-list .even.depth-2 .comment,
.x-comments-list .even.depth-3 .comment,
.x-comments-list .even.depth-4 .comment,
.x-comments-list .even.depth-5 .comment,
.x-comments-list .even.depth-6 .comment,
.x-comments-list .odd.depth-1 .comment,
.x-comments-list .odd.depth-2 .comment,
.x-comments-list .odd.depth-3 .comment,
.x-comments-list .odd.depth-4 .comment,
.x-comments-list .odd.depth-5 .comment,
.x-comments-list .odd.depth-6 .comment{
    box-shadow: none !important; 
    background-color: #fff !important; 
    color: #38424b !important; 
}

Take notice of the .odd.depth-6 class selector. It has to be that way because they were applied on the same element.

Hope this make sense. Kindly let us know.

[TommyParticipant]

BOOM! cheers X

[Paul RModerator]

Cheers! 🙂

[Author]

Posts