- This topic has 14 replies, 4 voices, and was last updated 6 years ago by
.
-
Posts
-
Hi
I am trying to customize my comments form and found some answers in this forum but couldn’t get them all to worked as I would like.
I am a newbie to web design :o)
1. Can I reduce the size of the comments box? I tried this CSS from the forum but it didn’t work?
/* reduce size of comment box */
#comment {
height: 100px;
}.comment-form-comment {
width: 80%;
}and:
@media (min-width: 768px) {
.comment-form-comment {
margin-right:50%;
}
}2. And then add some text inside the comments box. I tried adding text with the inside_comments Hook and then with Filter generate_inside_comments but it didn’t work? Tekst like “write comment her”
3. Can I reduce the size of the boxes with Name* and Email*? And change the text inside the boxes? I tried this CSS but it didn’t work?
#author, #email {
background: #ffffff !important;
color: #222222;
border: 1px solid #dfdfdf;
outline: none;
width: 30%;
}4. Can I change the default style of the boxes around comments from users and the text to look like this:
https://www.valdemarsro.dk/avocadohummus/
I removed the link and time from the metadata.
Hope you can help.
Thank you for a fantastic support.
Lead Developer
Hi there,
1. This should work:
#comments { height: 100px; }I’m not seeing that CSS added to your site?
2. Right now it’s not possible to add a placeholder inside the box, unfortunately. However, we can insert some text above if you’d like?
3. That CSS you shared should work. I’m not seeing it added to your website.
To change the placeholder text, you can do this:
add_action( 'after_setup_theme', function() { add_filter( 'comment_form_default_fields', function( $fields ) { $commenter = wp_get_current_commenter(); $author_placeholder = 'Name'; $email_placeholder = 'Email'; $url_placeholder = 'Website'; $fields['author'] = '<label for="author" class="screen-reader-text">' . esc_html__( 'Name', 'generatepress' ) . '</label><input placeholder="' . $author_placeholder . '" id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30" />'; $fields['email'] = '<label for="email" class="screen-reader-text">' . esc_html__( 'Email', 'generatepress' ) . '</label><input placeholder="' . $email_placeholder . '" id="email" name="email" type="email" value="' . esc_attr( $commenter['comment_author_email'] ) . '" size="30" />'; $fields['url'] = '<label for="url" class="screen-reader-text">' . esc_html__( 'Website', 'generatepress' ) . '</label><input placeholder="' . $url_placeholder . '" id="url" name="url" type="url" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" />'; return $fields; } ); }, 20 );4. Which part are you wanting to do? Right now it’s not possible to move the Reply link easily, unfortunately. I need to add a hook to the parent theme to make this easier.
Hi Tom
Strange? I added the CSS in the Simple CSS plugin the same way as all other CSS on my site. I can see it in the plugin and in the customizer but yes, it is not working? Can it somehow be seen but not be saved? I tried turning the plugin off and on again. It is still not working. I added the CSS in Additional CSS and now it is working. But will it still be there when the Theme is updated?
And how can I get the comment box and the placeholders to be the same width?
4. Is it possible to change the text of “Reply” to “Svar”, change the color and make it Bold? Make the date text smaller and fade it? And delete the line between date and Reply | ?
Is it possible to delete the lines between boxes with reply’s? And only keep the bottom line of the box visible? So, it will achily not be a box just a separator in the bottom of reply’s.
Hope it make sense :o)
One more thing.
I added a link from the top of the comments area to the comments box only if there is replys . But the link is going to far down. Is it possible to change where the link go so you can see the text on top of the comment box?
I change the placeholder text. It worked perfectly.
Customer Support
Hi there,
CSS in the Additional CSS will remain there when a Theme updates. Did you have any other CSS in the Simple CSS? If so then try adding the CSS to the very top of the stack, it may be there is an error in some of your CSS.
4. Changing the Reply text can be done with this PHP Snippet:
function wpb_comment_reply_text( $link ) { $link = str_replace( 'Reply', 'Change to This Text', $link ); return $link; } add_filter( 'comment_reply_link', 'wpb_comment_reply_text' );This CSS will remove the | and increase the reply font size and weight:
.reply { font-size: 0; } .comment-reply-link { font-size: 16px; font-weight: bold; color: #ff0000 !important; }This will reduce the color of the Time stamp:
.comment-metadata time { color: #ccc; }In regards to the comment box borders, will the replies still have a box around them?
Hi Dave
Thank you for the reply.
I will try adding the CSS to the very top and there coud be an error. I joust cant find it.
Snippet and CSS worked perfectly. But I cant change the color of the Reply text?
And no boxes if it is possible. Only a border below the replies.
Signe
I edited the CSS above to include the Color option, it requires some !important.
Try this CSS – it removes all the boxes and just leaves a line below each of the replies:.comment .children, .comment-content { border-width: 0 !important; } .comment .children li .comment-content, .comment-content { border-bottom-width: 1px !important; }Hi Dave
The color change worked. I missed the !important part. ‘
And the boxes are gone. Is it possible to have a line under the first comment as well?
There is a slide difference in the width of the comment box and the placeholders. Is it possible to make them the same width?
One more thing.
I added a link from the top of the comments area to the comments box only if there is replies. But the link takes you to fare down. Is it possible to change? So you can see the text on top of the comment box?
Best suport
Thank you.Signe
I edited the code here to add the rule below the comment:
https://generatepress.com/forums/topic/comment-box-style/#post-810589
The jump link, try adding
smooth-scrollas a class in your jump link so the opening anchor tag looks like:<a class="smooth-scroll" href="#respond">Then in the Customizer > General – activate smooth scroll. This should offset the jump link to conisder the sticky nav.
For the alignment of the email field try adjusting the margin % in this CSS to 2.6%:
.comment-form #author, .comment-form #email { display: inline-block; margin-right: 3%; /* Change to 2.6% */ }Thank you David. It worked.
Glad to be of help
A quick clarification.
I think there are both#commentsand#commentelement/control ids on the Comments form.
The plural version seems to change the height of the Comments Area
The singular version seems to change the height of the Comments input box
Both useful – although the former seems less useful as it allows the footer to ride up behind the comments.
Please correct the terminology and accuracy and I hope this helps.
Thank you, PaulHi there,
does this help:
#commentsis the ID for the wrapper the encloses the Comments list and the Comment form.
#commentis the ID for the Text Input area for new comments.They both have their own separate purpose.
Perfect – thank you David. I think there may be some confusion in the previous replies as to which is being referred to.
Yeah the CSS Classes and ID’s are not very clear in the WP comment form. So easily confused 🙂
- You must be logged in to reply to this topic.
