[Resolved] Styling comments

Home Forums Support [Resolved] Styling comments

Home Forums Support Styling comments

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #2183040
    Raul

    Hi

    I would like to do some stylings to the post comments. I would be more than happy if they would look like Facebook’s comments.
    I use the GP child theme and uploaded your comments.php. What I don’t know how to achieve:
    1) To have a text placeholder inside the comment’s textarea;
    2) show the profile pictures of the commentators at the left of both editing textarea and old comments;
    3) show date under the comments for old comments only.
    Thank you for your attention.

    #2183362
    David
    Staff
    Customer Support

    Hi there,

    1. You can add a placeholder using this PHP Snippet:

    
    add_filter( 'comment_form_defaults', function( $defaults ) {
        $defaults['comment_field'] = sprintf(
            '<p class="comment-form-comment"><label for="comment" class="screen-reader-text">%1$s</label><textarea placeholder="PLACE HOLDER TEXT HERE" id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p>',
            esc_html__( 'Comment', 'generatepress' )
        );
    
        return $defaults;
    }, 20 );
    

    Change the PLACE HOLDER TEXT HERE string to your placeholder.

    2 and 3. – those are default functions of the comments form. Have you made any changes to the function ?

    #2185868
    Raul

    Hi

    Thank you for that function, perfect!

    2 – I mean, the position of the comment’s author to be float left to the comment, not above it as it’s now.
    3 – Date to be shown under the comment, not under the author, if possible.

    #2185946
    Fernando
    Customer Support

    Hi Raul,

    For 2 and 3, you can replace the other PHP snippet I provided in the other ticket you have with this:

    add_action('generate_after_comment_text','create_new_comment_date_b');
    function create_new_comment_date_b(){
    	$time = human_time_diff( get_the_time('U'), current_time('timestamp') );
        $updated = human_time_diff( get_the_modified_time('U'), current_time('timestamp') );
    
        echo '<div class="entry-meta comment-metadata my-new-comment-meta"><a href="' . esc_url( get_comment_link( get_comment_ID() ) ) . '"><time datetime="' . comment_time( 'c' ) . '" itemprop="datePublished">' . sprintf( '%1$s ago. Updated %2$s',
            $time,
            $updated
        ) . '</time></a></div>';
    }

    Then remove the CSS mention in the other ticket as well, and add this CSS in Appearance > Customize > Additional CSS:

    .entry-meta.comment-metadata:not(.my-new-comment-meta) {display: none;}
    
    article#div-comment-2 {display: flex;align-items: center;}
    
    footer.comment-meta {margin-right: 20px;display: flex;flex-direction: column;align-items: center;}

    Kindly let us know how it goes. πŸ™‚

    #2186003
    Raul

    It makes important changes, but:
    a) now the commentator is in the center, not at the left of his comment.
    b) I get a line that I don’t want with time like this: “2022-04-11T17:51:30+03:00”.

    For now, I’m just doing various tests so the website is under construction.

    #2186228
    Raul

    I have solved b), by modifying the ‘echo’ a little. Thank you very much for that!

    #2186285
    David
    Staff
    Customer Support

    The alignment of the author name is because of this CSS:

    footer.comment-meta {
        margin-right: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 1;
    }

    Remove that CSS and the name will be left aligned

    #2187131
    Raul

    I have removed that CSS, the author is left-aligned, indeed. However, that’s not how I want it. I would like to have the author positioned at the left of his comment (float-left), if possible.
    Thank you very much for trying to help me.

    #2187138
    Fernando
    Customer Support

    With the default WordPress comment style and with the code I provided, this is what it would look like: https://share.getcloudapp.com/QwuLjemK

    Perhaps you could provide temporary access to your site so we could have a grasp which code would work.

    Kindly use the private information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

    Hope to hear from you soon. πŸ™‚

    #2187152
    Raul

    Great, I’ll create an admin user for you. What is the email address should I use?

    #2187154
    Fernando
    Customer Support

    You can us your own, we just need the credentials. πŸ™‚

    #2187161
    Raul

    ok

    #2187169
    Fernando
    Customer Support

    May we know the link to your website’s login page as well?

    Hope to hear from you soon. πŸ™‚

    #2187172
    Raul

    Sure πŸ™‚

    #2187190
    Fernando
    Customer Support

    To format it like this: https://share.getcloudapp.com/RBunB0gW, try adding this CSS in Appearance > Customize > Additional CSS:

    article.comment-body {
        display: flex;
        align-items: center;
    }
    
    footer.comment-meta {
        margin-right: 10px;
    }

    To fix the date/time of the comment, try this PHP snippet instead of the previous one:

    add_action('generate_after_comment_text','create_new_comment_date_b');
    function create_new_comment_date_b(){
    	$time = human_time_diff( get_comment_time('U'), current_time('timestamp') );
    
        echo '<div class="entry-meta comment-metadata my-new-comment-meta"><a href="' . esc_url( get_comment_link( get_comment_ID() ) ) . '"><time datetime="' . get_comment_time('U') . '" itemprop="datePublished">' . sprintf( '%1$s ago',
            $time
        ) . '</time></a></div>';
    }

    Kindly let us know how it goes. πŸ™‚

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