Calendar icons revisited - bubble with comment count

September
27
2008

CALENDAR ICONS REVISITED - BUBBLE WITH COMMENT COUNT

MAREK

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:

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

and css below:

  1. p.date {
  2.         width: 42px;
  3.         height: 10px;
  4.         padding: 18px 0 14px 0;
  5.         text-align: center;
  6. }
  7.  
  8. p.date span { display: none; }

Calendar icons code

  1. .month1 { background: url(images/01.gif) no-repeat 0 0; }
  2. .month2 { background: url(images/02.gif) no-repeat 0 0; }
  3. .month3 { background: url(images/03.gif) no-repeat 0 0; }
  4. .month4 { background: url(images/04.gif) no-repeat 0 0; }
  5. .month5 { background: url(images/05.gif) no-repeat 0 0; }
  6. .month6 { background: url(images/06.gif) no-repeat 0 0; }
  7. .month7 { background: url(images/07.gif) no-repeat 0 0; }
  8. .month8 { background: url(images/08.gif) no-repeat 0 0; }
  9. .month9 { background: url(images/09.gif) no-repeat 0 0; }
  10. .month10 { background: url(images/10.gif) no-repeat 0 0; }
  11. .month11 { background: url(images/11.gif) no-repeat 0 0; }
  12. .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:

  1. <div class="shield">
  2.         <p class="date month8"><span>Aug</span> 18<span>th</span></p>
  3.         <div class="commentscloud">5</div>
  4. </div>

and it's css

  1. .shield {
  2.         position: relative;
  3. }
  4.  
  5. .commentscloud {
  6.         position: absolute;
  7.         text-align: center;
  8.         top: -4px;
  9.         left: 22px;
  10.         width: 30px;
  11.         height: 24px;
  12.         padding: 3px 0;
  13.         background: url(images/bubble.png) no-repeat 0 0;
  14. }

How to implement this in drupal

Put this code into your node.tpl.php.

  1.     $month = t(format_date($node->created,'custom','F'));
  2.     $cal_month = format_date($node->created,'custom','n');
  3.     $day = format_date($node->created,'custom','d');
  4.     $suffix = format_date($node->created,'custom','S');
  5.     $calendar = '<div class="shield">';
  6.     $calendar .= '<p class="date month'.$cal_month.'"><span>'.$month.'</span> '.$day.'<span>'.$suffix.'</span></p>';
  7.     $calendar .= '<div class="commentscloud">'.$node->comment_count.'</div>';
  8.     $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

  1. <?php
  2. function phptemplate_preprocess_node(&$variables) {
  3.   $node = $variables['node'];
  4.   $month = t(format_date($node->created,'custom','F'));
  5.   $cal_month = format_date($node->created,'custom','n');
  6.   $day = format_date($node->created,'custom','d');
  7.   $suffix = format_date($node->created,'custom','S');
  8.   $calendar = '<div class="shield">';
  9.   $calendar .= '<p class="date month'.$cal_month.'"><span>'.$month.'</span> '.$day.'<span>'.$suffix.'</span></p>';
  10.   $calendar .= '<div class="commentscloud">'.$node->comment_count.'</div>';
  11.   $calendar .= '</div>';
  12.   $variables['calendar'] = $calendar;
  13. }
  14. ?>

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

  1. p.date {
  2.         width: 42px;
  3.         height: 10px;
  4.         padding: 18px 0 14px 0;
  5.         text-align: center;
  6. }
  7.  
  8. p.date span { display: none; }
  9.  
  10. .month1 { background: url(images/01.gif) no-repeat 0 0; }
  11. .month2 { background: url(images/02.gif) no-repeat 0 0; }
  12. .month3 { background: url(images/03.gif) no-repeat 0 0; }
  13. .month4 { background: url(images/04.gif) no-repeat 0 0; }
  14. .month5 { background: url(images/05.gif) no-repeat 0 0; }
  15. .month6 { background: url(images/06.gif) no-repeat 0 0; }
  16. .month7 { background: url(images/07.gif) no-repeat 0 0; }
  17. .month8 { background: url(images/08.gif) no-repeat 0 0; }
  18. .month9 { background: url(images/09.gif) no-repeat 0 0; }
  19. .month10 { background: url(images/10.gif) no-repeat 0 0; }
  20. .month11 { background: url(images/11.gif) no-repeat 0 0; }
  21. .month12 { background: url(images/12.gif) no-repeat 0 0; }
  22.  
  23. .shield {
  24.         position: relative;
  25.  
  26. }
  27.  
  28. .commentscloud {
  29.         position: absolute;
  30.         text-align: center;
  31.         top: -4px;
  32.         left: 22px;
  33.         width: 30px;
  34.         height: 24px;
  35.         padding: 3px 0;
  36.         background: url(images/bubble.png) no-repeat 0 0;
  37. }

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

AttachmentSize
bubble.png1.82 KB
Marek
  • Delicious
  • Digg
  • StumbleUpon
  • Facebook

COMMENTS

Ruth (not verified) (Tue, 10/27/2009 - 12:56)

It really looks very good, I would also like to do this at my blog.

Rob (not verified) (Thu, 01/14/2010 - 22:59)

What's missing here? There is/are missing step(s) here. I'm using Drupal 6 and trying to use this, but there seems to be an additional tpl.php file or something. What am I missing here?

marek (Wed, 01/20/2010 - 11:52)

@Rob - phptemplate_preprocess_node should be in a template.php in Drupal 6, then print the variable $calendar in node.tpl.php

Seo Silvershine Company India (not verified) (Sat, 04/03/2010 - 13:48)

All Web Partners

Seo Silvershine Company

saiiu (not verified) (Thu, 04/22/2010 - 19:48)

The best platform already in this situation MCITP | MCTS

Business logo (not verified) (Tue, 05/18/2010 - 13:56)

It looks very good, I want to do it on my blog.
Logo Design | website design

Tom Alan (not verified) (Tue, 06/15/2010 - 10:39)

Thanks for this great CSS & script , ive installed it onto one of my blog management services blogs and it looks fantastic!

Ryan (not verified) (Fri, 07/02/2010 - 14:54)

The calendar icons are simply stunning, have used them in the past and am planning to do so again on my Fifa world cup betting odds site as well.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options