0

I have a problem with the comment form, as i'd like to change the style of the reply comment form (the one which opens after the clicking on Reply link of a comment). But I can't find a way to do it properly, and I don't want to modify native files from Wordpress, such as comment-reply.js, because I might lose all changes when an update is made.

This is the code section of the comments, from my index.css file:

/*  -==========================- COMMENTS -==========================-  */
#comments li { margin-top:20px; }
#comments .avatar { float: left;margin: 3px 15px 5px 0;border: 1px solid #000;background: #fff;padding: 4px;border-radius: 37px;box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.65);}
#comments .author-name { font-weight:bold; }
#comments .author-name, #comments .says { font-size:18px; }
#comments .commentmetadata { font:italic 13px 'Lora', serif;float:right;letter-spacing: 0.4px;}
#comments ul li p { margin:80px 0 30px 0; font-size: 15px;text-align: justify;}
#comments .reply { float:right;margin-right: 2px;margin-bottom: 7px;}
.comment-reply-link, .comment-edit-link {box-shadow: 0 1px 8px rgba(0, 0, 0, 0.14) inset,0 1px 3px rgba(0, 0, 0, 0.6);border-bottom: 1px solid #8f7449;border-top: 1px solid #f4ddb6;border-radius: 5px;padding: 4px 10px 2px 10px;font: italic bold 16px 'Almendra', Times, "Times New Roman", serif;color: #ab3624;text-shadow: 0 1px 0 rgba(255,255,255,0.35);text-decoration: none;width: auto;background: rgba(214, 147, 60, 0.19);border-left-color: transparent;border-right-color: transparent;cursor: pointer;letter-spacing: 0.5px;margin-left: 10px;}
#commentform label:after{ content:":"; }
#commentform input,  #commentform textarea{ clear:left; width:91%; font: 700 13px 'PT Sans',sans-serif;color: #4e392f;background: rgba(230,180,95,.4);border: 2px solid #8d7147;box-shadow: 0 1px 6px rgba(0,0,0,.25) inset,0 1px 0 #F4DDB6;padding: 3px 8px;border-radius: 5px;margin-bottom: 10px; margin-top: 10px;}
#commentform p.form-submit { text-align:center; }
#comments .children { margin-left:30px; }
#comments .comment-body { overflow:hidden; border-bottom: 1px dotted rgba(0, 0, 0, 0.22);padding-bottom: 5px;border-left: 3px solid #860909;padding-left: 15px;}

And this is my comments.php file

<?php global $SMTheme; ?>
   <?php if ( post_password_required() ) { ?>
        <p><?php $SMTheme->_( 'password' ) ?></p>
    <?php return; } ?>
        <?php if ( $post->comment_status!='open' ) { ?>
        <p><?php $SMTheme->_( 'closedcomments' ) ?></p>
    <?php return; } ?>

    <?php if ( have_comments() ) { ?>
        <div id="comments">

            <h3 id="comments-title">

                        <?php
                                if (get_comments_number()==1) {
                                        printf( $SMTheme->_( 'formoneresponse' ), '<em>' . get_the_title() . '</em>');
                                } else {
                                        printf( $SMTheme->_( 'formmultiresponse' ), '<em>' . get_the_title() . '</em>', get_comments_number());
                                }
                ?></h3>


            <ul class="commentlist">
                                <?php $i = 0; ?>
                                <?php wp_list_comments( array( 'type' => 'comment', 'callback' => 'custom_comments' ) );?>
            </ul>

            <?php if ( get_comment_pages_count() > 1 ) { ?>
                        <div class="navigation clearfix">
                                <div class="alignleft"><?php previous_comments_link( $SMTheme->_( 'prevcomments' ) ); ?></div>
                                <div class="alignright"><?php next_comments_link( $SMTheme->_( 'nextcomments' ) ); ?></div>
                        </div><!-- .navigation .clearfix -->
            <?php } ?>

        </div><!-- #comments -->
    <?php } ?>

    <?php
                $args=array(
                        'comment_field'        => '<p class="comment-form-comment"><label for="comment">' . $SMTheme->_( 'comment' ) . '</label><br /><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p>',
                        'must_log_in'          => '<p class="must-log-in">' .  sprintf( $SMTheme->_( 'mustbe' ).' <a href="%s">'.$SMTheme->_( 'loggedin' ).'</a> '.$SMTheme->_( 'topostcomment' ).'.' , wp_login_url( apply_filters( 'the_permalink', get_permalink( $post_id ) ) ) ) . '</p>',
                        'logged_in_as'         => '<p class="logged-in-as">' . sprintf( __( $SMTheme->_( 'loggedinas' ).' <a href="%1$s">%2$s</a>. ' ), admin_url( 'profile.php' ), $user_identity, wp_logout_url( apply_filters( 'the_permalink', get_permalink( $post_id ) ) ) ) . '</p>',
                        'comment_notes_before' => '<p class="comment-notes">' . $SMTheme->_( 'comment_notes_before' ) . ( $req ? $required_text : '' ) . '</p>',
                        'comment_notes_after'  => '<p></p>',
                        'id_form'              => 'commentform',
                        'id_submit'            => 'submit',
                        'title_reply'          => $SMTheme->_( 'leavereply' ),
                        'title_reply_to'       => $SMTheme->_( 'leavereply' ),
                        'cancel_reply_link'    => $SMTheme->_( 'cancelreply' ),
                        'label_submit'         => $SMTheme->_( 'addcomment' )
                );
        comment_form($args);
        ?>

Is there any way to do this?

  • 1
    It would be a good idea to include (the relevant part(s) of) your comments.php right here. – Johannes Pille Oct 31 '14 at 23:10
  • Thanks for your answer and the edits, and sorry for using pastebin as I thought it would be easier to follow. Luckily, I was able to solve this. The problem was in #comments ul li p, so I deleted the margin and text-align properties, which were conflicting with the reply comment form, and modified other parts of the css file to achieve the same result. – user1903782 Nov 2 '14 at 1:30
  • You should add your solution as an answer and accept it once the restrictions have been lifted. You might just score yourself some reputation. :-). Just for interest sake, and to learn more about the how this site operates (and for that matter, all SE sites), please see this article and feel free to take a tour – Pieter Goosen Nov 2 '14 at 7:44
  • Done! See the answer below, and thanks for your reply. – user1903782 Nov 2 '14 at 13:56
