WP SITES

Log in

Add Date Ribbon To Entry Time In Genesis Sample Theme

—

by

Brad Dalton

This CSS code styles the .entry-time class which is one of the classes included in the post info entry meta.

Here’s the result after adding this code to the Genesis Sample child theme.

style entry time date ribbon

This code only works on this specific child theme and will need modifying for use on any other theme.

Ribbon Color Changes For Each Category

The CSS also changes the color of the ribbon based on which category the single post is assigned to. You will need to modify the classes to make them work with your category I.D’s or slugs.

change color

Note: This code did take me several hours to tweak so please do understand it may take some time to get working correctly if you decide to use it on any theme other than the one i tested it on.

Register for full access

Related Posts

Comments

8 responses to “Add Date Ribbon To Entry Time In Genesis Sample Theme”

  1. Sha Avatar
    Sha

    Hi Brad! LOVE this but is there a way to put this ribbon inline with the post title? (All on one line)

    Or put it above the post title?

    As always, thanks!!!

    1. Brad Dalton Avatar
      Brad Dalton

      I think its simply a matter of changing the values for top and left or right properties. Did you try that?

      Interested to know myself as have deleted that code locally already so please post back if you work out a good solution. Thanks.

      1. Sha Avatar
        Sha

        I added margin-left to the .entry-title (50px)

        and changed out the top to -42px under your .entry-header .entry-time code. Might not be the “right” way to achieve what I wanted but it worked LoL

        1. Brad Dalton Avatar
          Brad Dalton

          Thanks for sharing Sha.

          Good luck with the Media Queries!!

          1. Sha Avatar
            Sha

            That’s what will be tricky! ha! I didn’t know how else to do what I wanted to achieve.

          2. Brad Dalton Avatar
            Brad Dalton

            I think its a bit of playing around with the values for each screen size but not too complicated.

  2. Barbara Avatar
    Barbara

    Love your tips!

    I would like to use this on Agency Pro – How can that be accomplished?

    Thank you!
    Barbara

    1. Brad Dalton Avatar
      Brad Dalton

      Add both code snippets and then you’ll probably need to modify the values for positioning the ribbon
      [code]
      right: 50px;
      top: 10px;
      [/code]

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.