Comment CSS

comment.css

/*Comment List styles
--------------------------------------------------------------*/

.form-item {
    border: 1px solid #ffffff;
    padding: 15px;
}

.comment-list .row {
    margin-bottom: 0px;
}

.comment-list .panel .panel-heading {
    background: #f70009 none repeat scroll 0 0;
    border: medium none;
    border-top-right-radius: 0;
    color: #ffffff;
    padding: 4px 15px;
    position: absolute;
    top: 1px;
}

.comment-list .panel .panel-heading.right {
    border-right-width: 0px;
    border-top-left-radius: 0px;
    right: 16px;
}

.comment-list .panel .panel-heading .panel-body {
    padding-top: 6px;
}

.comment-list figcaption {
    word-wrap: break-word;
}


/* Portrait tablets and medium desktops */

@media (min-width: 768px) {
    .comment-list .arrow:after,
    .comment-list .arrow:before {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border-style: solid;
        border-color: transparent;
    }
    .comment-list .panel.arrow.left:after,
    .comment-list .panel.arrow.left:before {
        border-left: 0;
    }
    /*****Left Arrow*****/
    /*Outline effect style*/
    .comment-list .panel.arrow.left:before {
        left: 0px;
        top: 30px;
        /*Use boarder color of panel*/
        border-right-color: inherit;
        border-width: 16px;
    }
    /*Background color effect*/
    .comment-list .panel.arrow.left:after {
        left: 1px;
        top: 31px;
        /*Change for different outline color*/
        border-right-color: #FFFFFF;
        border-width: 15px;
    }
    /*****Right Arrow*****/
    .comment-list .panel.arrow.right:before {
        right: -16px;
        border-left-color: inherit;
        border-width: 16px;
    }
    .comment-list .panel.arrow.right:after {
        right: -14px;
        top: 31px;
        border-left-color: #FFFFFF;
        border-width: 15px;
    }
}

.comment-list .comment-post {
    margin-top: 6px;
}
.page-header {
    border-bottom: 3px solid #ffffff;
    margin: 0px 0 20px;
    padding: 10px;
    line-height: 30px;
    background: #f70009;
    font-size: 20px;
    color: #fff;
}
.comment-date {
    font-size: 14px;
    font-style: italic;
    font-weight: 600;
}
.comment-user {
    font-weight: 700;
    line-height: 35px;
    font-size: 20px;
}
.form-comment {
    padding: 20px;
    border-radius: 3px;
}
.comment-area {
    margin-top: 30px;
    padding: 30px;
    overflow: hidden;
    background: #fff;
}
.comment-list {
    padding: 0 20px;
}

comments.php

<?php
/**
 * The template for displaying comments
 *
 * This is the template that displays the area of the page that contains both the current comments
 * and the comment form.
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

/*
 * 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;
}
?>

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

	<?php
	// You can start editing here -- including this comment!
	if ( have_comments() ) : ?>
	
		<h2 class="comments-title">
			<?php
			$comments_number = get_comments_number();
			if ( '1' === $comments_number ) {
				/* translators: %s: post title */
				printf( _x( 'One Reply to &ldquo;%s&rdquo;', 'comments title', 'twentyseventeen' ), get_the_title() );
			} else {
				printf(
					/* translators: 1: number of comments, 2: post title */
					_nx(
						'%1$s Reply to &ldquo;%2$s&rdquo;',
						'%1$s Replies to &ldquo;%2$s&rdquo;',
						$comments_number,
						'comments title',
						'twentyseventeen'
					),
					number_format_i18n( $comments_number ),
					get_the_title()
				);
			}
			?>
		</h2>
		

		<ul class="comment-list">
			<?php
				wp_list_comments( array(
					'avatar_size' => 60,
					'callback' => 'consult_comment',
					'short_ping'  => true,
				) );
			?>
		</ul>

		<?php 
		
		the_comments_pagination( array(
			'prev_text' => '<span class="screen-reader-text">' . __( 'Before', 'twentyseventeen' ) . '</span>',
			'next_text' => '<span class="screen-reader-text">' . __( 'After', 'twentyseventeen' ) . '</span>',
		) );
		
	endif; // Check for have_comments().

	// If comments are closed and there are comments, let's leave a little note, shall we?
	if ( ! comments_open() && get_comments_number() && post_type_supports( get_post_type(), 'comments' ) ) : ?>

		<p class="no-comments"><?php _e( 'Comments are closed.', 'twentyseventeen' ); ?></p>
	<?php
	endif;
	
	 $commenter = wp_get_current_commenter();
        if ( ! isset( $args['format'] ) )
    $args['format'] = current_theme_supports( 'html5', 'comment-form' ) ? 'html5' : 'xhtml';
        $req = get_option( 'require_name_email' );
        $aria_req = ( $req ? " aria-required='true'" : '' );
        $html_req = ( $req ? " required='required'" : '' );
    $html5    = 'html5' === $args['format'];

    $comments_args = array(
        // redefine your own textarea (the comment body)
        'comment_field' => '<p class="comment-form-comment">
		<textarea class="form-control" id="comment" name="comment" aria-required="true" placeholder="' . esc_attr__( "YOUR COMMENT", "text-domain" ) . '" rows="8" cols="37" wrap="hard"></textarea></p>',
		'label_submit'         => esc_html__( 'POST A COMMENT', 'themex-theme' ),
		'class_submit'         => 'submit submit-btn_ph',
		'title_reply'          => esc_html__( 'ADD COMMENT', 'themex-theme' ),
		'title_reply_before'   => '<div class="msg_form"><h5 id="reply-title" class="comment-reply-title">',
	    'title_reply_after'    => '</h5><div>',
        'cancel_reply_before'  => '',
		'cancel_reply_after'   => '',
		'cancel_reply_link'    => esc_html__( 'Cancel reply' ),
		
		'comment_notes_before' => '<p class="comment-notes"><span id="email-notes">' . esc_html__( 'Your email address will not be published.', 'themex-theme' ) . '</span></p>',
		
		'fields' => apply_filters( 'comment_form_default_fields', array(


					
			'email'  => '<div class="form-padding-right">' . '<input class="form-control" id="email" name="email" placeholder="' . esc_attr__( "E-letter*", "text-domain" ) . '" ' . ( $html5 ? 'type="email"' : 'type="text"' ) . ' size="30" maxlength="100" aria-describedby="email-notes"' . $aria_req . $html_req  . ' /></div>',
				
	        'url'    => '<div class="form-padding-left">' . '<input class="form-control" placeholder="' . esc_attr__( "WEBSITE", "text-domain" ) . '" id="url" name="url" ' . ( $html5 ? 'type="url"' : 'type="text"' ) . ' size="30" maxlength="200" /></div>',
			)
		  ),
		);
	comment_form($comments_args); 
	
	?>