1

Luckily, I was able to solve this. The problem was in #comments ul li p, so I deleted the margin and text-align properties from there, which were conflicting with the reply comment form, and modified other parts of the css file to achieve the same result.

The solution might vary in other cases, but I hope this would help as a guide!

This is the modified part on my index.css file:

#comments li { margin-top:20px; }
#comments .avatar { float: left;margin: 3px 15px 5px 0;border: 1px solid #000;background: #fff;padding: 4px;border-radius: 37px;box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.65);}
#comments .author-name { font-weight:bold; }
#comments .author-name, #comments .says { font-size:18px; }
#comments .commentmetadata { font:italic 13px 'Lora', serif;float:right;letter-spacing: 0.4px;}
#comments ul li p {font-size: 15px;}
#comments .reply { float:right;margin-right: 2px;margin-bottom: 7px;margin-top: 15px;}
.comment-reply-link, .comment-edit-link {box-shadow: 0 1px 8px rgba(0, 0, 0, 0.14) inset,0 1px 3px rgba(0, 0, 0, 0.6);border-bottom: 1px solid #8f7449;border-top: 1px solid #f4ddb6;border-radius: 5px;padding: 4px 10px 2px 10px;font: italic bold 16px 'Almendra', Times, "Times New Roman", serif;color: #ab3624;text-shadow: 0 1px 0 rgba(255,255,255,0.35);text-decoration: none;width: auto;background: rgba(214, 147, 60, 0.19);border-left-color: transparent;border-right-color: transparent;cursor: pointer;letter-spacing: 0.5px;margin-left: 10px;}
#commentform label:after{ content:""; }
#commentform input,  #commentform textarea{ clear:left; width:91%; font: 700 13px 'PT Sans',sans-serif;color: #4e392f;background: rgba(230,180,95,.4);border: 2px solid #8d7147;box-shadow: 0 1px 6px rgba(0,0,0,.25) inset,0 1px 0 #F4DDB6;padding: 3px 8px;border-radius: 5px;margin-bottom: 10px; margin-top: 10px;}
#commentform p.form-submit { text-align:center; }
#comments .children { margin-left:30px; }
#comments .comment-body { overflow:hidden; border-bottom: 1px dotted rgba(0, 0, 0, 0.22);padding-bottom: 5px;border-left: 3px solid #860909;padding-left: 15px;text-align: justify;}

Hope this helps.

  • +1 for posting your solution. Just remember to accept this answer it once the restriction is lifted. :-) – Pieter Goosen Nov 2 '14 at 15:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.