Comments on: Use CSS Sprites to Beautify your WordPress Post Dates

By: Lee Elvin

Lee Elvin — Sun, 01 Jan 2012 13:22:04 +0000

Just noticed day 31 has same problem, no px for position.

By: Lee Elvin

Lee Elvin — Sun, 01 Jan 2012 13:20:06 +0000

Great post but now its 2012 people will start to see there is an error in the code for 2012, the px is missing in the position, just add px after the -180.

.y-2012 { background-position: -150px -180px;}

By: christinebiz

christinebiz — Wed, 16 Nov 2011 21:29:42 +0000

That did the trick. I replaced all the single quotes with actual single quotes. Thank you!

By: DmitryRomanovsky

DmitryRomanovsky — Sat, 09 Jul 2011 10:47:22 +0000

@dmitry.romanovsky cool -)

By: Todd Santoro

Todd Santoro — Wed, 17 Feb 2010 05:34:12 +0000

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;)

By: Bloody

Bloody — Sat, 13 Feb 2010 21:53:51 +0000

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.

By: Editorial Staff

Editorial Staff — Fri, 05 Feb 2010 11:34:42 +0000

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).

By: Todd Santoro

Todd Santoro — Thu, 04 Feb 2010 02:42:41 +0000

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

By: Todd Santoro

Todd Santoro — Thu, 04 Feb 2010 02:27:55 +0000

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!!!

By: Jordan

Jordan — Wed, 03 Feb 2010 21:24:11 +0000

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