- This topic has 20 replies, 3 voices, and was last updated 1 year, 11 months ago by David.
-
AuthorPosts
-
April 9, 2022 at 7:25 am #2183040Raul
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.April 9, 2022 at 12:50 pm #2183362DavidStaffCustomer SupportHi 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 ?
April 12, 2022 at 12:12 am #2185868RaulHi
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.April 12, 2022 at 1:36 am #2185946Fernando Customer SupportHi 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. π
April 12, 2022 at 2:19 am #2186003RaulIt 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.
April 12, 2022 at 6:26 am #2186228RaulI have solved b), by modifying the ‘echo’ a little. Thank you very much for that!
April 12, 2022 at 7:40 am #2186285DavidStaffCustomer SupportThe 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
April 12, 2022 at 11:59 pm #2187131RaulI 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.April 13, 2022 at 12:10 am #2187138Fernando Customer SupportWith 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. π
April 13, 2022 at 12:30 am #2187152RaulGreat, I’ll create an admin user for you. What is the email address should I use?
April 13, 2022 at 12:33 am #2187154Fernando Customer SupportYou can us your own, we just need the credentials. π
April 13, 2022 at 12:44 am #2187161Raulok
April 13, 2022 at 12:55 am #2187169Fernando Customer SupportMay we know the link to your websiteβs login page as well?
Hope to hear from you soon. π
April 13, 2022 at 12:58 am #2187172RaulSure π
April 13, 2022 at 1:20 am #2187190Fernando Customer SupportTo 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. π
-
AuthorPosts
- You must be logged in to reply to this topic.