[Resolved] Remove Gray Divider from Comment Section

Home Forums Support Remove Gray Divider from Comment Section

  • This topic has 10 replies, 3 voices, and was last updated 4 months ago by Leo.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #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.

    πŸ™‚

    #1450800
    David
    Staff
    Customer Support

    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 */
    }
    #1450910
    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?

    #1450925
    David
    Staff
    Customer Support

    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)

    #1450953
    Christian

    David, did you have some steak sauce today?

    Cause you’re definitely A1.

    Thank you!

    #1451144
    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.

    πŸ™‚

    #1451171
    Leo
    Staff
    Customer Support

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

    For example:

    .comments-area textarea:focus {
        border-color: #000000;
    }
    #1451236
    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.

    #1451300
    Leo
    Staff
    Customer Support

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

    #1451307
    Christian

    Awesome. Working now! πŸ™‚

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

    #1452506
    Leo
    Staff
    Customer Support

    No problem πŸ™‚

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

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.