getting this look for entry meta

[Ben]

Hi,

how can I get this look for the entry meta?:
https://lutim.nomagic.uk/XWPzklZe.png

I’d like the meta in it’s own column on the right with the post contents on the left

Ben

[Tom]

Tricky one! We could try some CSS Grid..

First, we need to move the meta out of the entry-header element:

add_action( 'wp', function() {
    remove_action( 'generate_after_entry_title', 'generate_post_meta' );
    add_action( 'generate_before_content', 'generate_post_meta' );
}, 50 );

Then try this CSS:

.home .inside-article,
.archive .inside-article,
.single .inside-article {
    display: grid;
    grid-template-areas: 
            "title meta"
            "content meta";
}

.home .entry-header,
.archive .entry-header,
.single .entry-header {
    grid-area: title;
}

.home .entry-meta,
.archive .entry-meta,
.single .entry-meta {
    grid-area: meta;
    margin-top: 0;
    padding-left: 20px;
    margin-left: 20px;
    border-left: 1px solid #ddd;
}

.home .entry-summary,
.archive .entry-summary,
.single .entry-content {
    grid-area: content;
}

Not sure if this is going to work at all, but it’s worth a shot – it will definitely require some tweaking once implemented.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Ben]

Tom
That works for ‘post category’ and ‘post comment’ meta. Would it be possible to move the ‘post date’ over to the right?

When I scroll down I see that the entry meta are not in line with each other.
https://lutim.nomagic.uk/xm7TMOHF.png

Would it be possible to have them all lined up as if they were in their own column?

How would I increase the padding between the post content and the entry meta? I couldn’t find a way to do that in Customise: Layout.

Thanks for your help

[Tom]

Did you add the first function? I’m still seeing the post meta inside the entry header.

I just updated the CSS a bit – is that placed better?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Ben]

Yes, I did add the php function, in the Snippets plugin:

https://lutim.nomagic.uk/6oI4pzwj.png

And updated the CSS in Simple CSS. It doesn’t appear to have had any effect. Have I added the function and css in the correct way?

[Tom]

I just edited the PHP a bit – can you try now?

Also edited the CSS a little to add padding and a border.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts