Interesting...
What some people do is use just one image: that has columns and rows with the 12 months, days of the months and different years. Then you either use a function that ties in with the document creation date or manually set the coordinates using CSS. In other words the CSS will only display certain areas of the single graphic but present them in a styled manner that handles the presentation nicely.
The code looks like this:
<div class="postdate">
<div class="month m-<?php the_time('m') ?>"><?php the_time('M') ?></div>
<div class="day d-<?php the_time('d') ?>"><?php the_time('d') ?></div>
<div class="year y-<?php the_time('Y') ?>"><?php the_time('Y') ?></div>
</div>
and the CSS looks like this:
.postdate {
position: relative;
width: 50px;
height: 50px;
float: left;
}
.month, .day, .year {
position: absolute;
text-indent: -1000em;
background-image: url(../images/dates.png);
background-repeat: no-repeat;
}
.month { top: 2px; left: 0; width: 32px; height: 24px;}
.day { top: 25px; left: 0; width: 32px; height: 25px;}
.year { bottom: 0; right: 0; width: 17px; height: 48px;}
.m-01 { background-position: 0 4px;}
.m-02 { background-position: 0 -28px;}
.m-03 { background-position: 0 -57px;}
... more like this ...
.d-01 { background-position: -50px 0;}
.d-02 { background-position: -50px -31px;}
.d-03 { background-position: -50px -62px;}
... more like this ...
.y-2006 { background-position: -150px 0;}
.y-2007 { background-position: -150px -50px;}
.y-2008 { background-position: -150px -100px;}
... more like this ...
You make a wrapper for the image that is divided into regions (days, months and years) etc. I think I could handle the sprite and the styling. Its adding it to Ditto that might get interesting. Using Photoshop you could create any kind of look, colors or typeface you want. This could be customized to work with overall design elements that the template has.
Just wondering if others have tried this within the MODx framework? Obviously the goal here is to minimize the amount of code and heavy lifting required just to add style flourishes to the date presentation...
☆ A M B ☆