Add line between blog posts in category view

  • Resolved kwsapphire

    (@kwsapphire)


    7 years, 6 months ago

    Hi there! I’d like to add a divider image between the snippets of posts on the “Category” blog view. I have three categories, shown below:

    https://coloden.com/category/ferrets/
    https://coloden.com/category/rambles/
    https://coloden.com/category/recipes/

    These are the only views in which I display a set of blog posts. That is, there is no page linked on my site that shows all blog posts in full, so I don’t need to modify a “full blog” view. I only need to modify the category page specifically.

    The problem is, in these “Category” views, each preview of the blog posts are right on top of each other. The text that says “This entry was posted in [category] on [date]” is RIGHT ABOVE the title for the next blog post, with no space at all! I would like to insert a line image between each of these blocks.

    I am guessing I probably have to modify my category.php child file, but I don’t know where to insert the code. I tried adding it above the “php else” line, but that just added the image to the bottom of the page, below all the posts, not between them. But it doesn’t seem like I can just include HTML above that, because it’s in the middle of open brackets, < and >. 

    <?php
/**
 * The template for displaying Category pages
 *
 * Used to display archive-type pages for posts in a category.
 *
 * @link https://codex.www.ads-software.com/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */

get_header(); ?>

	<section id="primary" class="full-width">
		<div id="content" role="main">

		<?php if ( have_posts() ) : ?>
			<header class="archive-header">
				<h1 class="archive-title"><?php printf( __( 'Category Archives: %s', 'twentytwelve' ), '<span>' . single_cat_title( '', false ) . '</span>' ); ?></h1>

			<?php if ( category_description() ) : // Show an optional category description ?>
				<div class="archive-meta"><?php echo category_description(); ?></div>
			<?php endif; ?>
			</header><!-- .archive-header -->

			<?php
			/* Start the Loop */
			while ( have_posts() ) : the_post();

				/* Include the post format-specific template for the content. If you want to
				 * this in a child theme then include a file called called content-___.php
				 * (where ___ is the post format) and that will be used instead.
				 */
				get_template_part( 'content', get_post_format() );

			endwhile;

			twentytwelve_content_nav( 'nav-below' );
			?>

		<?php else : ?>
			<?php get_template_part( 'content', 'none' ); ?>
		<?php endif; ?>

		</div><!-- #content -->
	</section><!-- #primary -->

<?php get_footer(); ?>

    Where do I insert code to add an image line between each post summary? And can I use HTML to do this, or do I need some other formatting to insert the image?

    I appreciate any help you can provide, and thank you!!

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • I would add this custom CSS:

    
.archive .type-post {
	margin-bottom: 1em;
	border-bottom: 1px solid #ededed;
	padding-bottom: 1em;
}

.archive footer[role="contentinfo"] {
    border-top: none;
}
    Thread Starter kwsapphire

    (@kwsapphire)

    Thank you very much, that did work. I do have a couple of other questions though.

    First, a friend of mine provided some other code which basically does the same thing.

    article.post.hentry { border-bottom: 1px solid #fff; padding-bottom: 30px; margin-bottom: 30px; }
article.post.hentry:last-child { border-bottom: none; padding-bottom: 0; }

    I don’t understand CSS well enough to know why these two bits of code do basically the same thing. Why does .archive .type-post modify exactly the same thing as article.post.hentry?

    Second, is there a way I could use an image as the divider, rather than a 1px line? I have a horizontal line image that I use as a divider on pages and in posts. Is it possible to use that instead?

    Thanks again for your help!

    why these two bits of code do basically the same thing

    The simple answer is there is often, with CSS, more than one way to get the same results.

    When I chose the elements to target the CSS to in my example, I wanted to target only the posts that where on an archive page.

    The class .archive is output via the body classes functions.

    That is the first part of the CSS. The second part removes the top border on the footer.

    Since ‘article’ is an HTML element, to know for sure when targeting it that we are not affecting other site content, I chose to be more targeted.

    Thread Starter kwsapphire

    (@kwsapphire)

    Got it. Thank you so much for your help, I really appreciate it! ^_^

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Add line between blog posts in category view’ is closed to new replies.