Docs

[tparkmedia]

Hello,

Few questions regarding customizing the comment area in blog posts.

1. I’d like to change the look of the “Submit” button. Currently the button looks like this:
I’d like for it to look more like this:

2. How can I change the text in the button? Ie. instead of “Submit” change it to “Post Comment”

3. How do I get rid of the line “Notify me of new posts by email”?

4. I’d like to increase the space between the submit button and “notify me of follow-up comments by email”.

5. How can I make my comment box do the expanding feature (the bottom right corner) as you have here?

Thanks very much!! 🙂

[Rad]

Hi there,

Thanks for writing in.

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks!

[tparkmedia]

This reply has been marked as private.

[Paul R]

Hi,

You can add this in Custom CSS

.single-post #entry-comment-submit  {
     background-color:#40BF8C;
     border:0;
     box-shadow:none;
     text-shadow:none;
}
.single-post .comment-form-comment textarea {
    resize:both;
}

Then create wp-comments.php in wp-contents/themes/x-child/framework/views/icon/ and copy the code below into that file.

<?php

// =============================================================================
// VIEWS/ICON/WP-COMMENTS.PHP
// -----------------------------------------------------------------------------
// The area of the page that contains both current comments and the comment
// form. The actual display of comments is handled by a callback to
// x_comment().
// =============================================================================

?>

<?php

//
// 1. If the current post is protected by a password and the visitor has not
//    yet entered the password, we will return early without loading the
//    comments.
//

if ( post_password_required() )
  return; // 1

?>

<div id="comments" class="x-comments-area">

  <?php if ( have_comments() ) : ?>

    <h2 class="h-comments-title"><span><?php _e( 'Comments' , '__x__' ); ?> <small><?php echo number_format_i18n( get_comments_number() ); ?></small></span></h2>
    <ol class="x-comments-list">
      <?php
      wp_list_comments( array(
        'callback' => 'x_icon_comment',
        'style'    => 'ol'
      ) );
      ?>
    </ol>

    <?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : ?>
    <nav id="comment-nav-below" class="navigation" role="navigation">
      <h1 class="visually-hidden"><?php _e( 'Comment navigation', '__x__' ); ?></h1>
      <div class="nav-previous"><?php previous_comments_link( __( '&larr; Older Comments', '__x__' ) ); ?></div>
      <div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', '__x__' ) ); ?></div>
    </nav>
    <?php endif; ?>

    <?php if ( ! comments_open() && get_comments_number() ) : ?>
    <p class="nocomments"><?php _e( 'Comments are closed.' , '__x__' ); ?></p>
    <?php endif; ?>

  <?php endif; ?>

  <?php
  comment_form( array(
    'comment_notes_after' => '',
    'id_submit'           => 'entry-comment-submit',
    'label_submit'        => __( 'Post comment' , '__x__' )
  ) );
  ?>

</div>

Hope that helps.

[tparkmedia]

Hello again,

I added the CSS. It addressed questions #1, #4, and #5.
1) Change the look of the button.
4) Add space between button and text below.
5) Add resizing feature to comment input box.

Then I added a PHP file with the code given to wp-contents/themes/x-child/framework/views/icon/ and nothing else changed.

So I still need help with the following:
2) Change the text in button from “Submit” to “Post Comment”
3) Get rid of line “Notify me of new posts by email”

THANK YOU!

[tparkmedia]

This reply has been marked as private.

[tparkmedia]

Oops, ok the text in button has been changed! I refreshed it again and for some reason it works now.

BUT that line “Notify me of new posts by email” is still there.

Thanks!

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

input#subscribe_blog, label#subscribe-blog-label {
    display: none !important;
}

Hope that helps.

[tparkmedia]

Perfect!!

One last question. 🙂

How can I increase the space between under the button and the email notification line?

[Rue Nel]

Hello There,

Thanks for updating in! To increase the space between under the button and the email notification line, please add the following css code in the customizer, Appearance > Customize > Custom > Edit Global CSS

p.comment-subscription-form {
    margin-top: 20px;
}

Feel free to reduce or increase the number of pixels.

[tparkmedia]

Perfect!

Thanks!! 😀

[Rue Nel]

You’re welcome!
Thanks for letting us know that it has worked for you.

[Author]

Posts