Remove Gray Divider from Comment Section

[Christian]

Hey, GP Team!

I’m customizing my comment area and have a few questions.

1. Removing Gray Divider

I can’t seem to figure out how to remove the gray divider that separates new comment threads from each other.

2. Horizontally align Gravatar, name, and date info.

3. Target comments by user

I used the code on this thread to style comments by post author, however, I’d like to do the same for those left by users.

Extra: Not sure if it’s me, but the “Menu Item Width” under Customizer > Layout > Primary Navigation doesn’t change anything on Mobile. It works fine on desktop.

🙂

[David]

Hi there,

1. Make your CSS to remove the borders more specific like so:

.comments-area .comment-content, .comments-area .comment .children {
    border: none;
}

2. Try this CSS:

.comment-meta {
    display: flex;
    align-items: center;
}

3. You can use this CSS to target comments by post author:

.comment.bypostauthor {
    /* Your styles here */
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Christian]

1. Got it!

2. Sorry, I meant also displaying the Date/Time next to the Name instead of underneath.

3. Is there a way to target comments by visitors?

[David]

2. This CSS:

.comment-meta .comment-author-info {
    display: flex;
    align-items: center;
}
.comment-meta .comment-author-info > div {
    margin-right: 10px;
}

You’ll probably want that in a media query so it only applies to larger devices.

3. So you can use that CSS selector with the :not pseudo:

For author: .comment.bypostauthor
Not the author: .comment:not(.bypostauthor)

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Christian]

David, did you have some steak sauce today?

Cause you’re definitely A1.

Thank you!

[Christian]

David!

Please don’t hate me. One more question.

• How could I change the active text box border color?

For example, I’m using this to change the border color:

.comment-form #author, .comment-form #email, .comment-form #url, textarea {}

But I’m not sure how to use a different color for when someone clicks on a field to fill it out.

🙂

[Leo]

The :focus selector should be what you are looking for.

For example:

.comments-area textarea:focus {
    border-color: #000000;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Christian]

Gotcha, Leo!

How could I target the Name and Email fields as well?

I’m using:

.comment-form #author, .comment-form #email, textarea:focus {}

But doesn’t seem to be working.

[Leo]

The :focus needs to be added to each of the selector:
.comment-form #author:focus, .comment-form #email:focus, textarea:focus

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Christian]

Awesome. Working now! 🙂

Thanks, Leo. You’re cooler than a penguin eating pistachio ice cream.

[Leo]

No problem 🙂

Not sure about being cooler than a penguin eating pistachio ice cream haha.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts