1. The PSD File with the calendar “pages” on it
2. The PHP
3. The CSS

You’ll also need to get the font “Downcome” if you want to keep the font of the Months & Dates the same.

1. First things first, you need to make the calendar. I’ve included a support folder with a PSD file called “datecolumns.psd”. You’re welcome to make any adjustments to it that you’d like, use it as is or completely wipe it clean and make your own, just remember that later on you’ll have to figure out your own background-positions.
2. Second, we need to create an unordered list in the index.php of your site. We’re going to do something like this:

   
   <ul class="smallentrydate">
   <li class="class="date<?php the_time('M'); ?>">
   
   <a>
   
   <?php the_time('M'); ?>
   
   <?php the_time('d'); ?>,
   
   <?php the_time('Y'); ?>
   
   </a>
   
   </li>
   <li class="date<?php the_time('d'); ?>"></li>
   </ul>
   
   

3. That’s it as far as PHP & HTML go. Here’s what we’ve done so far:
   1. Created a class called “smallentrydate”. This is a wrapper for our total calendar page.
   2. Created a class called “date-fill-in-the-blank”. The big M takes whatever month it is and gives an output of “sep” for September, giving you the class, “dateSep” or for August”DateAug”. Using the shorthand for the month with the big M is going to be vital for when we start on the CSS.
   3. We’ve also created a class called “date-fill-in-the-number-date”…So if the post was written on the 5th, it outputs a class=”date05″.
   4. In the <a> tag, you’ll see that we also requested the output of a date in the form of ‘M’ ‘d’, ‘Y’, which would give us “Jan 09, 2009″ in text form. If you turn off CSS, you’ll see this shows up in the place of the calendar image. This is important for accessibility reasons and search engines…so don’t leave it out.
4. Simple so far, right? Let’s move on to the CSS
5. We’re going to start out with defining some things about the smallentrydate class in our style.css:

   
   .smallentrydate {
   	float: right; /* floats it to the right */
   	height: 55px; /* Total Height of Calendar Image */
   	margin: 0 0 10px 0; /* Keeps a good space from text below */
   	padding: 0;
   	width: 60px; /* Total Width of Calendar Image */
   }
   .smallentrydate li {
   	background: url(images/datecolumns.png) no-repeat;
   	list-style: none;
   	margin: 0;
   	padding: 0;
   	top: 0;
   }
   .smallentrydate li, .smallentrydate a {
   	display: block;
   	margin: 0;
   	overflow: hidden;
   	padding: 0;
   	text-indent: -1000em; /* Pushes Text off the page, to keep it from showing up with a stylesheet */
   	width: 55px;
   }
   .smallentrydate .dateJan { background-position: -6px -303px; height: 15px; width: 55px; }
   
   .smallentrydate .date01 { background-position: -6px -318px; height: 45px; width: 55px; }
   
   
   

6. So to break it all down, this is what we’re looking at:
   
   1. We defined the characteristics of our smallentrydate.
   2. Defined the characteristics of our smallentrydate li, most importantly the background-image, and no list-style and the width, which is 55px for every replacing image.
   3. We pushed the text off of the page that would appear on top of the smallentrydate without a text-indent. It gives us the aesthetics of image replacement with the accessibility of text.
7. You’ll also see that I defined .dateJan & .date01 for you. All I did was find the left and top most boundary on Photoshop of January and put background-position: the left (-6px) & the top (-303px) position where I want it to start. (Make sure to use negatives in front of the values), I also defined the height & width.

You’re going to have to set this background-position system up for all 12 months & 31 days, but 43 is a lot nicer than having to do 365 background-positions. You can also use the CSS included in the support folder, which will save you time typing .smallentrydate .date”whatever” everytime.

Hopefully this helps somebody out there. It’s been a great project for me to take on and complete.