Almost Bullet-Proof CSS Calendar

Check out the calendar detail to the left of the post title. I created this with a combination of some simple div tags, two background images, and some CSS. It looks really good in Firefox, and “ok” in IE. If you change the text zoom size in IE, the borders get a bit flaky. I’m sure with a bit more hacking we can make it look better in more browsers.

This diagram shows how the div tags fit together:

Here is the CSS for the outer box:

.datebox {
  width: 50px;  /* same width as the background image */
  float: left;
  margin-right: 1ex;
  margin-bottom: 1em;
}

The width matches the width of the background image, which is anchored to the top of the .month box. (shown next). The float tells the entire datebox where to go on the page, and the margins ensure text does not smash up against the box. The values 1ex and 1em are just pulled out of thin air. Other values work fine.

The month box contains the background image anchored to the top edge. It is important to know the exact color of this image so you can make the background color of the box match. Furthermore, the image must not be transparent, otherwise the background color of the box bleeds through the top edge of the image.

.datebox .month {
  font-family: Cambria,"Times New Roman",Times,serif;
  font-size: 0.9em;
  padding-top: 0.3em;
  padding-bottom: 0.1em;
  text-align: center;
  background: #660033 url('images/calendar-top.png') left top no-repeat;
  color: #dddddd;
}

The top padding gives just a bit of space to allow the background graphic to show. The bottom padding is arbitrary, I just tweaked it until I liked the way it looks.

Finally we have the CSS for the day box:

.datebox .day {
  font-family: Cambria,"Times New Roman",Times,serif;
  font-size: 1.4em;
  text-align: center;
  padding-bottom: 0.1em;
  color: #333333;
  border-right: 1px solid #660033;
  border-bottom: 1px solid #660033;
  border-left: 1px solid #660033;
  background: #faf8d2 url('images/page-fold-small.png') right bottom no-repeat;
}

The folded paper image is anchored to the bottom right. This box also provides a 1-pixel border that matches the background color of the other elements.

That’s it. If you are a better artist than me, you can probably improve on the look of this calendar. But after trying to zoom the text on several other people’s blogs, I think my CSS version scales pretty nicely.

WordPress Code

Here is the actual WordPress PHP code. I added this to index.php and single.php:

<div class="datebox">
  <div class="month"><?php the_time('M') ?></div>
  <div class="day"><?php the_time('d') ?></div>
</div>

I do think some stone-tablet graphics would go better with my theme.

This entry was posted on Monday, September 17th, 2007 at 9:02 pm and is filed under HTML and CSS. You can skip to the end and leave a response.