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

Anna Stret (not verified) (Mon, 02/01/2010 - 13:00)

Avec plaisir révéré! Et il sera utile pour moi - en toute confiance! Bonne chance!

Anonymous (not verified) (Thu, 02/11/2010 - 15:57)

Sildenafil citrate, sold as Viagra, Revatio and under various other trade names, is a drug used to treat erectile dysfunction and buy viagra (PAH).

Anonymous (not verified) (Fri, 02/12/2010 - 12:30)

I feel strongly about it and love learning more on this topic. If possible, as you gain expertise, would you mind updating your blog with more information? It is extremely helpful and beneficial to your readers Nice article.The code works fine and is a good starting point for me making a custom module.Thanks for the module..primes des jeux

Anonymous (not verified) (Sun, 02/28/2010 - 13:02)

Simoneau says, “Being a Daniel haber Webster Scholar alışveriş gave me confidence in my ability to practice law. More importantly, my employers knew because I was a Webster Scholar, pet shop I could handle a Supreme Court appeal.” As a Daniel Webster Scholar, giyim he was evaluated each semester by a New Hampshire Bar bilgisayar Examiner, counseled clients under iskenderun supervision, appeared before judges, and developed his skills and judgment in clinical settings. oto aksesuar The program is unique in the nation.

Anonymous (not verified) (Fri, 03/05/2010 - 12:43)

I completely agree with the above comment, the internet is with a doubt growing into the most important medium of communication across the globe and its due to sites like this that ideas are spreading so quickly.
site de blackjack en ligne

david r (not verified) (Sat, 03/06/2010 - 07:44)

Thanks for sharing your tips, its tips like these that actually do make a difference to the individual readers of this blog. Thank you and well done Promotional Codes Pariuri Sportive Steroids Buy

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