Advertisement
arnabkumar

Wordpress Comments CSS & scripts

Mar 22nd, 2014
226
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 9.95 KB | None | 0 0
  1.    
  2.  
  3.     /* ===================== comments ===================== */
  4.      
  5.     .comments {margin: 10px 0;}
  6.     .comments h3 {margin:50px 0 30px 0;font-size:24px;}
  7.     ol.commentlist { list-style:none; margin:0 0 1em; padding:0; text-indent:0; }
  8.     ol.commentlist li { }
  9.     ol.commentlist li.alt { }
  10.     ol.commentlist li.bypostauthor {}
  11.     ol.commentlist li.byuser {}
  12.     ol.commentlist li.comment-author-admin {}
  13.     ol.commentlist li.comment { border-bottom: 1px solid #ddd; padding:1em; margin-bottom: 10px; }
  14.     ol.commentlist li div.comment-author {}
  15.     ol.commentlist li div.vcard { font-size:20px;}
  16.     ol.commentlist li div.vcard cite.fn { font-style:normal; }
  17.     ol.commentlist li div.vcard cite.fn a.url {}
  18.     ol.commentlist li div.vcard img.avatar {float:left; margin:0 1em 1em 0; }
  19.     ol.commentlist li div.vcard img.avatar-32 {}
  20.     ol.commentlist li div.vcard img.photo {}
  21.     ol.commentlist li div.vcard span.says {}
  22.     ol.commentlist li div.commentmetadata {}
  23.     ol.commentlist li div.comment-meta { font-size:9px; margin-bottom: 10px;}
  24.     ol.commentlist li div.comment-meta a { color: #aaa; }
  25.     ol.commentlist li p { margin: 0; }
  26.     ol.commentlist li ul { list-style:square; margin:0 0 1em 2em; }
  27.     ol.commentlist li div.reply { font-size:11px; }
  28.     ol.commentlist li div.reply a { font-weight:bold; }
  29.     ol.commentlist li ul.children { list-style:none; margin:1em 0 0; text-indent:0; }
  30.     ol.commentlist li ul.children li {}
  31.     ol.commentlist li ul.children li.alt {}
  32.     ol.commentlist li ul.children li.bypostauthor {}
  33.     ol.commentlist li ul.children li.byuser {}
  34.     ol.commentlist li ul.children li.comment {}
  35.     ol.commentlist li ul.children li.comment-author-admin {}
  36.     ol.commentlist li ul.children li.depth-2 { margin:0 0 .25em .25em; }
  37.     ol.commentlist li ul.children li.depth-3 { margin:0 0 .25em .25em; }
  38.     ol.commentlist li ul.children li.depth-4 { margin:0 0 .25em .25em; }
  39.     ol.commentlist li ul.children li.depth-5 {}
  40.     ol.commentlist li ul.children li.odd {}
  41.     ol.commentlist li.even { background:#fff; }
  42.     ol.commentlist li.odd { background:#f6f6f6; }
  43.     ol.commentlist li.parent { }
  44.     ol.commentlist li.pingback { margin: 0 0 10px; padding: 1em; border: 1px dashed #ccc; }
  45.     ol.commentlist li.thread-alt { }
  46.     ol.commentlist li.thread-even { }
  47.     ol.commentlist li.thread-odd {}
  48.      
  49.     /* ===================== comment form ===================== */
  50.      
  51.     #respond {position: relative;}
  52.     #respond input[type="text"],#respond textarea {border:1px solid #ddd;padding:10px}
  53.     #respond input[type="text"] {padding:7px;width:300px}
  54.     #respond .comment-form-author,
  55.     #respond .comment-form-email,
  56.     #respond .comment-form-url,
  57.     #respond .comment-form-comment { position: relative; }
  58.     #respond .comment-form-author label,
  59.     #respond .comment-form-email label,
  60.     #respond .comment-form-url label,
  61.     #respond .comment-form-comment label { background: #eee; color: #555; display: inline-block; left: 4px; min-width: 60px; padding: 4px 10px; position: relative; top: 40px; z-index: 1; }
  62.     #respond input[type="text"]:focus,
  63.     #respond textarea:focus { text-indent: 0; z-index: 1; }
  64.     #respond textarea { resize: vertical; width: 95%; }
  65.     #respond .comment-form-author .required,
  66.     #respond .comment-form-email .required { color: #bd3500; font-size: 22px; font-weight: bold; left: 75%; position: absolute; top: 45px; z-index: 1; }
  67.     #respond .comment-notes,
  68.     #respond .logged-in-as { font-size: 13px; }
  69.     #respond p { margin: 10px 0; }
  70.     #respond .form-submit { float: right; margin: -20px 0 10px; }
  71.     #respond input#submit { background: #454545; border: none; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3); -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3); box-shadow: 0px 1px 2px rgba(0,0,0,0.3); color: #eee; cursor: pointer; padding: 5px 42px 5px 22px; }
  72.     #respond input#submit:active { background: #86222D; color: #fff; }
  73.     #respond #cancel-comment-reply-link { color: #666; margin-left: 10px; text-decoration: none; }
  74.     #respond .logged-in-as a:hover,
  75.     #respond #cancel-comment-reply-link:hover { text-decoration: underline; }
  76.     .commentlist #respond { margin: 1.625em 0 0; width: auto; }
  77.     #reply-title { color: #373737; font-size: 20px; }
  78.     #cancel-comment-reply-link { color: #888; display: block; position: absolute; right: 1.625em; text-decoration: none; text-transform: uppercase; top: 1.1em; }
  79.     #cancel-comment-reply-link:focus,
  80.     #cancel-comment-reply-link:active,
  81.     #cancel-comment-reply-link:hover { color: #ff4b33; }
  82.     #respond label {display: block; float: right; font-size: 16px; line-height: 2.2em; width: 280px;}
  83.     #respond input[type=text] {}
  84.     #respond p { font-size: 12px; }
  85.     p.comment-form-comment { margin: 0; }
  86.     .form-allowed-tags { display: none; }
  87.     .trackback { margin: 0 0 10px; padding: 1em; border: 1px dashed #ccc; }
  88.  
  89. /* add this code for effect ajax to funtion.php */
  90.  
  91. /* This code for comment_scripts */
  92.  
  93. function comment_scripts(){
  94.  
  95.    if ( is_singular() ) wp_enqueue_script( 'comment-reply' );
  96.  
  97. }
  98.  
  99. add_action( 'wp_enqueue_scripts', 'comment_scripts' );
  100.  
  101.  
  102.  
  103.  
  104.  
  105.  
  106.  
  107.  
  108.  
  109.  
  110.  
  111.  
  112.  
  113. //custom comments.php
  114. <?php
  115. /**
  116.  * @package WordPress
  117.  * @subpackage Theme_Compat
  118.  * @deprecated 3.0
  119.  *
  120.  * This file is here for Backwards compatibility with old themes and will be removed in a future version
  121.  *
  122.  */
  123. _deprecated_file( sprintf( __( 'Theme without %1$s' ), basename(__FILE__) ), '3.0', null, sprintf( __('Please include a %1$s template in your theme.'), basename(__FILE__) ) );
  124.  
  125. // Do not delete these lines
  126.     if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
  127.         die ('Please do not load this page directly. Thanks!');
  128.  
  129.     if ( post_password_required() ) { ?>
  130.         <p class="nocomments"><?php _e('This post is password protected. Enter the password to view comments.'); ?></p>
  131.     <?php
  132.         return;
  133.     }
  134. ?>
  135.  
  136. <!-- You can start editing here. -->
  137.  
  138. <?php if ( have_comments() ) : ?>
  139.     <h3 id="comments"><?php printf( _n( 'One Response to %2$s', '%1$s Responses to %2$s', get_comments_number() ),
  140.                                     number_format_i18n( get_comments_number() ), '&#8220;' . get_the_title() . '&#8221;' ); ?></h3>
  141.  
  142.     <div class="navigation">
  143.         <div class="alignleft"><?php previous_comments_link() ?></div>
  144.         <div class="alignright"><?php next_comments_link() ?></div>
  145.     </div>
  146.  
  147.     <ol class="commentlist">
  148.     <?php wp_list_comments();?>
  149.     </ol>
  150.  
  151.     <div class="navigation">
  152.         <div class="alignleft"><?php previous_comments_link() ?></div>
  153.         <div class="alignright"><?php next_comments_link() ?></div>
  154.     </div>
  155.  <?php else : // this is displayed if there are no comments so far ?>
  156.  
  157.     <?php if ( comments_open() ) : ?>
  158.         <!-- If comments are open, but there are no comments. -->
  159.  
  160.      <?php else : // comments are closed ?>
  161.         <!-- If comments are closed. -->
  162.         <p class="nocomments"><?php _e('Comments are closed.'); ?></p>
  163.  
  164.     <?php endif; ?>
  165. <?php endif; ?>
  166.  
  167. <?php if ( comments_open() ) : ?>
  168.  
  169. <div id="respond">
  170.  
  171. <h3><?php comment_form_title( __('Leave a Reply'), __('Leave a Reply to %s' ) ); ?></h3>
  172.  
  173. <div id="cancel-comment-reply">
  174.     <small><?php cancel_comment_reply_link() ?></small>
  175. </div>
  176.  
  177. <?php if ( get_option('comment_registration') && !is_user_logged_in() ) : ?>
  178. <p><?php printf(__('You must be <a href="%s">logged in</a> to post a comment.'), wp_login_url( get_permalink() )); ?></p>
  179. <?php else : ?>
  180.  
  181. <form action="<?php echo site_url(); ?>/wp-comments-post.php" method="post" id="commentform">
  182.  
  183. <?php if ( is_user_logged_in() ) : ?>
  184.  
  185. <p><?php printf(__('Logged in as <a href="%1$s">%2$s</a>.'), get_edit_user_link(), $user_identity); ?> <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="<?php esc_attr_e('Log out of this account'); ?>"><?php _e('Log out &raquo;'); ?></a></p>
  186.  
  187. <?php else : ?>
  188.  
  189.     <div class="form-group">
  190.     <label for="author"><?php _e('Name'); ?> <?php if ($req) _e('(required)'); ?></label>
  191.     <div class="input-group">
  192.     <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
  193.     <input class="form-control"type="text" name="author" id="author" placeholder="Your Name" value="<?php echo esc_attr($comment_author); ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> />
  194.     </div>
  195.    
  196. </div>
  197.  
  198. <div class="form-group">
  199.     <label for="email"><?php _e('Mail (will not be published)'); ?><?php if ($req) _e('(required)'); ?></label>
  200.     <div class="input-group">
  201.     <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
  202.     <input class="form-control" type="text" name="email" id="email" placeholder="Your Email" value="<?php echo esc_attr($comment_author_email); ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> />
  203.     </div>
  204.                
  205. </div>
  206.  
  207. <div class="form-group">
  208.   <label for="url"><?php _e('Website'); ?></label>
  209.   <div class="input-group">
  210.   <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
  211.   <input class="form-control" type="text" name="url" id="url" placeholder="Your Website" value="<?php echo  esc_attr($comment_author_url); ?>" size="22" tabindex="3" />
  212.   </div>
  213. </div>
  214.  
  215. <?php endif; ?>
  216.  
  217. <!--<p><small><?php printf(__('<strong>XHTML:</strong> You can use these tags: <code>%s</code>'), allowed_tags()); ?></small></p>-->
  218.  
  219. <div class="form-group">
  220.     <label for="comment" class="sr-only">Reply</label>
  221.     <textarea class="form-control"  role="textbox" aria-multiline="true" name="comment" id="comment" rows="8" placeholder="Your Comment Here..."></textarea>
  222.     </div>
  223.  
  224. <p class="form-submit">
  225.     <input class="btn btn-primary" name="submit" type="submit" id="submit" value="<?php esc_attr_e('Submit Comment'); ?>" />
  226. <?php comment_id_fields(); ?>
  227. </p>
  228. <?php do_action('comment_form', $post->ID); ?>
  229.  
  230. </form>
  231.  
  232. <?php endif; // If registration required and not logged in ?>
  233. </div>
  234.  
  235. <?php endif; // if you delete this the sky will fall on your head ?>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement