Skip to content

Instantly share code, notes, and snippets.

@About2git
Forked from srikat/single.php
Created February 12, 2015 16:25
Show Gist options
  • Save About2git/974cc369aa02c6bce46c to your computer and use it in GitHub Desktop.
Save About2git/974cc369aa02c6bce46c to your computer and use it in GitHub Desktop.
How to add a 'New' ribbon for Posts published in the last 7 days in Genesis.
@media only screen and (max-width: 800px) {
body {
background: #f5f5f5;;
}
.entry {
padding: 50px 60px;
}
.comment-respond,
.entry-pings {
padding: 40px 40px 16px;
}
.sidebar .widget {
padding: 40px;
}
}
@media only screen and (max-width: 320px) {
.entry {
padding: 50px 30px;
}
.comment-respond,
.entry-pings {
padding: 30px 30px 16px;
}
.sidebar .widget {
padding: 30px;
}
}
<?php
add_action( 'genesis_before_entry', 'sk_display_new_ribbon' );
function sk_display_new_ribbon() {
global $post;
if ( strtotime( $post->post_date ) < strtotime('-7 days') ) {
return;
} ?>
<div class="ribbon-wrapper-green">
<div class="ribbon-green">
New
</div>
</div>
<?php }
genesis();
/* ## New Ribbon
--------------------------------------------- */
.single-post .content {
position: relative;
}
.ribbon-wrapper-green {
overflow: hidden;
position: absolute;
top: -3px;
right: -3px;
width: 85px;
height: 88px;
}
.ribbon-green {
position: relative;
top: 15px;
left: -5px;
width: 120px;
padding: 7px 0;
color: #333;
color: #6a6340;
background-color: #bfdc7a;
background-image: -webkit-gradient(linear, left top, left bottom, from(#bfdc7a), to(#8ebf45));
background-image: -webkit-linear-gradient(top, #bfdc7a, #8ebf45);
background-image: -moz-linear-gradient(top, #bfdc7a, #8ebf45);
background-image: -ms-linear-gradient(top, #bfdc7a, #8ebf45);
background-image: -o-linear-gradient(top, #bfdc7a, #8ebf45);
-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.3);
-moz-box-shadow: 0 0 3px rgba(0,0,0,0.3);
box-shadow: 0 0 3px rgba(0,0,0,0.3);
text-shadow: rgba(255,255,255,0.5) 0 1px 0;
font: bold 15px Sans-Serif;
text-align: center;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.ribbon-green:before,
.ribbon-green:after {
position: absolute;
bottom: -3px;
border-top: 3px solid #6e8900;
border-right: 3px solid transparent;
border-left: 3px solid transparent;
content: "";
}
.ribbon-green:before {
left: 0;
}
.ribbon-green:after {
right: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment