API tools faq
paste
Advertisement
arnabkumar

Wordpress Comments CSS & scripts

arnabkumar
Mar 22nd, 2014
226
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 9.95 KB | None | 0 0
raw download clone embed print report
  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
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!