How to make the COMMENTS button stand out from all my tags!

I did it! But I can’t seem to figure out how to make a space between the Leave a comment and the next post!

<?php
/**
* The loop that displays posts.
*
* The loop displays the posts and the post content. See
* https://codex.www.ads-software.com/The_Loop to understand it and
* https://codex.www.ads-software.com/Template_Tags to understand
* the tags used in it.
*
* This can be overridden in child themes with loop.php or
* loop-template.php, where ‘template’ is the loop context
* requested by a template. For example, loop-index.php would
* be used if it exists and we ask for the loop with:
* get_template_part( 'loop', 'index' );
*
* @package WordPress
* @subpackage Twenty_Ten
* @since Twenty Ten 1.0
*/
?>

<?php /* Display navigation to next/previous pages when applicable */ ?>
<?php if ( $wp_query->max_num_pages > 1 ) : ?>
<div id=”nav-above” class=”navigation”>
<div class=”nav-previous”><?php next_posts_link( __( ‘<span class=”meta-nav”>←</span> Older posts’, ‘twentyten’ ) ); ?></div>
<div class=”nav-next”><?php previous_posts_link( __( ‘Newer posts <span class=”meta-nav”>→</span>’, ‘twentyten’ ) ); ?></div>
</div><!– #nav-above –>
<?php endif; ?>

<?php /* If there are no posts to display, such as an empty archive page */ ?>
<?php if ( ! have_posts() ) : ?>
<div id=”post-0″ class=”post error404 not-found”>
<h1 class=”entry-title”><?php _e( ‘Not Found’, ‘twentyten’ ); ?></h1>
<div class=”entry-content”>
<p><?php _e( ‘Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.’, ‘twentyten’ ); ?></p>
<?php get_search_form(); ?>
</div><!– .entry-content –>
</div><!– #post-0 –>
<?php endif; ?>

<?php
/* Start the Loop.
*
* In Twenty Ten we use the same loop in multiple contexts.
* It is broken into three main parts: when we’re displaying
* posts that are in the gallery category, when we’re displaying
* posts in the asides category, and finally all other posts.
*
* Additionally, we sometimes check for whether we are on an
* archive page, a search page, etc., allowing for small differences
* in the loop on each template without actually duplicating
* the rest of the loop that is shared.
*
* Without further ado, the loop:
*/ ?>
<?php while ( have_posts() ) : the_post(); ?>

<?php /* How to display posts in the Gallery category. */ ?>

<?php if ( in_category( _x(‘gallery’, ‘gallery category slug’, ‘twentyten’) ) ) : ?>
<div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
<h2 class=”entry-title”>” title=”<?php printf( esc_attr__( ‘Permalink to %s’, ‘twentyten’ ), the_title_attribute( ‘echo=0’ ) ); ?>” rel=”bookmark”><?php the_title(); ?></h2>

<div class=”entry-meta”>
<?php twentyten_posted_on(); ?>
</div><!– .entry-meta –>

<div class=”entry-content”>
<?php if ( post_password_required() ) : ?>
<?php the_content(); ?>
<?php else : ?>
<?php
$images = get_children( array( ‘post_parent’ => $post->ID, ‘post_type’ => ‘attachment’, ‘post_mime_type’ => ‘image’, ‘orderby’ => ‘menu_order’, ‘order’ => ‘ASC’, ‘numberposts’ => 999 ) );
if ( $images ) :
$total_images = count( $images );
$image = array_shift( $images );
$image_img_tag = wp_get_attachment_image( $image->ID, ‘thumbnail’ );
?>
<div class=”gallery-thumb”>
“><?php echo $image_img_tag; ?>
</div><!– .gallery-thumb –>
<p><?php printf( __( ‘This gallery contains %2$s photos.’, ‘twentyten’ ),
‘href=”‘ . get_permalink() . ‘” title=”‘ . sprintf( esc_attr__( ‘Permalink to %s’, ‘twentyten’ ), the_title_attribute( ‘echo=0’ ) ) . ‘” rel=”bookmark”‘,
$total_images
); ?></p>
<?php endif; ?>
<?php the_excerpt(); ?>
<?php endif; ?>
</div><!– .entry-content –>

<div class=”entry-utility”>
” title=”<?php esc_attr_e( ‘View posts in the Gallery category’, ‘twentyten’ ); ?>”><?php _e( ‘More Galleries’, ‘twentyten’ ); ?>
<span class=”meta-sep”>|</span>
<span class=”comments-link”><?php comments_popup_link( __( ‘Leave a comment’, ‘twentyten’ ), __( ‘1 Comment’, ‘twentyten’ ), __( ‘% Comments’, ‘twentyten’ ) ); ?></span>
<?php edit_post_link( __( ‘Edit’, ‘twentyten’ ), ‘<span class=”meta-sep”>|</span> <span class=”edit-link”>’, ‘</span>’ ); ?>
</div><!– .entry-utility –>
</div><!– #post-## –>

<?php /* How to display posts in the asides category */ ?>

<?php elseif ( in_category( _x(‘asides’, ‘asides category slug’, ‘twentyten’) ) ) : ?>
<div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>

<?php if ( is_archive() || is_search() ) : // Display excerpts for archives and search. ?>
<div class=”entry-summary”>
<?php the_excerpt(); ?>
</div><!– .entry-summary –>
<?php else : ?>
<div class=”entry-content”>
<?php the_content( __( ‘Continue reading <span class=”meta-nav”>→</span>’, ‘twentyten’ ) ); ?>
</div><!– .entry-content –>
<?php endif; ?>

