[Support request] Adding “Last Updated” CSS to one page only

Home Forums Support [Support request] Adding “Last Updated” CSS to one page only

Home Forums Support Adding “Last Updated” CSS to one page only

  • This topic has 7 replies, 3 voices, and was last updated 2 months ago by Ying.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #2003089
    gamboool

    Hi, and sorry if this is a dumb question regarding adding “update post” CSS.

    I’ve installed the Simple CSS plug-in and would like to add an “Updated post” date to one page only. (A price sensitive page that I update monthly).

    I read the recommended CSS instructions from from Generate Press here: https://docs.generatepress.com/article/show-the-updated-post-date/

    My question: Do I have enter CSS into the editor in the Dashboard first? In other words, can I just add CSS to one page only? And if I do add the recommended CSS into the dashboard editor, will it show “Updated post” for every page on my site?

    Thank you for helping me.

    -Steve

    #2003333
    Ying
    Staff
    Customer Support

    Hi Steve,

    If you only want to apply the CSS to a certain page, then add the CSS in the Simple CSS field of the page editor.

    Don’t add it to customizer > simple CSS or customizer > additional CSS.

    #2004054
    gamboool

    Thank you Ying. Just to be clear: I don’t have to have to add any CSS in the dashboard editor first? I ask because I tried the following code from GeneratePress below on one page, and it didn’t seem to work (I cached the page afterwards).

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

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

    Also, do I have to type in the date? Or does it do it automatically?

    Lastly, I don’t know if this matters, but I’m trying to show this “Updated” date on a page and not a post. The page in question is here: https://gamboool.com/circus-circus-buffet-prices-and-hours

    Thank you for your patience with me Ying.

    #2004219
    Ying
    Staff
    Customer Support

    Ah I see, pages don’t have post meta built in, so you’ll need to add the post meta to the page first:

    1. Go to appearance > elements, create a new Hook element.
    2. Add this code into the hook element: <?php generate_posted_on(); ?>, tick theExecute PHPbox, choose generate_before_content
    hook, please refer to this screenshot: https://www.screencast.com/t/EJo15bJDwq6
    3. Choose page > the specific page as location: https://www.screencast.com/t/e9FqIX715BF

    Then add this CSS to the simple CSS field in the page editor or to customizer > additional CSS/simple CSS

    .page .posted-on .updated {
    display: inline-block;
    }
    .page .posted-on .updated + .entry-date , .page .byline{
    display: none;
    }

    Also, do I have to type in the date? Or does it do it automatically?

    No, you don’t need to. The date will be generated automatically.

    Let me know if this helps ๐Ÿ™‚

    #2007724
    gamboool

    Thank you so much for your detailed response Ying. You’re earning your keep with me:)

    Unfortunately, I have the message, “Unable to execute PHP as DISALLOW_FILE_EDIT is defined.”

    I’m currently reading up on how to correct this. I know GP has a lot of documentation on this; I’m just leery of accidently deleting my site when getting into the FTP files.

    I’ll let you know.

    Thank you again.

    -Steve

    #2008117
    David
    Staff
    Customer Support

    Hi there,

    this document provides a PHP Snippet:

    https://docs.generatepress.com/article/generate_hooks_execute_php/

    You can add this to a) Child Theme functions.php or b) the Code Snippets plugin.
    It will enable PHP editing just inside the GP Hooks

    #2008386
    gamboool

    Dear David and Ying,

    You guys are incredible. Thank you so much for helping this noob out. I’ve tested on a page and it works great. ‘

    One last dumb question if you have time:

    How do I add the words, “Last updated on” before the date? I can fiddle with CSS to make the font smaller but I’m unsure as to how to add this.

    Thank you again for your assistance. I really appreciate it.

    #2008422
    Ying
    Staff
    Customer Support

    You can add this CSS as well ๐Ÿ™‚

    .posted-on .updated:before {
        content: "Last updated on ";
    }

    Glad to help!

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.