• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Add Date Ribbon To Entry Time In Genesis Sample Theme

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

  • Add Ribbon To Slider Images For Tagging Your Best Stories
  • Add CSS Corner Ribbon To Page or Post Content

Reader Interactions

Comments

  1. Sha says

    May 27, 2014 at 2:51 pm

    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!!!

    Log in to Reply
    • Brad Dalton says

      May 27, 2014 at 2:56 pm

      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.

      Log in to Reply
      • Sha says

        May 27, 2014 at 3:15 pm

        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

        Log in to Reply
        • Brad Dalton says

          May 27, 2014 at 3:26 pm

          Thanks for sharing Sha.

          Good luck with the Media Queries!!

          Log in to Reply
          • Sha says

            May 27, 2014 at 3:28 pm

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

          • Brad Dalton says

            May 27, 2014 at 3:48 pm

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

  2. Barbara says

    May 13, 2014 at 4:23 pm

    Love your tips!

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

    Thank you!
    Barbara

    Log in to Reply
    • Brad Dalton says

      May 13, 2014 at 4:25 pm

      Add both code snippets and then you’ll probably need to modify the values for positioning the ribbon

      right: 50px;
      top: 10px;
      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.