Skip to content

Instantly share code, notes, and snippets.

@rodi01
Created February 1, 2012 06:51
Show Gist options
  • Save rodi01/1715556 to your computer and use it in GitHub Desktop.
Save rodi01/1715556 to your computer and use it in GitHub Desktop.
Create Date Badge with Wordpress and CSS
body { font-size: 62.5%; }
.post {
position: relative;
margin-left: 4.8em;
}
.entryDate {
border: 1px solid #999;
font-family: Georgia,"Times New Roman", serif;
left: -4.8em;
line-height: 1;
position: absolute;
top: 0;
width: 3.5em;
}
.entryDate span {
display: block;
text-align: center;
}
.postMonth {
text-transform: uppercase;
font-size: 1.2em;
padding-top: 0.3em;
}
.postDay { font-size: 2em; }
.postYear {
background-color: #2358B8;
color: #FFF;
font-size: 1.2em;
padding: 0.3em 0;
margin-top: 0.3em;
}
<div class="entryDate">
<span class="postMonth"><?php the_time('M') ?></span>
<span class="postDay"><?php the_time('d') ?></span>
<span class="postYear"><?php the_time('Y') ?></span>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment