Separate Individual Posts with border bottom

  • Resolved chickspirit

    (@chickspirit)


    15 years, 1 month ago

    I’d like to separate each post with something like a dotted line.

    I can’t figure out how to do this because the theme I’ve chosen seems to include all the posts in the same section.

    In other words when I add border-bottom: 1px dotted #999999; to any of the styles connected to blog posts the border only shows up at the bottom of the last post instead of between each individual post.

    here is the site https://ktotheatothei.com/blog/

    my index.php

    <?php get_header('blog'); ?>
<?php get_sidebar(); ?>

	<div class="box sml" id="blog">
	<h1><b>THOUGHTS</b>/MUSINGS</h1>
	<div>
		<?php if (have_posts()) : ?>

			<?php while (have_posts()) : the_post(); ?>

		<h2><a class="title" href="<?php the_permalink() ?>" style="text-decoration:none;" rel="bookmark""><?php the_title(); ?></a><span><?php the_time('m.d.y') ?></span></h2>

                          <?php the_content('Weiterlesen &raquo;'); ?>
                      <ul class="controls">
                      <br />
                        <li class="comments">
                            <?php comments_popup_link('0 Comments &raquo;', '1 Comment &raquo;', '% Comments &raquo;'); ?>
                        </li>
                        </ul>

              <?php endwhile; ?>
						</div>

		</div><?php else : ?>

				<h2 class="center">Not Found</h2>
				<p class="center">Sorry, but you are looking for something that isn't here.</p>
				<?php endif; ?>
</div>
	</div>

<?php get_footer(); ?>

    Thanks

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

  • Hi

    wrap each post in a div (like in the code below) and assign the border bottom styling to the new div (CSS below)

    <?php while (have_posts()) : the_post(); ?>
---> ADD    <div class="post">
		<h2><a class="title" href="<?php the_permalink() ?>" style="text-decoration:none;" rel="bookmark""><?php the_title(); ?></a><span><?php the_time('m.d.y') ?></span></h2>
                          <?php the_content('Weiterlesen &raquo;'); ?>
                      <ul class="controls">
                      <br />
                        <li class="comments">
                            <?php comments_popup_link('0 Comments &raquo;', '1 Comment &raquo;', '% Comments &raquo;'); ?>
                        </li>
                        </ul>
---> ADD  </div><!-- class="post"-->
              <?php endwhile; ?>

    CSS:
    .post { border-bottom: 1px dotted #999999; padding: 20px 0; }

    Thread Starter chickspirit

    (@chickspirit)

    Awesome! That totally worked. Thank you.

    The only issue I’m having now is that it has created two layers of my background layer for my posts.
    background:url(https://chickspirit.com/wp-content/themes/kaiworld/images/contentbg.png);

    You can’t see it unless your screen is small enough that the blog posts are pushed to the left and overlap the image of the afro chick a bit.

    Any ideas how to prevent that and only have one layer?

    Thanks again.

    Kai

    hi

    try this – change this
    .post { border-bottom: 1px dotted #999999; padding: 20px 0; }
    to this

    #blog .post {
  background: none;
  border-bottom: 1px dotted #999999;
  padding: 20px 0;
}

    If there’s too much space between posts, change 20px to 15px

    Thread Starter chickspirit

    (@chickspirit)

    Awesome! That totally work. I’m slowly understanding this css stuff. Thank you for relieving me from a couple of days of coding stupor.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Separate Individual Posts with border bottom’ is closed to new replies.