I liked the idea of Sotak's calendar icons at http://sotak.co.uk/calendar-icons-blog, but the colours didn't fit in with my theme, and I wanted the text to be a little easier to read.
So I made my own, using just 1 background image (.png and psd attached) and a slightly modified template.php.
With a bit of imagination, and a few tweaks to the function, and a few lines of CSS these icons can be very flexible. Different colour for articles over a year old? No problem. Colour coded by taxonomy? Sorted.
Here's how it's done:
For your template.php: (Drupal 6.x)
<?php
function phptemplate_preprocess_node(&$vars) {
if ($vars['node']->type == 'story' ){
// Calendar for story nodes only
$node = $vars['node'];
$month = strtoupper(format_date($node->created,'custom','M'));
$day = format_date($node->created,'custom','j');
$year = format_date($node->created,'custom','Y');
$calendar .= '<div class="calendar ' .$month .' ' .$year .'" >
<span class="month">'.$month.'</span><span class="day"> '
.$day.' </span><span class="year">'. $year.'</span></div>';
$vars['calendar'] = $calendar;
}
}
?>And the CSS bits to add to style.css / your stylesheet. You may have to tweak the line heights a little depending on your site fonts:
/*
* Calendar for story nodes
*/
div.calendar {
background: url(calendar.png) no-repeat 0 0;
margin: 4px 10px 0 0;
padding: 0;
width: 55px;
height: 57px;
line-height: 100%
float: left;}
div.calendar span {
display: block;
width: 48px;
text-align: center;
}
div.calendar span.month {
font-size: 12px;
color: white;
}
div.calendar span.day {
font-size: 24px;
line-height: 20px;
background: none;
}
div.calendar span.year {
font-size: 12px;
background: none
}
Simply print the $calendar variable wherever you want it in your node.tpl.php:
<?php print $calendar ?>I've placed mine like this:
<div class="node-header"><?php if (!$page): ?>
<?php print $calendar ?>
<h2><a href="<?php print $node_url ?>" title="<?php print $title ?>"><?php print $title ?></a></h2>
<?php endif; ?>
</div>So it will only show up for node teasers rather than the page view. Note also that the preprocess_node function above only includes story type nodes.
It's not perfect - I had to resort to sizing the font in px rather than ems to get it to look nice in all browsers, and it'll look crummy in some mobile browsers, but hey hum.
Images attached below. And that's something else I haven't themed. I'd better add it to the 'to do' list!
| Attachment | Size |
|---|---|
| calendar.png | 502 bytes |
| calendar.psd | 28.28 KB |
