Create Beautiful Post Date Stamps – CSS Sprites

Posted on Posted in My Blog

Curious about how to add some style to your blog’s post date? Here are some steps to design a beautiful date stamp. The instructions are specific to WordPress but you should be able to use the same basic technique on other CMS systems as well.

It will be helpful to have some CSS experience and in the specific use outlined below, some WordPress development experience as well.

What you will need:

  • A graphics program (like Adobe Photoshop CS5)
  • A simple text editor (Notepad++ is great for Windows… On mac, try Komodo edit)

What you will accomplish in this tutorial:

Post Date Stamp

Let’s get started… Step #1

Fire up your graphics program. You can download a PSD or PNG template to help with the image layout.

Step #2

You will be creating a grid of months, days, and years. My grid has the months in the first column, days in the next two columns and years vertically in the last column. Feel free to try different fonts, just make sure to stay within the grid. You can also change the overall size to create smaller or larger stamps. If you do change the size, you will need to do the math to figure out the CSS. Once your done, save the file as a .png and place it inside an images folder at the root of your theme (where your main style sheet lives).
Photoshop TemplateCode Komodo Edit

Step #3

Now for the CSS. Although it looks pretty complex, it is actually really easy. If you used the psd template and kept the image the same size, you won’t need to do any math, just put in the CSS and your done.

The CSS is as follows:

/*Date Sprite */ 
.postdate { 
    position: relative; 
    width: 70px; 
    height: 65px; 
    float: left; 
    background:#1EB0BC; 
    margin:10px 10px 10px 0; 
    -moz-border-radius: 5px; /* Firefox */ 
    -webkit-border-radius: 5px; /* Safari, Chrome */ 
    border-radius: 5px; /* CSS3 */
}
.month, .day, .year { 
    position: absolute; 
    text-indent: -1000em; 
    background-image: url(images/date_img.png); 
    background-repeat: no-repeat; 
} 
.month { 
    top: 10px; 
    left: 5px; 
    width: 35px; 
    height: 30px;
} 
.day { 
    top: 28px; 
    left: 5px; 
    width: 35px; 
    height: 30px;
} 
.year { 
    top: 12px; 
    right: 0; 
    width: 25px; 
    height: 60px;
} 
.m-01 { background-position: 0 0px;} 
.m-02 { background-position: 0 -30px;} 
.m-03 { background-position: 0 -60px;} 
.m-04 { background-position: 0 -90px;} 
.m-05 { background-position: 0 -120px;} 
.m-06 { background-position: 0 -150px;} 
.m-07 { background-position: 0 -180px;} 
.m-08 { background-position: 0 -210px;} 
.m-09 { background-position: 0 -240px;} 
.m-10 { background-position: 0 -270px;} 
.m-11 { background-position: 0 -300px;} 
.m-12 { background-position: 0 -330px;} 

.d-01 { background-position: -35px 0;} 
.d-02 { background-position: -35px -30px;} 
.d-03 { background-position: -35px -60px;} 
.d-04 { background-position: -35px -90px;} 
.d-05 { background-position: -35px -120px;} 
.d-06 { background-position: -35px -150px;} 
.d-07 { background-position: -35px -180px;} 
.d-08 { background-position: -35px -210px;} 
.d-09 { background-position: -35px -240px;} 
.d-10 { background-position: -35px -270px;} 
.d-11 { background-position: -35px -300px;} 
.d-12 { background-position: -35px -330px;} 
.d-13 { background-position: -35px -360px;} 
.d-14 { background-position: -35px -390px;} 
.d-15 { background-position: -35px -420px;} 
.d-16 { background-position: -35px -450px;} 
.d-17 { background-position: -70px -0px;} 
.d-18 { background-position: -70px -30px;} 
.d-19 { background-position: -70px -60px;} 
.d-20 { background-position: -70px -90px;} 
.d-21 { background-position: -70px -120px;} 
.d-22 { background-position: -70px -150px;} 
.d-23 { background-position: -70px -180px;} 
.d-24 { background-position: -70px -210px;} 
.d-25 { background-position: -70px -240px;} 
.d-26 { background-position: -70px -270px;} 
.d-27 { background-position: -70px -300px;} 
.d-28 { background-position: -70px -330px;} 
.d-29 { background-position: -70px -360px;} 
.d-30 { background-position: -70px -390px;} 
.d-31 { background-position: -70px -420px;} 

.y-2009 { background-position: -105px 0;} 
.y-2010 { background-position: -105px -60px;} 
.y-2011 { background-position: -105px -120px;} 
.y-2012 { background-position: -105px -180px;} 
.y-2013 { background-position: -105px -240px;} 
.y-2014 { background-position: -105px -300px;} 
.y-2015 { background-position: -105px -360px;} 
.y-2016 { background-position: -105px -420px;}

Explanation:

.postdate – Sets the width and height of the entire date stamp. In this case we are going to make our date fit into a box 70px by 65px.

.month, .day, .year – Sets the width and height of the individual elements that make up our whole date stamp. Our months and days are 35px wide by 30px high. The years are 25px wide by 60px high. When you put these elements together they make a box 70px wide by 65px high. It also attaches the graphic we made in step #1 so we can position it for each individual element in the Sprite.

.m-01 through .m-12 – are our months. This part of the CSS positions our image to display the months. As you can see I set the image to move on an X Y axis based on where it appears on the image. The easiest way to figure out where the top left corner (0,0) of each month, day, or year is on the larger image is to open up Photoshop and press ctrl-r to see the ruler. Set the ruler in pixels by right clicking the ruler and selecting pixels. Now follow the guideline to the ruler to see what pixel it is on.

.d-01 through .d-31 – Is used for exactly the same thing as .m-01 – .m-12 except their used for the days rather than the months.

.y-2009 through .y-2016 – Same as above only we use them for the years.

Step #4

Open up the loop in WordPress. Using the default WordPress setup, the loop in WordPress is in the page(s) that display(s) your blog posts. This is usually the index.php page. Dates show up on other pages too but this tutorial only replaces the dates in the main loop.

Search for something along this line in your loop:

<?php the_time('F jS, Y') ?>

Replace with these lines:

<div class="postdate">
    <div class="month m-<?php the_time('m') ?>"><?php the_time('M') ?> </div> 
    <div class="day d-<?php the_time('d') ?>"><?php the_time('d') ?></div> 
    <div class="year y-<?php the_time('Y') ?>"><?php the_time('Y') ?></div> 
</div>

Step #5

Upload your image, and the changes to your CSS and index.php. Check out your page live in a browser to see the results! You just created your own styled date stamp using CSS sprites.