</div><!-- #comments -->

custom-comment.php

<?php 

function consult_comment($comment, $args, $depth) {
    if ( 'div' === $args['style'] ) {
        $tag       = 'div';
        $add_below = 'comment';
    } else {
        $tag       = 'li';
        $add_below = 'div-comment';
    }
    ?>
        <<?php echo $tag ?> <?php comment_class( empty( $args['has_children'] ) ? (!($args['has_children']=='depth-1') ? 'new-depth' : '') : 'parent' ) ?> id="comment-<?php comment_ID() ?>">
    <?php if ( 'div' != $args['style'] ) : ?>
        <div id="div-comment-<?php comment_ID() ?>" class="comment-body">
    <?php endif; ?>
	

                <div class="comment-author vcard">
                        <?php if ( $args['avatar_size'] != 0 ) echo get_avatar( $comment, $args['avatar_size'] ); ?>
                </div>
    
		
		
    <?php if ( $comment->comment_approved == '0' ) : ?>
         <em class="comment-awaiting-moderation"><?php echo esc_html__( 'Your comment is awaiting moderation.', 'text-domain' ); ?></em>
          <br />
    <?php endif; ?>        
     
	 
                
                <?php printf( __( '<cite class="fn">%s</cite>', 'text-domain'  ), get_comment_author_link() ); ?>

                <div class="comment-meta commentmetadata"><a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ); ?>">


<?php comment_text(); ?>	

                       
                                <?php
                                /* translators: 1: date, 2: time */
                                printf( __('%1$s at %2$s', 'text-domain' ), get_comment_date(),  get_comment_time() ); ?></a><?php edit_comment_link( __( '(Edit)', 'text-domain'  ), '  ', '' );
                                ?>
                       
                        
                </div>  	


        <div class="reply"><?php 
                comment_reply_link( 
                    array_merge( 
                        $args, 
                        array( 
                            'add_below' => $add_below, 
                            'depth'     => $depth, 
                            'max_depth' => $args['max_depth'] 
                        ) 
                    ) 
                ); ?>
        </div>		
      
	  
    <?php if ( 'div' != $args['style'] ) : ?>
    </div>
    <?php endif; ?>
    <?php
    }

functions.php

<?php
//add functions file 
require_once(get_theme_file_path( '/inc/custom-comments.php' ));


// add wp_enqueue_scripts hooks
function philosophy_assets_setup(){
  wp_enqueue_style( 'philosophy-comment-style', get_stylesheet_uri() );
   if ( is_singular() ) wp_enqueue_script( 'comment-reply' );

}
add_action('wp_enqueue_scripts', 'philosophy_assets_setup');

// moving commment form
function philosophy_move_comment_form( $fields ) {
  $comment_field = $fields['comment'];
  unset( $fields['comment'] );
  $fields['comment'] = $comment_field;
  return $fields;
}
add_filter( 'comment_form_fields', 'philosophy_move_comment_form' );