[Resolved] How To Show Last Updated Date On Page Header?

[Ravi Dixit]

I was using this CSS for showing last updated date instead of published date:

.posted-on .updated {
display: inline-block;
}

.posted-on .updated + .entry-date {
display: none;
}

But now, I have added Page Header for my posts and added Date but my posts are not showing last updated date. It is showing the Published date.

Please help

Thanks.

[David]

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

[Ravi Dixit]

Thanks, David!

It worked…

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

[Ravi Dixit]

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?

[David]

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>

[Ravi Dixit]

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.

[Leo]

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.

[Ravi Dixit]

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?

[David]

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

[Ravi Dixit]

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?

[David]

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 */
}

[Ravi Dixit]

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…

[David]

You’re very welcome – and thats great to hear.

[Author]

Posts