Lines on the top and bottom of each post?

[rherhood]

I want to make a simple blog page with several areas of contents on several pages. Between each post on the blog I want a light grey line on the top and bottom of each post. Each post will have a title and the content underneath. To the left of the post I will have a linked picture back to Amazon.( I will be using the layout of 1/3 & 2/3’s. I will temporarily end each long post with three dots… and then if the reader clicks on the title it will open up the entire content.

1. what is the best way to add a thin line at the top and bottom of a post.
2. Since I will not be using ecommerce…I will be using a blog setup with images and links and content which goes back to Amazon. Should I write may content in a Post or Blog Page?. If I create a new page and call it Blog…how can I remove the word “Blog” from the page? I just want the viewer to see the images and content and not the title of “Blog” or “Post”.
3. Is there a template that could get me in the ball park with some modification?
4. Here is the simple format I would like to emulate… https://camperreport.com/
   I would appreciate any help anyone could provide. Thank you

[Prasant]

Hello @rherhood,

Thanks for asking.

1. You can use following CSS under Pro > Theme Options > CSS to have lines above and after blog posts:

.blog .hentry {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding-top: 15px;
    padding-bottom: 15px;
}

.single-post .x-main {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding-top: 15px;
    padding-bottom: 15px;
}

2.To remove blog page title please open the blog page in Cornerstone and under Meta Settings > Disable Page Title. https://cloudup.com/cQ-F395-0dT
3. There is no need for extra template. You can edit the contents in Cornerstone and select the column layout as per requirement.

I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I also recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

In above codes that I have shared .single-post .x-main is called as the selector. Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.