|
Jul
28
|
|
To keep things clean and save space on The Aquarium - I compressed the entry timestamp like this :
This involved a simple trick - I simply extract the month and day in month parts of the timestamp then applied some styles - with a background image (the orange bit). I got the inspiration from here.
Here are the styles :
.ta-cal {
display:block;
float:left;
width:44px;
height:47px;
background:url("http://blogs.sun.com/roller/resources/theaquarium/cal.gif") no-repeat;
text-align:center;
margin-top:-10px;
margin-right:8px;
}
.ta-cal-month {
color:#fff;
font:bold 13px Arial, Verdana;
text-transform:uppercase;
margin:4px;
}
.ta-cal-day {
color:#fff;
font:bold 26px Arial, Verdana;
margin:-10px 0 0 0;
}
I'm sure there;s some redundancy in there and don't doubt this could be simplified - but it works. The way you use them is nest the ta-cal-month and ta-cal-day styled elements inside the ta-cal styled element, eg.
<div class="ta-cal">
<div class="ta-cal-month">#formatDate ( "MMM" $day )</div>
<div class="ta-cal-day">#formatDate ( "d" $day )</div>
</div>
$day is provided by Roller and the handy #formatDate macro is used to extract various bits of the timestamp (using java.text.SimpleDateFormat patterns).
Technorati Tags: roller velocity css
