Ever wonder how to super style your blog’s post date? I am going to show you how to do this using CSS sprites in about 18 minutes.
Editorial Note: This post is geared toward theme designers. Prior knowledge of CSS and WordPress is recommended.
What you will need:
- A graphics program (I use Adobe Photoshop CS4)
- A simple text editor
What you will accomplish in this tutorial:
- The dates on your blog’s posts will be super styled using CSS Sprites
Let’s get started…
Step #1
Fire up your graphics program. You can download a PSD or PNG template to help with the layout of all of the dates in our Sprite.
Step #2
Basically you want to create a grid using months, days, and years. As you can see, my grid has the months in one column then the days in two columns and finally the years vertically in a column. Once you get your dates on the “grid” you can save the file. Hint: Make sure your text is equally spaced from top to bottom and from left to right. This makes the math easier when each date has the same white space.
Step #3
On to the coding… Don’t worry it’s really easy, especially if you are using my PNG or have used the PSD file (It includes guidelines to keep your “grid” nice and neat plus you can then cut and paste the CSS code in this step directly into your themes’ stylesheet without any math.)
The CSS is as follows:
/*Date Sprite */
.postdate {
position: relative;
width: 66px;
height: 60px;
float: left;
}
.month, .day, .year {
position: absolute;
text-indent: -1000em;
background-image: url(images/date_img.png);
background-repeat: no-repeat;
}
.month { top: 10px; left: 0; width: 33px; height: 30px;}
.day { top: 30px; left: 0; width: 33px; height: 30px;}
.year { bottom: 0; right: 13px; width: 20px; height: 60px;}.m-01 { background-position: 0 0px;}
.m-02 { background-position: 0 -30px;}
.m-03 { background-position: 0 -62px;}
.m-04 { background-position: 0 -94px;}
.m-05 { background-position: 0 -125px;}
.m-06 { background-position: 0 -155px;}
.m-07 { background-position: 0 -185px;}
.m-08 { background-position: 0 -217px;}
.m-09 { background-position: 0 -248px;}
.m-10 { background-position: 0 -279px;}
.m-11 { background-position: 0 -310px;}
.m-12 { background-position: 0 -341px;}.d-01 { background-position: -51px 0;}
.d-02 { background-position: -51px -27px;}
.d-03 { background-position: -51px -57px;}
.d-04 { background-position: -51px -91px;}
.d-05 { background-position: -51px -122px;}
.d-06 { background-position: -51px -151px;}
.d-07 { background-position: -51px -185px;}
.d-08 { background-position: -51px -214px;}
.d-09 { background-position: -51px -249px;}
.d-10 { background-position: -51px -275px;}
.d-11 { background-position: -51px -309px;}
.d-12 { background-position: -51px -338px;}
.d-13 { background-position: -51px -373px;}
.d-14 { background-position: -51px -404px;}
.d-15 { background-position: -51px -436px;}
.d-16 { background-position: -51px -462px;}
.d-17 { background-position: -100px -0px;}
.d-18 { background-position: -100px -27px;}
.d-19 { background-position: -100px -57px;}
.d-20 { background-position: -100px -91px;}
.d-21 { background-position: -100px -122px;}
.d-22 { background-position: -100px -151px;}
.d-23 { background-position: -100px -185px;}
.d-24 { background-position: -100px -214px;}
.d-25 { background-position: -100px -249px;}
.d-26 { background-position: -100px -275px;}
.d-27 { background-position: -100px -309px;}
.d-28 { background-position: -100px -338px;}
.d-29 { background-position: -100px -373px;}
.d-30 { background-position: -100px -404px;}
.d-31 { background-position: -100px -436;}.y-2009 { background-position: -150px 0;}
.y-2010 { background-position: -150px -60px;}
.y-2011 { background-position: -150px -120px;}
.y-2012 { background-position: -150px -180;}
.y-2013 { background-position: -150px -240px;}
.y-2014 { background-position: -150px -300px;}
Explanation:
.postdate – Sets the width and height of the entire date. In this case we are going to make our date fit into a box 66px by 60px.
.month, .day, .year – Sets the width and height of the individual elements that make up our whole date Sprite. Our months and days are 33px wide by 30px high. The years are 33px wide by 60px high. When you put these elements together they make a box 66px wide by 60px 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 – You guessed it! These are our months. This part of the CSS positions our graphic 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 select the Marquee tool. Select from the top left down and over to the right to just above the top left corner of you month, day or year and note where your pointer is using the info panel’s stats.
.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-2014 – Same as above only we use them for the years.
Step #4
Open up the loop in WordPress. The loop in WordPress is 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. If you got to this section of the tutorial you are intelligent enough to seek and replace the other instances of dates in your theme in other files such as single.php, page.php, archives.php etc.
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, CSS, and your themes’ loop (index.php). Hit refresh on your blog (make sure you are on the page that posts are shown on) and Voila! You just super styled your dates using CSS sprites.
