Created
December 30, 2013 14:24
-
-
Save Manoz/8182625 to your computer and use it in GitHub Desktop.
Better WordPress sticky post. Screenshot: http://imgur.com/NC54e38
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> | |
<?php | |
if ( is_sticky() ) { | |
echo '<div class="sticky-flag"><i class="icon-pin wiggle"></i></div>'; | |
} | |
?> | |
<div class="post-thumbnail"> | |
</div> | |
<header> | |
</header> | |
<div class="entry-content"> | |
</div> | |
<footer> | |
</footer> | |
</article> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
article.post.sticky { | |
position: relative; | |
border: 4px solid #ea6060; | |
} | |
.sticky-flag { | |
z-index: 1; | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 40px; | |
height: 40px; | |
color: #fff; | |
background-color: #ea6060; | |
} | |
i.icon-pin { | |
display: block; | |
padding: 7px; | |
font-size: 18px; | |
} | |
/* Wiggle animation | |
------------------------------------- */ | |
@-webkit-keyframes wiggle { | |
0% {-webkit-transform:rotate(4deg);} | |
50% {-webkit-transform:rotate(-4deg);} | |
100% {-webkit-transform:rotate(4deg);} | |
} | |
/* firefox */ | |
@-moz-keyframes wiggle { | |
0% {-moz-transform:rotate(4deg);} | |
50% {-moz-transform:rotate(-4deg);} | |
100% {-moz-transform:rotate(4deg);} | |
} | |
/* anyone brave enough to implement the ideal method */ | |
@keyframes wiggle { | |
0% {transform:rotate(4deg);} | |
50% {transform:rotate(-4deg);} | |
100% {transform:rotate(4deg);} | |
} | |
.wiggle:hover { | |
-webkit-animation: wiggle 0.2s infinite; | |
-moz-animation: wiggle 0.2s infinite; | |
animation: wiggle 0.2s infinite; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment