Calendar icons not only for your blog

October

2007

CALENDAR ICONS NOT ONLY FOR YOUR BLOG

MAREK

calendars I have found a little bit of time last night to create few calendar icons to represent published date of the post. The idea is fairly simple. One icon per month with different colour. I have tried to make the colours relevant as how I see them here in Europe, but if you want to change them you can get the source code of these icons in .xcf format (gimp) at the end of this post.

How to implement them

HTML Code for one calendar icon

<div class="calendar calendar-icon-10">
  <div class="calendar-day">26</div>
</div>

There are 12 classes, calendar-icon-X where X is the number of the month. In each calendar-icon-X is background image of the month.

Main Calendar CSS Code

.calendar {
  float: left;
  margin-right: 6px;
  width: 42px;
  height: 42px;
}

CSS Code for one icon

#content .calendar-icon-10 {
  background: url('calendar/10.gif');
}

CSS Code for day

.calendar-day {
  font-weight: bold;
  font-size: 1.3em;
  color: #000;
  width: 42px;
  text-align:center;
  padding-top: 14px;
}

How to use this in a Drupal theme

Insert all css classes (above) to your style.css file. Open up your node.tpl.php file and add there:

<div class="calendar calendar-icon-<?php print Date("m", $node->created) ?>">
  <div class="calendar-day"><?php print Date("j", $node->created) ?></div>
</div>

Icons Licence

Icons are FREE! Enjoy and post some comments where you are using them if so. ;)

Suggestions and comments welcome.

Attachment	Size
calendar-icons.tar.gz	14.73 KB
calendar-icon-src.xcf	20.63 KB

Marek

COMMENTS

themegarden.org (not verified) (Tue, 01/22/2008 - 22:28)

Can those icons be used in Drupal GPL licensed Themes?

marek (Wed, 01/23/2008 - 09:34)

Yes, you can use them wherever you want and do whatever you want with them. ;)

Anonymous (Thu, 01/31/2008 - 02:13)

can someone tell me how can add these icons to my webpages, I am using Frontpage

Anonymous (not verified) (Mon, 02/25/2008 - 08:11)

Epic FAIL.

Maxi (not verified) (Mon, 02/25/2008 - 12:20)

Very nice!
thanks

umesh karade (not verified) (Wed, 02/27/2008 - 07:14)

using in HTML
can i use the following css in plane HTML

marek (Wed, 02/27/2008 - 10:52)

Yes you can,
just copy the html and css.
That will do it. :)

Anonymous (Thu, 03/20/2008 - 05:13)

I just wanted to say thanks, i was looking for exactly this.

Anonymous (not verified) (Mon, 03/24/2008 - 14:06)

Very nice icons. Are they free to use?

marek (Tue, 03/25/2008 - 12:19)

Yes, they are!

Haggis (not verified) (Tue, 04/15/2008 - 12:28)

I have been coding my own CMS/blog/galery/news system for a few weeks now and this will make it look so much better

thanks

jack (not verified) (Tue, 11/10/2009 - 03:54)

it's wonderfull, this web uses your icon:
http://www.dircom.udep.edu.pe/semana.php

it looks great :)

Rola (not verified) (Tue, 11/10/2009 - 15:32)

Hey, can we know how did you create them?

I want to lern to use gimpo as a proffesional jejeje... but there's some tool that I can find...

Can you upload a video doing one of these cool icons?

I'm writing from Chile, I hope to you can understand my english!

kurye (not verified) (Thu, 01/21/2010 - 02:49)

thank you very nice. succesfull article

checkup (not verified) (Sat, 01/23/2010 - 01:17)

Yes you can,
just copy the html and css.
That will do it. :)

sara (not verified) (Mon, 02/01/2010 - 13:01)

Merci pour ces informations! Il est intéressant et nouveau casino fr!

BLOG