I've recently changed the submitted date on my blog posts and added a little CSS magic, thanks to Jonathan Snook's article on Text Rotation with CSS
Essentially it's a few lines of code, I didn't show the full CSS, there is a fair bit more to it than below. Feel free to Inspect Elements on my node teasers to see the inner workings.
It works with all browsers except Opera but I've been able to make it look ok with the use of body-tags which are generated from the $_SERVER['HTTP_USER_AGENT'] variable. I will post on that trick soon.
XHTML:
<div class="example-date">
<span class="day">31</span>
<span class="month">July</span>
<span class="year">2009</span>
</div>CSS:
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);EDIT: Since posting this I've changed to a different method using image sprites and CSS background positioning. A lot more involved method but works on ALL browsers.
I will post some Drupal specific details on this soon. Meanwhile you can view the basic technique at http://css-tricks.com/date-display-with-sprites/

Post new comment