Archived topic
Styling Comments section with borders.
5 replies · Started by Sam on October 16, 2018
Hi guys,
how do i style the words "4 Comments" to do the following?
1. I would like 4 and Comments to have separate classes - want style them separately.
2. Currently, it is being output by the Say What plugin that Tom recommended.
3. I would also like to add borders and margins to this 4 Comments class, but any styling i've done so far to target it has not worked.
4. For example, trying .comments-area h3 {} has only resulted in the other elements being styled, while .comments-title h3 does not target the right element.
Do let me know, thank you!
Hi there,
You would need to copy the comments.php file from the parent theme and add it to your child theme and edit the template to make those changes.
Hi David,
Thank you for your response. May I know specifically what edits must I make to the file once I've added it from the parent theme?
Right now it’s a bit of a pain to change that text.
I added a filter in GP 2.2 which will make it much easier: https://github.com/tomusborne/generatepress/commit/28d3c2acd7685e053e1f4f0baf442dffb966b5bb
You can make the above change to your comments.php file to take advantage of it right now if you’d like:
add_filter( 'generate_comment_form_title', function() {
$comments_number = get_comments_number();
return sprintf( // WPCS: XSS OK.
/* translators: 1: number of comments */
esc_html( _nx(
'<span class="comment-number">%1$s</span> <span class="comment-title-text">Comment</span>',
'<span class="comment-number">%1$s</span> <span class="comment-title-text">Comments</span>',
$comments_number,
'comments title',
'generatepress'
) ),
number_format_i18n( $comments_number )
);
} );Then you could take advantage of the comment-number and comment-title-text classes.
Hey Tom, thanks but it didn't work. It just output the comments without classes at the bottom of the comment box.
Wonder if there's any other option, please?
Did you make this change to the theme first?: https://github.com/tomusborne/generatepress/commit/28d3c2acd7685e053e1f4f0baf442dffb966b5bb
Did you remove the code from your site? I'm not seeing any difference.
