You've probably seen a number of blogs (including this one) that present the date as a page from a desktop calendar. Here's how I did it.

I could have just displayed the timestamps for my blog entries in dull, boring "posted on MMMMM dd, yyyy" format. But that would have been too easy...

Instead, I wanted what I saw on lots of other people's blogs: a date representation that looked like a page ripped out of one of those desktop calendars (as shown here).

I googled for examples of the technique. There were actually quite a few (which I will list below for reference to give credit for the inspiration), but none were exactly what I wanted.

A number of the approaches I found used images to form the "date box", but that was something I wanted to avoid. I wanted to try to do the whole thing with CSS. There were some examples that used CSS but none looked quite right to me. So I tried to do it myself, using the examples I'd come across as a starting point, and the result is what you see in the image displayed earlier in this post.

This approach could be refactored to work with most blogging software, but I've set it up to work with WordPress on Blogsome.com which uses Smarty templates.

My goal was to have the top line with the abbreviated day of the week, the next line displaying the abbreviated month, the next line containing a much larger day of month, and the bottom line showing the full 4-digit year.

To do this with CSS, I created a set of nested classes. The .calendarBox is intended to be the container for the entire "date box". It's specified as "float: right" and "display: inline" so that it lands on the rightmost edge of the column alongside the headline. I provide an explicit width in pixels, loosening the letter-apacing slightly but tightening up the line height. I add a simple thin black border, center-align the text and transform it to upper case. I also set a background color and set margins and paddings, but these are things you can tweak if you use this strategy yourself. 

.calendarBox {
    float: right ;
    display: inline ;
    width: 48px ;
    letter-spacing: 1px ;
    line-height: 92% ;
    background-color: #f0f0e0 ;
    font-family: arial narrow, arial;
    font-size: 8pt ;
    border: 1px solid black ;
    text-align: center ;
    text-transform: uppercase ;
    padding: 0px ;
    margin-right: 0px ;
    clear: none ;
    color: black ;
}

Within a div specified with this class, I wanted individual blocks for each element of the date: day of week, month, day of month, and year. Each block is given a slightly different treatment, though they have one thing in common: "display: block". The "dayOfWeek" class makes the text bold and slightly smaller, sets the background color to a deep red and the text color to white. The "month" class simply sets the text's color to black its weight to bold. The "dayOfMonth" class also sets the text to bold black, bumps up the text size to 300%, and makes some other tweaks to spacing. Finally, the "year" class sets the text color to black but doesn't set the weight to bold. 

.calendarBox .dayOfWeek {
    font-size: 90% ;
    background-color: #800000 ;
    color: white ;
    font-weight: bold ;
    display: block ;
    padding-top: 2px ;
    padding-bottom: 2px ;
}
	
.calendarBox .month {
    font-weight: bold ;
    display: block ;
    color: black ;
    padding-top: 2px ;
    padding-bottom: 2px ;
}
	
.calendarBox .dayOfMonth {
    font-weight: bold ;
    font-size: 300% ;
    line-height: 26px ;
    letter-spacing: 0px ;
    display: block ;
    color: black ;
}
	
.calendarBox .year {
    display: block ;
    color: black ;
    padding-bottom: 2px ;
}

All of this combines to give us all the elements we need to make our date box. Here's how we connect the dots by using these classes in the templates for displaying post content (on Blogsome this is called "post.html"): 

<div class="post">
   <div class="calendarBox">
       <span class="dayOfWeek"> {the_time d='D'} </span>
       <span class="month"> {the_time d='M'} </span>
       <span class="dayOfMonth"> {the_time d='j'} </span>
       <span class="year"> {the_time d='Y'}</span>
   </div>
   <p class="post-info">
	<a href="{permalink_link}" rel="bookmark"
	    title="Permanent Link: {the_title_rss}">{the_title}</a>
   </p>
      ...

The references to {the_time d='n'} are Smarty template calls that retrieve a specific element from a post's timestamp. 'D', 'M', 'j', and 'Y' retrieve, as you've probably guessed, the abbreviated day of the week, the abbreviated name of the month, the day of the month, and the year. Note that each one of these is included in its own <span> block within the enclosing <div class="calendarBox">. The retrieved date elements are each surrounded by spaces so that browsers that don't support CSS can display them in a readable fashion, with spaces between the elements.

There's one more thing: I wanted the date box to be a link to the page containing all posts for that day. That wasn't really that hard: I just enclosed the contents of the div in an <a href="..."> tag as shown below: 

<div class="post">
   <div class="calendarBox">
     <a href="{$siteurl}/{the_time d='Y'}/{the_time d='m'}/{the_time d='d'}/">
        <span class="dayOfWeek"> {the_time d='D'} </span>
        <span class="month"> {the_time d='M'} </span>
        <span class="dayOfMonth"> {the_time d='j'} </span>
        <span class="year"> {the_time d='Y'}</span>
     </a>
   </div>
   <p class="post-info">
	<a href="{permalink_link}" rel="bookmark"
           title="Permanent Link: {the_title_rss}">{the_title}</a>
   </p>
      ...

The code here would produce a URL of "http://this.site.com/2007/07/06" (assuming today's date). The format of the URL in the link and the code to produce it will naturally vary for different blogging systems.

Just to keep the behavior consistent now that the box is a link, I also added this information to the stylesheet: 

.calendarBox a:link, .calendarBox a:visited  {
    color: black ;
    text-decoration: none ;
}

And that's pretty much it. If you're CSS-savvy you can play with the settings to change background color, font, size, spacing, etc.

To give credit where credit is due, here are links to some of the people whose approaches to this problem inspired this, including both CSS-only and image-driven approaches. Thanx!