<div class=”entry-utility”>
<?php twentyten_posted_on(); ?>
<span class=”meta-sep”>|</span>
<span class=”comments-link”><?php comments_popup_link( __( ‘Leave a comment’, ‘twentyten’ ), __( ‘1 Comment’, ‘twentyten’ ), __( ‘% Comments’, ‘twentyten’ ) ); ?></span>
<?php edit_post_link( __( ‘Edit’, ‘twentyten’ ), ‘<span class=”meta-sep”>|</span> <span class=”edit-link”>’, ‘</span>’ ); ?>
</div><!– .entry-utility –>
</div><!– #post-## –>

<?php /* How to display all other posts. */ ?>

<?php else : ?>
<div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
<h2 class=”entry-title”>” title=”<?php printf( esc_attr__( ‘Permalink to %s’, ‘twentyten’ ), the_title_attribute( ‘echo=0’ ) ); ?>” rel=”bookmark”><?php the_title(); ?></h2>

<div class=”entry-meta”>
<?php twentyten_posted_on(); ?>
</div><!– .entry-meta –>

<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
<div class=”entry-summary”>
<?php the_excerpt(); ?>
</div><!– .entry-summary –>
<?php else : ?>
<div class=”entry-content”>
<?php the_content( __( ‘Continue reading <span class=”meta-nav”>→</span>’, ‘twentyten’ ) ); ?>
<?php wp_link_pages( array( ‘before’ => ‘<div class=”page-link”>’ . __( ‘Pages:’, ‘twentyten’ ), ‘after’ => ‘</div>’ ) ); ?>
</div><!– .entry-content –>
<?php endif; ?>

<div class=”entry-utility”>
<?php if ( count( get_the_category() ) ) : ?>
<span class=”cat-links”>
<?php printf( __( ‘<span class=”%1$s”>Posted in</span> %2$s’, ‘twentyten’ ), ‘entry-utility-prep entry-utility-prep-cat-links’, get_the_category_list( ‘, ‘ ) ); ?>
</span>
<span class=”meta-sep”>|</span>
<?php endif; ?>
<?php
$tags_list = get_the_tag_list( ”, ‘, ‘ );
if ( $tags_list ):
?>
<span class=”tag-links”>
<?php printf( __( ‘<span class=”%1$s”>Tagged</span> %2$s’, ‘twentyten’ ), ‘entry-utility-prep entry-utility-prep-tag-links’, $tags_list ); ?>
</span>
<span class=”meta-sep”>|</span>
<?php endif; ?>

<?php edit_post_link( __( ‘Edit’, ‘twentyten’ ), ‘<span class=”meta-sep”>|</span> <span class=”edit-link”>’, ‘</span>’ ); ?>
</div><!– .entry-utility –>
</div><!– #post-## –>

<?php comments_template( ”, true ); ?>
<span class=”comments-link”><?php comments_popup_link( __( ‘Leave a comment’, ‘twentyten’ ), __( ‘1 Comment’, ‘twentyten’ ), __( ‘% Comments’, ‘twentyten’ ) ); ?></span>

<?php endif; // This was the if statement that broke the loop into three parts based on categories. ?>

<?php endwhile; // End the loop. Whew. ?>

<?php /* Display navigation to next/previous pages when applicable */ ?>
<?php if ( $wp_query->max_num_pages > 1 ) : ?>
<div id=”nav-below” class=”navigation”>
<div class=”nav-previous”><?php next_posts_link( __( ‘<span class=”meta-nav”>←</span> Older posts’, ‘twentyten’ ) ); ?></div>
<div class=”nav-next”><?php previous_posts_link( __( ‘Newer posts <span class=”meta-nav”>→</span>’, ‘twentyten’ ) ); ?></div>
</div><!– #nav-below –>
<?php endif; ?>

Thanks so much I guess I need to figure out how to make a page break. I really appreciate your help on this one

Please don’t post the entire file, as it makes it difficult to read.

You shouldn’t use page breaks at all if you can help it, because it makes for messy html. That’s one reason CSS was created.

If you moved the span to the correct position, and gave it a class, all you need to do is give it some positioning in the style.css file.

For example if you gave it a class=”MyCustomComments”, then in the style.css file…

.MyCustomComments{float:left;margin:30px;color:blue;}

.MyCustomComments{float:left;margin:30px;color:blue;}

I opened the style.css but the comment section is HUGE. Where would I enter this code?

It doesn’t matter as long as it’s in the file, but it’s best to put in a relative section for easy reference.

You really should read a few CSS and html tutorials, because this very basic stuff.

Thanks so much…I entered it in. It didn’t help the spacing issue, but that’s ok I can live with that.
CSS is so different from HTML….I really need to study up on all this. I just created this site a couple weeks ago.

Thank you for your time!

If you had moved the div it would have worked, trust me, I’ve been doing this for years.

Since you can’t find the div, you position it absolutely using the same code you just put in the style.css.

.MyCustomComments{position:absolute;top:500px;left:200px;}

That might be exactly where you want it, so you can play with the numbers to move it around.

I did this but there still isn’t a break after comments:

}
.MyCustomComments{position:absolute;top:500px;left:200px;}

#comments {
clear: both;
}
#comments .navigation {
padding: 0 0 18px 0;
}
h3#comments-title,
h3#reply-title {
color: #000;
font-size: 20px;
font-weight: bold;
margin-bottom: 0;

The Woodlands in Tamarac

Lol

So now what are you going to do?