Calendar icons revisited - bubble with comment count

My blog-post with calendar icons is nearly one year old. I've seen quite a lot of people using it and was surprised. One of the best upgrades was by Joost de Valk (Yoast.com). His article on CSS-Tricks shows his idea to place a bubble with comment count over the calendar icon. Read how it works and how to implement it in your drupal theme.

He also made the code more accessible, with adding spans (and hiding them with css), so it will display the date even when visitor has css disabled.

The only problem with this approach is it's using transparent png for bubble icon. So if you want to support IE6 you will have to add a javascript png fix or create your own bubble icon.

You can download calendar icons here: Calendar icons not only for your blog.
The bubble can be downloaded here: Get the bubble

The code below is mostly rewrite of the code from css-tricks.

To display one calendar icon we will use this html:

<p class="date month8"><span>Aug</span> 18<span>th</span></p>

and css below:

p.date {
width: 42px;
height: 10px;
padding: 18px 0 14px 0;
text-align: center;
}

p.date span { display: none; }

Calendar icons code

.month1 { background: url(images/01.gif) no-repeat 0 0; }
.month2 { background: url(images/02.gif) no-repeat 0 0; }
.month3 { background: url(images/03.gif) no-repeat 0 0; }
.month4 { background: url(images/04.gif) no-repeat 0 0; }
.month5 { background: url(images/05.gif) no-repeat 0 0; }
.month6 { background: url(images/06.gif) no-repeat 0 0; }
.month7 { background: url(images/07.gif) no-repeat 0 0; }
.month8 { background: url(images/08.gif) no-repeat 0 0; }
.month9 { background: url(images/09.gif) no-repeat 0 0; }
.month10 { background: url(images/10.gif) no-repeat 0 0; }
.month11 { background: url(images/11.gif) no-repeat 0 0; }
.month12 { background: url(images/12.gif) no-repeat 0 0; }

It is now more accessible than my previous code as you can see.

Now to add a comment bubble, Joost wrapped "p" into another div named "shield" and added a div for comment bubble. The final html code will look like:

<div class="shield">
<p class="date month8"><span>Aug</span> 18<span>th</span></p>
<div class="commentscloud">5</div>
</div>

and it's css

.shield {
position: relative;
}

.commentscloud {
position: absolute;
text-align: center;
top: -4px;
left: 22px;
width: 30px;
height: 24px;
padding: 3px 0;
background: url(images/bubble.png) no-repeat 0 0;
}

How to implement this in drupal

Put this code into your node.tpl.php.

    $month = t(format_date($node->created,'custom','F'));
    $cal_month = format_date($node->created,'custom','n');
    $day = format_date($node->created,'custom','d');
    $suffix = format_date($node->created,'custom','S');
    $calendar = '<div class="shield">';
    $calendar .= '<p class="date month'.$cal_month.'"><span>'.$month.'</span> '.$day.'<span>'.$suffix.'</span></p>';
    $calendar .= '<div class="commentscloud">'.$node->comment_count.'</div>';
    $calendar .= '</div>';

And then print the $calendar variable.
For drupal 6 the approach would be to place the code into _preprocess_node function. Well you can do similar thing with D5, and use _variables function.

Drupal 6

<?php
function phptemplate_preprocess_node(&$variables) {
 
$node = $variables['node'];
 
$month = t(format_date($node->created,'custom','F'));
 
$cal_month = format_date($node->created,'custom','n');
 
$day = format_date($node->created,'custom','d');
 
$suffix = format_date($node->created,'custom','S');
 
$calendar = '<div class="shield">';
 
$calendar .= '<p class="date month'.$cal_month.'"><span>'.$month.'</span> '.$day.'<span>'.$suffix.'</span></p>';
 
$calendar .= '<div class="commentscloud">'.$node->comment_count.'</div>';
 
$calendar .= '</div>';
 
$variables['calendar'] = $calendar;
}
?>

Then in your node.tpl.php you just print $calendar wherever you want to display the calendar icon with comment bubble.

You might also want to add a condition, if the language is different than english for not displaying st,nd,th.

And here is the full css code for your style.css

p.date {
width: 42px;
height: 10px;
padding: 18px 0 14px 0;
text-align: center;
}

p.date span { display: none; }

.month1 { background: url(images/01.gif) no-repeat 0 0; }
.month2 { background: url(images/02.gif) no-repeat 0 0; }
.month3 { background: url(images/03.gif) no-repeat 0 0; }
.month4 { background: url(images/04.gif) no-repeat 0 0; }
.month5 { background: url(images/05.gif) no-repeat 0 0; }
.month6 { background: url(images/06.gif) no-repeat 0 0; }
.month7 { background: url(images/07.gif) no-repeat 0 0; }
.month8 { background: url(images/08.gif) no-repeat 0 0; }
.month9 { background: url(images/09.gif) no-repeat 0 0; }
.month10 { background: url(images/10.gif) no-repeat 0 0; }
.month11 { background: url(images/11.gif) no-repeat 0 0; }
.month12 { background: url(images/12.gif) no-repeat 0 0; }

.shield {
position: relative;

}

.commentscloud {
position: absolute;
text-align: center;
top: -4px;
left: 22px;
width: 30px;
height: 24px;
padding: 3px 0;
background: url(images/bubble.png) no-repeat 0 0;
}

Don't forget to place the calendar icons into images folder within your theme or change the code. Same applies for the bubble image.

Files




Need Drupal Theming? Hire us