Comments – Styling

Hi,

Thanks for the update.

You should see these codes in the comments.php file, around line 164.

 echo "
<div class='comment_container'>";
echo "<h3 class='miniheading'>".__('Leave a Reply','avia_framework')."</h3>";
		 echo "<span class='minitext'>".__('Want to join the discussion?','avia_framework')."".__('Feel free to contribute!','avia_framework')."</span>";
		 comment_form();
		 echo "</div>";

Just change the default text to something else and then saved the file. If it’s not working, post the login details in the private field so that we can test it. Make sure that the Appearance > Editor panel is accessible.

Best regards,
Ismael

Hi,

1.) Yes, that’s correct. You can create a copy of that file and move it to the child theme folder to keep the changes in case of a theme update. :)

// https://developer.wordpress.org/themes/basics/template-files/

2.) You can use this filter to change the label and the markup of the comment form fields.

add_filter( 'comment_form_fields', 'avf_default_comment_fields', 10, 1);
function avf_default_comment_fields($fields)
{	
    $fields   =  array(
        'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' .
                    '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30" maxlength="245"' . $aria_req . $html_req . ' /></p>',
        'email'  => '<p class="comment-form-email"><label for="email">' . __( 'Email' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' .
                    '<input id="email" name="email" ' . ( $html5 ? 'type="email"' : 'type="text"' ) . ' value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30" maxlength="100" aria-describedby="email-notes"' . $aria_req . $html_req  . ' /></p>',
        'url'    => '<p class="comment-form-url"><label for="url">' . __( 'Website' ) . '</label> ' .
                    '<input id="url" name="url" ' . ( $html5 ? 'type="url"' : 'type="text"' ) . ' value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" maxlength="200" /></p>',
    );

	return $fields;
}

Best regards,
Ismael

Hi,

You should put it in the functions.php file. Edit that file via Appearance > Editor panel or your file server. Adjust these parts:

__( 'Name' )
__( 'Email' )
 __( 'Website' )

Best regards,
Ismael

Hi,

Thanks for the update.

I forgot to add the comment form’s field. Please try it again.

add_filter( 'comment_form_fields', 'avf_default_comment_fields', 10, 1);
function avf_default_comment_fields($fields)
{	
    $fields   =  array(
        'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' .
                    '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30" maxlength="245"' . $aria_req . $html_req . ' /></p>',
        'email'  => '<p class="comment-form-email"><label for="email">' . __( 'Email' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' .
                    '<input id="email" name="email" ' . ( $html5 ? 'type="email"' : 'type="text"' ) . ' value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30" maxlength="100" aria-describedby="email-notes"' . $aria_req . $html_req  . ' /></p>',
        'url'    => '<p class="comment-form-url"><label for="url">' . __( 'Website' ) . '</label> ' .
                    '<input id="url" name="url" ' . ( $html5 ? 'type="url"' : 'type="text"' ) . ' value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" maxlength="200" /></p>',
        'comment' => '<p class="comment-form-comment"><label for="comment">' . __( 'Comment' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p>'
    );

	return $fields;
}

Best regards,
Ismael

Hi,

1.) Use this css code to move the labels to the right of the input fields.

#commentform label {
    position: relative;
    margin-bottom: 5px;
}

2.) Add this filter to change the default button text.

add_filter( 'comment_form_defaults', 'avf_comment_form_defaults_mod', 10, 1);
function avf_comment_form_defaults_mod($args) {
    $args['label_submit'] = __( 'CHANGE THIS TEXT' );
    return $args;
}

Best regards,
Ismael

Hi,

That same css code works on my end. Can we take a look at the post with the comment form? Please provide a mock up or a screenshot of the end result so that we can see what you’re trying to achieve.

Best regards,
Ismael

Hi,

Thanks for the update.

This css code should override the default label styling.

#commentform label {
    position: relative !important;
    left: 0;
    float: left;
    margin-right: 10px;
}

Best regards,
Ismael