Support » Themes and Templates » Seperate Each Post from Each Other

  • Is there an easy way to make it so the posts arent attached to eachother? My theme background is grey. The frontpage posts appear on a white background. Theres only a tiny ——– type border line seperating each posts bottom from the descending posts title/top. Id like to have each post seperated from eachother. With about 3/4 cm of background grey color at the bottoms of each post.

    [ ] <-So the posts appear more like that in the feed.
    [ ]
    [ ]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Could you post a link to your site, or let us know what theme you’re using?

    While simple, the following probably isn’t the most graceful solution.

    In style.css near line 574:

    border-bottom: 1px solid #EEE;

    Change to:
    border-bottom: 25px solid #F0F0F0;

    The problem with this is that the grey separator will not extend the full width of the #post-content div.

    I suspect to get the effect you’re looking for, you’ll need to change the background color of #post-content to #F0F0F0, and then change the background color of .post to #FFF (or whatever color you’d like).

    Haha I JUST solved this right now! I was marking my own question as resolved when I came across your question. Here’s my answer to myself:


    Solved this on my own!

    In case anyone is interested, insert a <div> tag after the start of the loop and before your title or featured image. Insert the closing </div> tag before the end of the loop.

    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <div id="blocks">
    			<div class="post"><h2><a>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
    			<div id="featured-image"><?php if ( has_post_thumbnail() ) {the_post_thumbnail('medium');}?></div>
    			<div id="entry-summary"><?php the_excerpt(); ?></div>
    			<?php endwhile; else: ?>
    			<p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?>

    @ matt, yea i already tried that before asking. Its like you said it doesnt connect all the way. On top of that I wanted a solid line border surrounding each post. So they look like there in little seperated boxes.


    That code is supposed to box off each post?

    I used that code to do this:
    (I’m still editing everything so that second post is obviously too short. But when it’s longer, it’ll look like the first post.)

    Is that what you wanted?

    So if you want a solid border around each post, you would add styling to the div ID called “blocks.”

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Seperate Each Post from Each Other’ is closed to new replies.