[Support request] how to format the search results in the articles page

[Janani]

Dear Team

You had earlier shown me how to bring in categories in the Articles page. I am very happy with your help and thanks for that. However, when I click on any specific category, the search results come up, but they are in default wordpress style and not well-aligned or aesthetic. Can you help me to format the search results in such a way that it looks more aesthetic and pleasing? Like perhaps the banner image can continue to appear, the heading and the list of articles can be centre aligned as in the original articles page?

Kind regards,

[Fernando]

Hi Janani,

For clarity, can you take a screenshot of the specific section you wish to alter?

Uploading Screenshots: https://docs.generatepress.com/article/using-the-premium-support-forum/#uploading-screenshots

[Janani]

Dear Fernando

Sure things. Please find the link to the current search results. Can you please help me to make the search results page more aesthetic and pleasing?

Kind regards

[Fernando]

I see. Thank you for clarifying.

You can use a Block Element – Content Template for archive pages like that. Reference: https://docs.generatepress.com/article/block-element-content-template/

In the reference link, you can find a sample video showing how to easily design how posts appear in an archive page.

[Janani]

Dear Fernando

Thank you, but I think you have not understood my question well. I have already designed the blog page with your help and it looks very nice. Please see screenshot. Now, when I click on a specific category, I am getting all the articles relevant to that specific category of articles. If you see the search results, they are accurate but not aesthetic or professional. Can you provide a CSS code to help make the search results look better? Like perhaps the heading and the list of articles can be centre aligned as in the original articles page?

Kind regards,

[Fernando]

I see. In that perspective, a Block Element – Loop Template would be ideal. Reference: https://docs.generatepress.com/article/block-element-loop-template/

But, if you want CSS, here’s something you can try:

.site-main {
    text-align: center;
}

.site-main article .inside-article .entry-header {
    justify-content: center;
    border-bottom: solid 1px #00000033;
    padding-bottom: 10px;
}

[Janani]

Excellent, thank you Fernando!

[Fernando]

You’re welcome, Janani!

[Janani]

Dear Fernando

Apologies for opening this ticket again. Just noticed that there are double lines coming up in the main articles page after I put in the code you gave me. Could you please check this and let me know how to rectify it?

Kind regards
Janani

[Fernando]

Can you try removing this one?:

.blog article .entry-title {
    border-bottom: solid 1px #00000033;
    padding-bottom: 10px;
}

[Author]

Posts