Calendar icons revisited - bubble with comment count

September
27
2008

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

COMMENTS

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

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?

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

All Web Partners

Seo Silvershine Company

The best platform already in this situation MCITP | MCTS

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

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

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.

Interesting. Thanks for sharing.
stromanbieter wechseln paderborn

Firmam?z S.M. Mali Müşavirlik Bürosu; Meslekte uzun y?llara dayanan deneyimli kurucu kadrosu ve çal?şanlar? ile 14 y?ld?r Avc?lar?da faaliyetine devam etmektedir.

Devlet ad?na, belli bir ciroya ulaşm?ş firmalar?n hizmetini almakta zorunda oldu?u, o firman?n muhasebe ve mali kay?tlar?n? kontrol etme yetkisine sahip ve bu firmalardan belli bir ücret almay? hakeden şah?slara mali müşavir denir. Hizmetlerimiz hakk?nda daha detayl? bilgi almak için bizimle iletişime geçebilirsiniz.

istanbul franke servisi

istanbul avrupa ve anadolu kombi servisi

plus teknik gaggenau servisi. ankastre ve beyaz eşya

kimya ürünleri üzerine köpük kesici ürünleri üretmekteyiz.

bosch kombi servis hizmetleri. bak?m ve ar?za servisi.

istanbul panasonic klima bak?m ve montaj servisi

Very informative and helpful post. You have good command on the topic and have explained in a very nice way. Thanks for sharing.

[url=http://www.oyunkedi.com]oyun oyna[/url]

ümraniye vaillant servisi

Such a great service that you should try!
üsküdar buderus servisi

[url="http://www.gamaoyun.com"]oyun oyna[/url]

[url="http://www.gamaoyun.com"]oyun oyna[/url]

[url=http://www.gamaoyun.com]oyun oyna[/url]

[url=http://www.gamaoyun.com]oyun oyna[/url]

I love your calendar icons that's why the script and CSS codes are very useful for me. Thanks, by the way. I've placed it on my other blog. They are just simply fantastic!

tahiti beach homes

Very nice tutorial. I am looking forward to implement that calender icon with my blog as well. Thanks and keep posting such knowledgeable tutorials. Thanks again.
HelpFixAnyPC Laptop Repair Leicester
Submit Link | Free Directory Submission
how to prevent fire

I am very pleased to study this article. I will surely be back again to look at some other important posts that you have in future. I wanted to thank you for this great blog.essay term paper

Cool post, very interesting information!
lbps loan modification

The post is written in very a good manner and it entails many useful information for me. I am happy to find your distinguished way of writing the post.
Web Shopping Cart

iconlar çok güzel ancak biraz daha farklı şeyler lazım bana ancak paylaşım için teşekkürler.

juwst quick hello

Extremely nice post. I just stumbled upon your blog and wanted to say that I have seriously enjoyed surfing around your weblog posts. Immediately after all I might be subscribing to your rss feed and I hope you write once again soon!

Spring makes everything look filthy.

I am thoroughly convinced in this said post.I am currently searching for ways in which i could enhance my knowledge in this said topic you have posted here. http://www.genericviagratab.com/

This is a really good site post, im delighted I came across it.

Ηeya i'm for the first time here. I found this board and I find It truly useful & it helped me out a lot. I hope to give something back and help others like you aided me.

Pursaklar Arçelik Servisi  god share thank you.

Highly energetic article, I enjoyed that bit. Will there be a part 2?

Link exchange іs nothіng else exϲept it iss simply placing tҺe օther person's blog link on ƴoսr page at
appгopriate ρlace аnd othеr person will ɑlso do similar in support οf you.

once again you did it marek

Much of the information that I needed, thank you. obat batu empedu | obat rematik | obat infeksi paru paru

I love reading through an article that can make people
think. Also, many thanks for allowing me to comment!

The more time and attention you give to
it, the more likely it is that you will have a litter box trained ferret.
Not once did we take into consideration the cost of these dragons.
Spa Presents - Take care of her to a day at a beauty spa exactly where she can loosen up and
rejuvenate.

And practical guide to what we can see, there may be applications where necessary. Attention to detail.

Wery good thanks.

İstanbul klima servisi

Hey would you mind stating which blog platform you're using?
I'm going to start my own blog in the near future but I'm having a tough
time deciding between BlogEngine/Wordpress/B2evolution and
Drupal. The reason I ask is because your layout seems different then most blogs and I'm looking for something completely unique.
P.S My apologies for being off-topic but I had to
ask!

thanks a lot for the info that is given more success

I’m not that much of a online reader to be honest but your blogs really nice, keep it up!
I'll go ahead and bookmark your website to come back in the future.
Cheers

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