[Resolved] Styling post listing on archive/search pages

[Huseyin]

Hi Generatepress Team

I need help on styling posts listed on archive/search pages, I have attached an URL of the style I’m after.

[Leo]

Hi there,

Which part are you referring to?

Can you link me to your site in question?

[Huseyin]

https://ibb.co/0hjqwS6

[Tom]

Hi there,

First few steps:

1. Enable columns: https://docs.generatepress.com/article/using-columns-in-the-blog/
2. Set the featured image to above the title: https://docs.generatepress.com/article/adjusting-the-featured-images/
3. Set the excerpt word count to 0: https://docs.generatepress.com/article/blog-content-layout/
4. Hide the content wrapper with some CSS:

.entry-summary {
    display: none;
}

5. Enable the author and date meta and disable the rest: https://docs.generatepress.com/article/blog-content-layout/

That should get us started.

Let us know 🙂

[Huseyin]

Hi Tom
Thanks for a quick reply, all the steps were done except step4. So all the steps are completed.

[Tom]

Can you link us to your site so we can take a look?

[Huseyin]

Hi Tom
There you go Tom, note the site is in staging
https://wordpress-394091-1251842.cloudwaysapps.com/category/general/

[Tom]

Cool. For the border/padding, you can do this:

.one-container .generate-columns .inside-article {
    padding: 40px;
}

.generate-columns {
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    margin-bottom: 0;
    padding-left: 0;
}

.generate-columns-container {
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
}

.generate-columns-container {
    margin: 0;
}

Then you can adjust the post title font size and colors in the Customizer.

[Huseyin]

Tom, you’re Legend.
How could I get the category styled? and get it above the featured image
https://ibb.co/0hjqwS6

[Tom]

What’s the S for? Is it just a random S?

You could do this to place it:

.generate-columns .inside-article {
    display: flex;
    flex-direction: column;
}

footer.entry-meta {
    order: -1;
    margin: 0 0 20px;
    text-transform: uppercase;
}

Just you can color it in the Customizer.

[Huseyin]

Its the first letter from the category like S – Study Tips

[Tom]

Fancy, could try this:

add_filter( 'generate_inside_post_meta_item_output', function( $output, $item ) {
    if ( 'categories' === $item ) {
        $categories = get_the_category();

        if ( $categories ) {
            $category_name = $categories[0]->name;
            $category_letter = substr( $category_name, 0, 1 );
            return '<span class="cat-letter">' . $category_letter . '</span>';
        }
    }

    return $output;
}, 20, 2 );

Then you just need to style that .cat-letter element. Not sure it’ll work but it should in theory.

[Huseyin]

Thanks Tom, with help.

I’m not sure if I know the next steps as I have inserted following code on “snippets” What element do I need to create?

[David]

Hi there,

have you added the code to your site ? If so how did you add it ?

[Huseyin]

Hi David, added it to the code snippets plugin, add new > pasted the code into a new template and saved it

[Author]

Posts