Use CSS Sprites to Beautify your WordPress Post Dates
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.
Todd Santoro is the Principal and Sr. Designer at his company ToddSantoro.com Designs. Todd has been working on the web for 11 years and excels in UI and graphic design. He loves paying attention to details and developing on the Wordpress framework. You can follow him on Twitter.
Comments
36 Responses to “Use CSS Sprites to Beautify your WordPress Post Dates”Share Your Opinions
Tell us what you're thinking...
and if you want a pic to show with your comment, then get gravatar!
Please make sure that you have read our Comment Policy.
I’m wondering if this is the same technique used here: http://css-tricks.com/date-display-with-sprites/, posted back in July 2009.
Spencer,
It appears that it is the same technique. I believe that both tutorials serve a purpose because they speak to segmented audiences.
Thanks for pointing it out:)
Nice idea! I like how you put the year vertically. I love using sprites wherever possible to cut down on http requests.
This is a very nifty idea. However, I would probably use rather than is it would be better semantics. (stickler)
Tammy,
Please clarify you response:
“This is a very nifty idea. However, I would probably use rather than is it would be better semantics. (stickler)”
having each part of the date in a div tag doesn’t make any semantic sense. I would opt to use a span tag since those are overlooked be readers.
Haven’t I seen such a tutorial somewhere else already? It was long ago at css-tricks.com http://css-tricks.com/date-display-with-sprites/
Webdesign Rosenheim,
It is the same technique however I was unaware of the tutorial. I believe that both tutorials serve a purpose because they speak to segmented audiences.
Thanks for pointing it out!
Wow, amazing work, amazing insight on automating something that looks like that! Using this method it would not take long to expand it a few years down the road either! Good job!
nice solution
but too much code
Markus,
I love to hear about less code. Do you have a solution? Please share your code; because not only I am chomping at he bit to “work it” but all WPbeginner’s would like to work it/see it.
Thanks in advance!
Great tip!
I remember when a few years ago one of our programmers solved this situation by generating the date image on the fly. I mean literally every time you’d refresh the page a fresh image would be generated – no cache. And his salary wasn’t that low also
I’d probably prefer Javascript/jQuery to setting the correct background-position coordinates. A bit too much CSS for my taste. Just get the month/day/year number and calculate the position according to the height/width of every value in the sprite.
But what ever suits you best!
Still, great tip!
That’s what I love about the internet. There is always more than one way to skin a cat.
Indrek, It would be nice if you would write a short tutorial on how to accomplish this using jQuery. I do like your idea and it would eliminate the need for math in the css.
Thanks!!!
There is probably a better way using Sifr or Cufon also. You can have fancy text, rotate the text to 90 degrees using a JS. And it can be done dynamically. But CSS Sprites is just another cool way to do it.
I never thought about using sIFR to accomplish this task. You could do so much using the sIFR approach.
Great idea!!!
Maybe part 2 is in order???
Todd, great job.
I’ve never understood the impulse to reduce markup and styling as though it’s intrinsically evil. If you’re worried about manual labor and seemingly sub-optimal repetition (if it can be automated, it should be, right? I’ll defer to 37 Signals when I say “not always“), just generate your CSS server-side with something like SASS or Compass mixins. I don’t see how adding client-side processing (slowing effective load times) and forcing js on users for simple visual cues is an improvement.
Cufon has given me more headaches than it was ever worth. Again, I don’t see how the added weight of a font file (which you may or may not legally be allowed to embed, anyway) and the client-side processing required to run whatever fancy font-replacement tool is a net benefit to the user.
tl;dr: 1. keep the logic server-side 2. you’re not hurting anyone with a sliver of extra CSS
Yury-
I found a great article on the pros and cons of each approach with respect to advanced text replacement: http://thinkclay.com/technology/cufon-sifr-flir
Who knows, I might write a little tutorial about doing the second part with jQuery. I’ll let you know.
Great idea
Indrek,
Lets see it:)
You are welcome to submit a guest post at WPBeginner anytime
Another great idea and good feedback. Thanks
can I do something like that with the archive? for the wp_get_archives ?
Sprites are good for loading time, but i think that the rest, same looking can be done in many ways. But for time load saving, this is good.
Super sweet! Thanks for this. I always wondered how this was accomplished.
Anything,
You are welcome. As you can see from the comments there are several way to Super Style your post dates or typography in general, but I love CSS Sprites and most people can wrap their heads around the concept pretty easily.
Thanks for reading!!!
Hi,
great post, Thanks for sharing!
This is a great tutorial.
I tried it and it didn’t work
Anything,
I’m not sure exactly what didn’t work for you, but When I look at the code and how its presented on WPbeginner. The single quotes within the PHP tags appear to be a little weird. I believe this is a result of running the entire post through: http://www.elliotswan.com/postable/ which does not allow real single quotes to be displayed b/c it would actually execute the code. A plug-in should probably be used on the site that would allow for cutting and pasting…
Conclusion: Check all single quotes in the code. I hope this helps:)
Update me if that is not the problem.
Nice Post, thanks
What happens with posts from before 2009, will they show normal in posts or broken?
Flores,
Posts that are before 2009 will show the top left corner of the .png image because there is no CSS to tell it what position to appear in.
You can expand on the image and the CSS to include 2008, 2007, etc… Just keep everything the same in the tutorial and add the extra years to you graphic. Use the same technique as above to find the top left corner of where the .png should be positioned and create your css. You will only need to adjust the year in the css.
Cheers!!!
I like the concept but for those that utilize Cufon, Typekit or any other text renderer.. Simplifies it majorly without having to create a PSD then code each day, month and year in CSS.
Saves a lot more time
Thanks a lot Todd for your tutorial.
I use it now on my coming soon articles page for my members.
I also use @font-face (Typekit) on the other pages.
Thanks to everyone who made this post one of the most commented post on WPbeginner. It just shows how a group of passionate web developers dedicated to an awesome open source project like WordPress can smash-up ideas. I love how the pros and cons come out in the discussion.
This methodology can be used with any date display you like; just use your imagination;)
We recommend Cufon if you are just using it for navigation and other stylistic elements because it uses JavaScript and most computers support it unlike sIFR which uses Flash and not all computers have flash. The downside of using Cufon is that users cannot select the font and you cannot use all fonts (there are restrictions).