Bedford Template: Blog: How do I change the format of my posts on the blog list page?

Right now I am trying to recreate an old blog. However I am running into a lot of design problems. First of all it seems like on blog pages you cannot add blocks like you can on normal pages... you can only add posts, Before all the posts i wanted there to be a main paragraph... Not only that, I am not finding any way to edit the style of the posts on the blog list page. For example, I wanted the title to be first, the date to be underneath. Instead of "Read More ->" as text, i wanted it to be a button. There has got to be a way to do something as simple as this?!

If i want these little style details am I going to have to make my blog list page as a normal page, and just link to each blog post page manually? Can I make these changes via custom CSS?

Any input or advice would be much appreciated!Thanks in advance.

@PMDesigner You can use CSS to change font, color, size, order (title - date - excerpt..), replace text with custom text/icon, change text to button...

Thanks for the reply @tuanphan how exactly would I do that? change each one individually, or is there a way to target all posts?

Also, how could I move the date to be under the title, use x, y position?

Any direction you could point me in could help.

@PMDesigner you can target all posts with CSS.

if you know basic CSS, you can use Flexbox to re-order date, title,...

If you don't know css, you should share url.

@tuanphan Thanks again for the reply :)

I do know basic CSS so I will take a look at flexbox.

But here is a link to the site I am working on currently, If you could show me how you would go about putting the dates under the titles, and also making the "read more" into a button that would help.

All these things are nice, but how would I add a text block with a paragraph to the blog list page itself? Can css add an element like that, without any access to html?

@PMDesigner

/* Date under title */
.collection-type-blog.view-list article .entry-header {
   display: flex;
   flex-direction: column-reverse;
}
/* Read more to button */
.collection-type-blog.view-list article .entry-more-link a {
   background: #000;
   display: inline-block;
   padding: 10px 20px;
   border-radius: 20px;
   color: #fff !important;
   font-size: 16px;
}
/* Read more button hover */
.collection-type-blog.view-list article .entry-more-link a:hover {
   background: #fff;
   color: #000 !important;
   border: 1px solid #000;
}

You can't add text block with CSS. CSS can only add simple text.

This worked great! @tuanphan Thanks so much!

It really is too bad that the bedford template doesn't give you the ability to edit these types of things easily, but i'm sure if anyone has this problem in the future they will find this code to be very useful.

@PMDesigner You're welcome. Reference, maybe you will need in future: https://beaverhero.com/tag/bedford-family/

@tuanphan can you create the same code for the "read more" button for skye template? 

Thanks!