- This topic has 10 replies, 3 voices, and was last updated 3 years, 6 months ago by Leo.
-
AuthorPosts
-
September 19, 2020 at 9:06 pm #1450489Christian
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 #1450800DavidStaffCustomer 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 */ }
September 20, 2020 at 6:44 am #1450910Christian1. 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 #1450925DavidStaffCustomer 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)
September 20, 2020 at 7:27 am #1450953ChristianDavid, did you have some steak sauce today?
Cause you’re definitely A1.
Thank you!
September 20, 2020 at 8:45 am #1451144ChristianDavid!
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 #1451171LeoStaffCustomer SupportThe
:focus
selector should be what you are looking for.For example:
.comments-area textarea:focus { border-color: #000000; }
September 20, 2020 at 9:50 am #1451236ChristianGotcha, 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 #1451300LeoStaffCustomer SupportThe
:focus
needs to be added to each of the selector:
.comment-form #author:focus, .comment-form #email:focus, textarea:focus
September 20, 2020 at 11:02 am #1451307ChristianAwesome. Working now! π
Thanks, Leo. You’re cooler than a penguin eating pistachio ice cream.
September 21, 2020 at 8:30 am #1452506LeoStaffCustomer SupportNo problem π
Not sure about being cooler than a penguin eating pistachio ice cream haha.
-
AuthorPosts
- You must be logged in to reply to this topic.