[Resolved] customize archive page

[Janani]

Hi

Please let me know how I can customize my archive page:

1. I would like to achieve a format like this:
Date Topic of post

But what I see is:
URL of post
Date (small)

How do I change this?

2. I see an empty space at the top, after which the content starts.
I have reduced my padding at the top and bottom, but I still see the empty space. Should I reduce my container width and seperator also? but will it not affect my site globally? Please advise.

[Leo]

Hi there,

1.

But what I see is:
URL of post
Date (small)

Didn’t we already figure the URL of the post question in other post?

So basically you want the date to show on the left of the post title? Not sure how it would look good.

2. That’s the separating space option. You have it set at 100px which is really big:
https://www.screencast.com/t/YofkTF1c0jH

Looking at your layout, I believe one container option would work better:
https://docs.generatepress.com/article/content-layout/

[Janani]

Dear Leo

Thanks.

1. On Q1, I would like to achieve a format like this:

Blog – Archives

Date of post Title of post

Please advise.

2. On Q2, I selected one container option and it worked perfectly.
Although the problem is solved, I just have a clarification – why didn’t changing to one container option and reducing the seperating size affect the site globally? Maybe it was because I was using sections on other pages?

Warm regards

[Janani]

Maybe, a format like this but with few alterations: https://zenhabits.net/archives/

The title will be ‘Blog – Archives’.

May 10,2020 Title of post

Hope this explains.

[Leo]

1. Just to confirm, you are referring to the main posts page when you are referring to Archive right?

If so then you will need to create a header element for the Blog – Archives title:
https://docs.generatepress.com/article/header-element-overview/
https://docs.generatepress.com/article/how-to-create-a-page-hero/
https://docs.generatepress.com/article/page-hero-examples/

Then add this CSS to move the date inline with the title:

.blog .entry-header, .archive .entry-header {
    display: flex;
    flex-direction: row-reverse;
}

2. Yes Sections are handled differently.

[Janani]

Dear Leo

Thanks. This has helped a lot. Just a couple of things more:

1. How do I increase the gap between the date and the title?
2. The title is now in the size of H1. How do I reduce this to the normal body text?

Warm regards

[Leo]

1. Try this:

.entry-meta {
    margin-right: 20px;
}

2. Try Typography > Headings > Heading 2

[Janani]

Thanks Leo,

I got the spacing between the date and the topic.
But when I change H2, it affects my site globally.
Is there no way I can just change the typography in the Blog page to h3 or body text?

[Leo]

Try this option instead:
https://www.screencast.com/t/g1Rr70jTO

[Janani]

Dear Leo

Thank you very much. This is done.
I have one last query. How do I make the link to the post open in a new page? Please let me know I need to open a new ticket for this.

Warm regards

[Leo]

A new topic would be the best.

Thanks!

[Author]

Posts