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.

Mlio (not verified) (Thu, 09/16/2010 - 14:37)

Interesting. Thanks for sharing.
stromanbieter wechseln paderborn

Ernest Fretter (not verified) (Fri, 10/01/2010 - 20:01)

This looks great thanks, I installed Cloud Security to help keep my website clean and no I am scouring the internet for ways to make the look really nice and inviting but functional too.

bosch servis (not verified) (Sat, 10/30/2010 - 23:45)

Bosch Buzdolab? So?umutuyor? Bosch servisi nerde? En yak?n Bosch Bayisi? Bosch Servis olarak ?stanbul?un tüm semtlerine hizmet vermekteyiz.
Ar?zal?, bak?ma ihtiyac? olan bosch markal? cihazlar?n?z? Bosch Servisi olarak günümüzün son teknolojileri ile tamir ediyoruz.
Bosch Beyaz Eşya Al?rken Neye göre seçim yapmal?y?m?
Beyaz eşya al?rken, ihtiyaçlar?n?z? en üst seviyede karş?layacak şekilde seçim yapmal?s?n?z. Ürünle ilgili beklentilerinizi bayiye net olarak iletmelisiniz. Ürünün, reklam?nda veya tan?t?c? broşüründe belirtilen özellikleri taş?y?p taş?mad???n? kontrol etmelisiniz. Bosch Servisi yan?lt?c? ibareler içeren veya gerçe?i yans?tmayan ürünler ay?pl? mald?r.
Bosch Buzdolab? Çal?şm?yorsa ?
Buzdolab?n?z çal?şm?yorsa yapaca??n?z işlem bosch servisi ça??rmakt?r.Bize ulaşmak için http://boschservisin.net adl? internet sitemize girebilir veya 444 1 784 numaral? telefondan bize ulaş?p ar?za kayd? açt?rabilirsiniz.
Bosch Kombi Çal?şm?yorsa ?
Kombiniz çal?şm?yorsa yapman?z gereken 444 1 784 numaral? ça?r? merkezimizden bize ulaşmak veya boschservisin.net ?den ar?za kayd? oluşturmakt?r.

mali müşavirlik (not verified) (Thu, 11/04/2010 - 15:24)

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.

franke servisi (not verified) (Sat, 11/06/2010 - 00:40)

istanbul franke servisi

kombi servisi (not verified) (Sun, 11/07/2010 - 01:11)

istanbul avrupa ve anadolu kombi servisi

miele servisi (not verified) (Mon, 11/15/2010 - 01:50)

thank you nice post
http://mieleservisin.com/miele-servisi/

gaggenau servisi (not verified) (Mon, 12/20/2010 - 12:34)

plus teknik gaggenau servisi. ankastre ve beyaz eşya

köpük kesici (not verified) (Mon, 12/20/2010 - 12:34)

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

bosch kombi servisi (not verified) (Mon, 12/20/2010 - 12:36)

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

panasonic klima servisi (not verified) (Mon, 12/20/2010 - 12:37)

istanbul panasonic klima bak?m ve montaj servisi

avc?lar arçelik servisi (not verified) (Mon, 12/20/2010 - 12:37)

avc?lar arçelik beyaz eşya servisi

bak?rköy bosch servisi (not verified) (Mon, 12/20/2010 - 12:38)

bak?rköy bosch ankastre ve beyaz eşya servisi

bosch ankastre servisi (not verified) (Mon, 12/20/2010 - 12:39)

bosch marka ankastre servisi

cnc plazma kesim (not verified) (Mon, 12/20/2010 - 12:51)

cnc plazma kesim hizmetleri kumru demir çelik

cnc plazma kesim (not verified) (Mon, 12/20/2010 - 12:52)

cnc plazma kesim hizmetleri kumru demir çelik

bosch buzdolab? servisi (not verified) (Mon, 12/20/2010 - 13:49)

bosch istanbul buzdolab? servisi

üsküdar arçelik servisi (not verified) (Sun, 01/16/2011 - 20:21)

thank you nice post for bubble

It Recruitment (not verified) (Tue, 03/29/2011 - 11:25)

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

asusr[TSDE] (not verified) (Wed, 07/20/2011 - 05:12)

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

ümraniye vaillant servisi (not verified) (Sun, 08/28/2011 - 11:11)

ümraniye vaillant servisi

üsküdar buderus servisi (not verified) (Sun, 08/28/2011 - 11:37)

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

oyunoyna[DATEETHAAYAIA] (not verified) (Sun, 09/11/2011 - 16:06)

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

oyunoyna[DATEETHAAYAIA] (not verified) (Sun, 09/11/2011 - 16:37)

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

oyunoyna[ssHAAYAIA] (not verified) (Mon, 09/12/2011 - 19:46)

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

oyunoyna[ssHAAYAIA] (not verified) (Mon, 09/12/2011 - 20:22)

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

Audrey Ross (not verified) (Wed, 11/16/2011 - 10:59)

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

web design Manchester (not verified) (Thu, 11/17/2011 - 07:29)

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

Anonymous (not verified) (Sat, 12/17/2011 - 17:46)

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

Anonymous (not verified) (Wed, 01/25/2012 - 19:21)

Cool post, very interesting information!
lbps loan modification

madhuri (not verified) (Mon, 01/30/2012 - 14:50)

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

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