How to add horizontal line between posts

Not sure exactly where and how you want the line to look but add

.archive-stack { border-top: solid 1px black; }

to the style.css file and see how it looks.

thanks Jarret for your response. I am trying to insert line after every post listing in the blog.

I am using a post page associator plugin with f8 lite theme to put similar post under a page. I am using its default template ((Default Template (1.0) by Dennis Hoppe
This is the default Post Page Associator Template which fits the most template styles. It shows the title, an excerpt and a thumbnail for each associated post. Feel free to use it to create your own customization. You can find this template in the plugin folder.)

I would like to insert a horizontal line after every post title.

Any help?

Thanks..

Hi
put an<hr/> tag within the loop

Thanks Davidandre for response. I am a newbie in word-press..so couldn’t understand where to place <hr/> tag in the loop? please help!

thanks

Do you have a website that is currently live so I can look at it? I based my answer off of the default theme that I found online but from what you said it appears your layout may be different.

If you can point me to your site with the theme on it hopefully I’ll be able to help you.

Hi Jarret,

its not live yet…am still working on it. I can send a screenshot of the site, but could not locate an upload link. Not sure how else I can help in visual understanding. any suggestions?

If you can, visit the page and right click and look at the source code and copy all of the code that you see. Then visit https://pastebin.com/ and post the code on there and once that is done provide the link on here.

That way I can take a look at the code and tell you where things need to go.

As a quick clarification, do you want the line to show up under the post’s title or do you want a line separating each of the post’s content?

here is the link to the source code of the page – https://pastebin.com/xYMbvphq

I would like to have a line between two posts separating post content.

thanks much for your help!

In your style.css file do something like

.associated-post {
border-bottom: 1px solid black;

The only thing is that because both of the posts on your page use the same associated-post class there will also be a line under the 2nd post as well. You can remedy this by setting the first class of the associated-post to something like associated-post-top

Thanks Jarret it worked. Is it possible to bring the line 1-2 inch below the post. right now it comes right below the post bunched up. Also how to make the line smaller and centrally aligned instead of across the post.

also, where should I add ‘top’ to associated post class?

thanks much for your support!!

Well if you are wanting to do all that it would probably be easier to just add in a separator DIV and add in the line that way.

<div class="post-excerpt"></div> 

        <div class="clear"></div>
      </div>
    <div class="separator"></div>
    <div class="associated-post">
    <h3 class="post-title">

and then in the CSS you could do something like

.separator {
margin: 10px auto 10px auto;
width: 75%;
height: 2px;
border-bottom: 1px solid black;

thanks Jarret. being totally new, just wondering where to add the separator DIV?

please help

thanks,

Hi neer,
you delete line 130 until 135 in your pastebin.com and you print the Jattet code

<div class="post-excerpt"></div>
     <div class="clear"></div>
      </div>
    <div class="separator"></div>
    <div class="associated-post">
    <h3 class="post-title">

dont forget to add the css in your style css. no matter where
good luck

thanks David for your support. I copied the source code from view page and it is not allowing me to edit Jarret’s code into it. Is there any other place where this source code is saved and which i can edit?

thanks,

Neeraj

Ok well I didn’t mean you had to delete any code….sorry for the mixup. I meant for you to just go into the Editor in your Dasbhoard and then add in the

<div class="separator"></div>

code in between the two posts you have showing on your page.

Find this section in your code

<div class="post-excerpt"></div> 

        <div class="clear"></div>
      </div>
    <div class="associated-post">
    <h3 class="post-title">

and then modify it to this

<div class="post-excerpt"></div> 

        <div class="clear"></div>
      </div>
    <div class="separator"></div> <!-- This part is added in -->
    <div class="associated-post">
    <h3 class="post-title">

and then apply the appropriate CSS styling I had mentioned in my above response.