CS 2.1 RTM and More Post Dates

The final release of Community Server 2.1 is upon us! I’ve already gone through the motions and upgraded the site. I skipped the RC1 release because…well…I’ve only had this thing up for a couple of months and I’ve already upgraded it four times.

CSS for the Custom Post Dates

Vern at Subtext asked if I could go over the CSS for the custom post dates I use for the site. First off, here’s the markup that ends up on the page after ASP.NET is done rendering it:

<span class="entry-date">
    <span class="entry-day">19</span>
    <span class="entry-month">Sept</span>
    <span class="entry-year">2006</span>
</span>

Nothing terribly complex here. I only need three spans because I’m applying different styles to each part of the date. For the CSS, the vast majority of the formatting is handled by the styles for the container span:

.entry-date
{
    float: left;
    margin: 3px 8px 0 0;
    padding: 4px 2px 0 0;
    width: 50px;
    height: 58px;
    background: url( ../Images/EntryDateBG.gif ) no-repeat top left;
    text-align: center;
}

Floating the span also has the benefit of turning it into a block-level element, so we can apply a height to the container. The background image actually reveals most of the trickery:

Since all of the flair is handled by a single image, the only thing that remains is to get the text into the right positions. This will, of course, require some hand tweaking, and the actual numbers will depend on the background image being used, font sizes, the phase of the moon, etc. Here’s the CSS for my dates:

.entry-date .entry-day
{
    display: block;
    font-size: 1.2em;
    font-weight: bold;
    color: #0f42a4;
}

.entry-date .entry-month
{
    display: block;
    font-size: 1.0em;
    font-weight: bold;
    font-variant: small-caps;
    line-height: 1.2em;
    color: #0f42a4;
}

.entry-date .entry-year
{
    display: block;
    margin-top: 4px;
    font-size: 1.0em;
    font-weight: bold;
    color: #fff;
}

I convert each span to a block-level element so that each section of the date gets its own line in the box. For spacing, I mostly fiddle with the line-height on the month, as it’s in the middle. Everything else in there is pretty basic.