Calendar icons not only for your blog

By Marek Sotak on Fri, 10/26/2007 - 12:00

Read the update blog post here

I have found a little bit of time last night to create few calendar icons.
You can now download the source file of icons for gimp (http://gimp.org).
calendar-icons-overview

How to implement them

HTML Code for one icon

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

I have 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 it in 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. blog drupal icons web design

sotak-calendar-icons.tar_.gz

sotak-calendar-icon-src.xcf