BLOG
Calendar icons not only for your blog
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 |
COMMENTS
Can those icons be used in Drupal GPL licensed Themes?
Yes, you can use them wherever you want and do whatever you want with them. ;)
can someone tell me how can add these icons to my webpages, I am using Frontpage
Epic FAIL.
Very nice!
thanks
using in HTML
can i use the following css in plane HTML
Yes you can,
just copy the html and css.
That will do it. :)
I just wanted to say thanks, i was looking for exactly this.
Very nice icons. Are they free to use?
Yes, they are!
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
it's wonderfull, this web uses your icon:
http://www.dircom.udep.edu.pe/semana.php
it looks great :)
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!
thank you very nice. succesfull article
Awesome!!.Sir,Is there any way to show Year in Icon.
Nice one. Worked like a charm.
his post is a Kernel panic for my brain (sorry for my language ;)
But thank you very much now my dissertation is safe :)
I am impressed-great fundamental post.Good instructions -simple to use.
beylikdüzü ilçesinde ariston servisi hizmetleri vermekteyiz.
Its one of my favorite post. Thanks for sharing informative information,
mecidiyeköy bosch beyaz eşya servisi
gözüm optik grup magazalari optik, gozluk, gunes gozlugu ve lens
mitsubishi klima bak?m ve montaj servisi
beko klima servis, bak?m ve montaj servisi
writing services (not verified) (Tue, 03/30/2010 - 09:45)
nlp kimya ürünleri üretim ve pazarlama
this is the best platform regarding this as well. MCITP | MCTS
I've modified a Joomla module that integrates Google Calendar as "upcoming events" on my site to include these handy little icons. Check out the site and let me know if you have questions.
Thanks so much for the images and code!
-Tyson
avc?lar arçelik beyaz eşya ve ankastre servisi
sar?yer bosch beyaz eşya servisi
özel güvenlik şirketleri ve firmalar?
Thanks for the in-depth article. I can tell you put a lot of work into this one. Thumbs way up.Tammy Taylor | Galco | gigi wax
Thank you very usful spinned to implement in my blog :)
Film en Streaming
Thank you very much! They are currently being used on my blog: http://anderstornkvist.se/
his post is a Kernel panic for my brain (sorry for my language ;)
But thank you very much now my dissertation is safe :)
çemberleme makinas? sat?ş? ve pazarlama http://cembant.com.tr uzman ve kaliteli çözümler
avc?lar bosch beyaz eşya servisi klima ve kombi servisi
tercih otomotiv volkswagen servisi
plastik şişirme makinas? imalat ve teknik destek keser makina makina bizim işimiz
bosch beyaz eşya servisi
Hope this instruction will be help of many other people. Thanks for informative sharing.
[ bed bug bite ] [ plantar fasciitis boot ]
I am glad I found it informative so Site has been added to my RSS feed for later browsing.
Easy! Thank you!
Thanks for the in-depth article. I can tell you put a lot of work into this one.
But thank you very much now my dissertation is safe :)
I believe this blog post is one of the most informative thing not only for the technique learner but also for necessary for all stage people.
I am glad I found it informative so Site has been added to my RSS feed for later browsing.
I believe this blog post is one of the most informative thing not only for the technique learner but also for necessary for all stage people.
Great - will use this on my link building site.
I like this kind of very useful articles congratulations I wish you continued success, I hope I can do this kind of article
My experience after reading above essay is that it is necessary for gaining knowledge.
Post new comment