Twenty Twelve: Adding separator line between posts

  • Resolved scarymarys

    (@scarymarys)


    10 years, 5 months ago

    Hello!
    I’m using Twenty Twelve and I can’t get the inserted separator to look nice. On the homepage, I have thumbnails and excerpts.

    Problem: The line is there, but it’s position of it is not fixed. So, the line apperars in different places depending on how much text I have in the excerpt. Sometimes it’s perfect, sometimes it’s directly under the excerpt text and sometimes it’s way under it, creating a big white space between the posts.

    What I have done: Here it is

    <?php if ( is_search() || is_author() || is_home() || is_tag() ) : // Only display Excerpts for Search ?>
		<div class="entry-summary">
<?php if ( has_post_thumbnail()) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
<?php the_post_thumbnail('thumbnail', array('class' => 'alignleft')); ?>
</a>
<div id="linje">
<?php endif; ?>

    .
    As you can see, I inserted a “div” above the php endif.

    And this is the code in my style.css
    #linje {border-bottom:1px dotted black; padding-bottom:20%;}

    Do you have any ideas? And yes, I use a child theme ??

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

  • @scarymarys

    Are you sure you closed your div?

    <div id="linje"></div>

    Thread Starter scarymarys

    (@scarymarys)

    Well, no. I hadn’t closed it. That’s so stupid of me! So I closed it, exactly as you showed me with <div id="linje"></div>. But it didn’t work. It actually looked even worse. The line appeared above the excerpt.

    So, I moved the div and I put it here

    <?php endif; ?>
			<?php the_excerpt(); ?><div id="linje"></div>
		</div><!-- .entry-summary -->
		<?php else : ?>
		<div class="entry-content">

    And it looks better, but, the line position still isn’t fixed. If there the excerpt is longer (3+ lines), the separator line will be pushed down, creating a white space under the excerpt and the thumbnail. If the excerpt is 2 lines the separator’s position is perfect, if it’s only one line, the separator will be too high “running through” the thumbnail.

    Help, please!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You can add the separator line with CSS, not sure why this requires PHP

    Thread Starter scarymarys

    (@scarymarys)

    I’m a beginner, so I read this in a tutorial. I don’t know how to do this only in CSS. How would I decide where the separator goes?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Can you first link to a page with the issue?

    Thread Starter scarymarys

    (@scarymarys)

    Yes, of course. Here it is.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Forget about this PHP and just add this CSS:

    .site-content article {
 border-bottom: 1px dotted black;
 overflow: hidden;
}

    Thread Starter scarymarys

    (@scarymarys)

    Thank you, it worked!

    .site-content article {
    margin-bottom: 2rem;
}

    I also added this code to remove some of the white space between the separator and the post title:

    .site-content article {
    margin-bottom: 2rem;
}

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Twenty Twelve: Adding separator line between posts’ is closed to new replies.