How To Show Last Updated Date On Page Header?

Hi there,

you can use the PHP snippet provided here to filter the Header Element date:

https://docs.generatepress.com/article/show-the-updated-post-date/#show-the-“updated”-post-date-in-header-element

Thanks, David!

It worked...

But the icons before the date(you provided CSS here) is not showing now, Please help...

And one more issue...

The date is also showing in the starting of post body... See here: https://prnt.sc/phgg1r

I have also added the Comment count(using this) with icons so I am also showing there...

And I also want to align all in a single link, not like this https://prnt.sc/phgial

Can I make its font-size small?

this will align the Comments inline:

.page-header-meta, .page-hero .entry-date {
    display: inline;
    margin-left: 5px;
}

The shortcode provided for the updated date needs to be wrapped in some HTML

eg.

<span class="entry-date">Shortcode here</span>

Hello, David!

It worked!

But the date and comments count is also showing in the starting of content. See here: https://prnt.sc/phjsdw

Why is it showing there?

And one off-topic question, How you find CSS selector, I have tried a lot because learning CSS so tried to do it myself but failed.

Can you try disabling the date option in the customizer for single posts?
https://docs.generatepress.com/article/blog-content-layout/#single

As for finding CSS selector, we use the browser inspector tool. Very useful skill to learn.

Yippee! I got removed!

One last thing, How to give space between author to date and date to comments(and also between comment icon to comment count)? See here https://prnt.sc/phnaxx

Because I want to remove "|".

And How I can learn using Browser inspect tool, can you recommend any resource?

I updated the CSS here:

https://generatepress.com/forums/topic/how-to-last-updated-date-on-page-header/#post-1031208

This adds left margin to both the comment and the date - increase the 5px to whatever space you need.

And to put some space between icon and comments:

.page-header-meta i {
    margin-right: 5px;
}

For Dev Tools and CSS maybe start with googles docs:

https://developers.google.com/web/tools/chrome-devtools/css

Hey, David!

Thanks for the help, it worked!

And also for providing the resource.

I can one last issue, I am using this CSS...

body.single .site.container {
    margin-top: -60px;

It is also making my TOC box up(see here https://prnt.sc/pho6y7), I don't want it up.

How to do this?

Edit your sticky element CSS to include a margin-top property ie.

#right-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    margin-top: 60px; /* Add this property */
}

Thank you so much, David!

You are guys are awesome, very helpful...

Thanks to all GP Support Team.

You guys inspired me to learn programming...

You're very welcome - and thats great to hear.