[Resolved] Customize Comment section

[Jusung]

Hello. I am trying to modify the comment section.

your team is saying use “generate_post_comment” this kind of code.
Where I am supposed to add this code?
Do I need to make the child theme and add this to php file?

Is there any way to customize by using additional CSS?

[Jusung]

As you can see in the link,
I want to change the comment titile
1 thought on ~~
to Comment

Can I modify this by adding CSS code?

[Fernando]

Hi Jusung,

How exactly do you want the comment title to appear?

This is the filter you’ll need for the comment title: generate_comments_title_output

Here’s a reference to adding PHP snippets: https://docs.generatepress.com/article/adding-php/#code-snippets

[Jusung]

Is there a way to modify it just by adding CSS code?
I want to change the title of “1 thought ~~~~” to Comment.

On the link, go to the comment part by scrolling down.

[Fernando]

Try this PHP:

add_filter('generate_comments_title_output', function( $output, $comments_title, $comments_number ){
	
	$my_text = 'Comment';
	return sprintf(
				'<h3 class="comments-title">%s</h3>',
				esc_html( $my_text )
			);
}, 10, 3 );

Replace Comment with your preferred text.

Adding PHP reference: https://docs.generatepress.com/article/adding-php/#code-snippets

[Jusung]

Isn’t there any way to change the title by adding CSS code?

I just want to modify the comment section and don’t want to download a plug-in.

[Fernando]

I see. You can try adding this in Additional CSS:

.comments-title {
    display:none;
}

div#comments:before {
    content:"Comment";
    font-size: 40px;
}

[Jusung]

Hello.
Thank you!

It has been resolved now.

I have a last request.

The height of box is too high. So, when there are too many comments, it would be hard to read.
So, I want to reduce the height of comment section.

Can you just give me the css code to reduce the size?
Maybe it could be done by modifying the padding.
The both part (comment and name)

So, I can adjust it.

Thank you!

[Fernando]

You mean do comment content?

You can try this if so:

.comment-content {
    padding-top: 10px;
    padding-bottom: 10px;
}

[Jusung]

Yes it wokrs.
But I also want to reduce the name part.
It only reduces the comment part.

[Fernando]

What part exactly? This?: https://share.getcloudapp.com/NQulXwZ8

If so, it has no spacing of its own, or are you referring to something else?

[Jusung]

I want to remove the space on every box on the comment section.
What I have added is

.comment-content {
padding-top: 10px;
padding-bottom: 10px;
margin-top:10px;

}
.comment-body {
padding-top:10px;
}

But still there is a space on the bottom part.

[Fernando]

Try this:

.comment-content {
padding-top: 10px;
padding-bottom: 10px;
margin-top:10px;
}
.comment-body {
padding-top:10px;
}

.comment-content p {
margin-bottom: 0;
}

[Jusung]

.comment-content {
padding-top: 10px;
padding-bottom: 10px;
margin-top:10px;

}
.comment-body {
padding-top: 40px;
padding-bottom:0;
}
After this code, it seems that there is no space now.
However, the length between comment and reply button is pretty far.

Is there any code to reduce it?

[Jusung]

.comment-content {
padding-top: 10px;
padding-bottom: 10px;
margin-top:10px;

}
.comment-body {
padding-top:40px;
padding-bottom:0;
}

.comment-content p {
margin-bottom:0;
}

This is the last code and all size is good.
However, the line has got into the inside box..

[Author]

Posts