- This topic has 10 replies, 3 voices, and was last updated 4 months ago by
Leo.
-
AuthorPosts
-
September 19, 2020 at 9:06 pm #1450489
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.
π
September 20, 2020 at 4:51 am #1450800David
StaffCustomer SupportHi 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/September 20, 2020 at 6:44 am #1450910Christian
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?
September 20, 2020 at 6:55 am #1450925David
StaffCustomer Support2. 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/September 20, 2020 at 7:27 am #1450953Christian
David, did you have some steak sauce today?
Cause you’re definitely A1.
Thank you!
September 20, 2020 at 8:45 am #1451144Christian
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.
π
September 20, 2020 at 9:15 am #1451171Leo
StaffCustomer SupportThe
: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/September 20, 2020 at 9:50 am #1451236Christian
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.
September 20, 2020 at 10:53 am #1451300Leo
StaffCustomer SupportThe
: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/September 20, 2020 at 11:02 am #1451307Christian
Awesome. Working now! π
Thanks, Leo. You’re cooler than a penguin eating pistachio ice cream.
September 21, 2020 at 8:30 am #1452506Leo
StaffCustomer SupportNo 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/ -
AuthorPosts
- You must be logged in to reply to this topic.