Calendar icons not only for your blog | Sotak.co.uk


myself

Hi there...
My name is Marek Sotak and I am a freelance drupal developer, consultant and designer based in London. I have more than 7 years of experience creating customized web applications for clients.

My areas of expertise include graphic design, custom websites, and Flash applications. I also specialize in Drupal, a highly customizable and robust content-management system. Click here to contact me

Popular content

calendar-icons Calendar Icons
Free calendar icons for your blog
free-mascots Free Mascots
Mascots for your web
root-candy-admin-theme Root Candy
Admin theme for drupal
drupal-profile-buttons Drupal.org buttons
Buttons to link to your d.o profile

London Drupal training

Are you looking for a Drupal training course in London? Let me know and if there will be enough attendants we can organise one.
Contact me

Twittering

  • Twitter is loading...

view my drupal.org user profile
individual member - drupal
  • blog
  • services
  • portfolio
  • testimonials
  • contact

26

Calendar icons not only for your blog

Submitted by sign on Fri, 10/26/2007 - 11:00.

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.

AttachmentSize
calendar-icons.tar.gz14.73 KB
calendar-icon-src.xcf20.63 KB
  • 8368 reads
  • Delicious Delicious
  • Technorati Technorati
  • blog
  • drupal
  • icons
  • web design

Comments

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

Can those icons be used in

Can those icons be used in Drupal GPL licensed Themes?

  • reply
Wed, 01/23/2008 - 08:34 — sign

Yes, you can use them

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

  • reply
Thu, 01/31/2008 - 01:13 — Anonymous (not verified)

can someone tell me how can

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

  • reply
Mon, 02/25/2008 - 07:11 — Anonymous (not verified)

Epic FAIL.

Epic FAIL.

  • reply
Mon, 02/25/2008 - 11:20 — Maxi (not verified)

Very nice! thanks

Very nice!
thanks

  • reply
Wed, 02/27/2008 - 06:14 — umesh karade (not verified)

using in HTML

can i use the following css in plane HTML

  • reply
Wed, 02/27/2008 - 09:52 — sign

Yes you can, just copy the

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

  • reply
Thu, 02/28/2008 - 22:57 — Anonymous (not verified)

FAIL

Hilarious.

  • reply
Thu, 03/20/2008 - 04:13 — Anonymous (not verified)

thanks, i was looking for this

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

  • reply
Mon, 03/24/2008 - 13:06 — Anonymous (not verified)

icons

Very nice icons. Are they free to use?

  • reply
Tue, 03/25/2008 - 11:19 — sign

Yes, they are!

Yes, they are!

  • reply
Tue, 04/15/2008 - 11:28 — Haggis (not verified)

Thanks

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

  • reply

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

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
5 + 11 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.