So you want a sleek looking date icon for all your posts on your blog or web page do you? Well you’ve come to the right place. Below is a collection of different colors and styles you can choose from and customize. You can grab the .zip of the .PNG’s and .PSDs (separated for bandwidth reasons). You can use these however you feel fit, no limitations no real licensing. If you scroll down a little further you will see how to implement this into your wordpress blog.
Download .PSD (Photoshop) Files
How To Incorporate Into WordPress
To incorporate this into your current wordpress theme you are going to have to do a slight bit of image editing and css as well as xhtml… but don’t worry, we’ve done most of it for you!
Editing In Photoshop (if needed)
First download and unzip the archive. Then pick out your favorite color and open it in photoshop. You will now “save as…” the file into a .gif to be titled “dateicon.gif”…. why are we doing this? Because your visitors using the unholy Internet Explorer 5 or 6 cannot view semi-transparent .png’s.
When you save the gif a dialog will appear. Select the dropdown box next to “Palette” and select “Local (Selective)”. Make sure the check box next to “Transparency” is ticked (checked). Now select the “Matte” drop box and select “White.” and click OK. Now you have a IE friendly transparent .gif. Upload it into your wp-themes/YOURTHEMEHERE/images directory.
Adding the CSS/XHTML To WordPress
Log into your WordPress Admin Panel and go to “Presentation.” Now click on “Theme Editor” and select “style.css” on the right side (this is usually brought up automatically).
Add this code:
.the_date {
display:block;
text-align: center;
float:left;
font-family: Arial, Helvetica, sans-serif;
background: url(/images/dateicons/dateicon.) no-repeat;
width:60px;
}
.date_m {
display:block;
font-size: .9em;
margin:0;
padding:0;
font-weight: bold;
text-align:center;
}
.date_d {
display:block;
font-size:1.4em;
margin:0;
padding:0.7em 0 1.3em 0;
text-align: center;
}
(thanks david!).
Also note your images directory might be named something other then “images” and your path will differ so keep that in mind.
After you’ve added the code above, click on “Main Index Template” in your theme editor and find a line containing the following partial code:
<a href=”<?php the_permalink() ?>
You are going to add this above or before that line:
<div class=”the_date”>
<div class=”date_m”><?php the_time(‘F’) ?></div>
<div class=”date_d”><?php the_time(‘jS’) ?></div>
</div>
Now view your page and configure any changes you see fit.
And thats as far as i can take you! Enjoy. Some resources below if you are stuck…
Create a ‘Calendar style’ WordPress date format
WP Date Image Hack
Thanks for sharing this!
It would be very useful if you could specify the usage rights for this. Would you allow the usage of your icons in personal blogs only or also business ones. Would you allow the usage in free distributed temples? What about commercial templates?
Thanks!
Cristian
Oh very sorry. These are under the “do-whatever-you-want-with-them” license
I’ll add it up there, thanks for pointing it out.
This css also works:
.the_date {
display:block;
text-align: center;
float:left;
font-family: Arial, Helvetica, sans-serif;
background: url(/images/dateicons/Black.png) no-repeat;
width:60px;
}
.date_m {
display:block;
font-size: .9em;
margin:0;
padding:0;
font-weight: bold;
text-align:center;
}
.date_d {
display:block;
font-size:1.4em;
margin:0;
padding:0.7em 0 1.3em 0;
text-align: center;
}
and remove the image tag and you don’t need all the positioning stuff.
Yeah you’re right. I copied and pasted it from an older theme without optimizing it. I’ll replace it with yours. Thanks
Pingback: Pixeljunkie`s Blog » Blog Archive » links for 2007-05-14
Pingback: All in a days work…
Pingback: Web 2.0 Date Icons « Web Development (Tips & Tricks)
Pingback: Dove trovare le migliori icone gratuite | Googlisti.com
Pingback: Freebies Round-Up: Icons, Buttons and Templates | Smashing Magazine
Pingback: Freebies Round-Up: Icons, Buttons and Templates | Webdesign (css, grafica e altro)
Thank you for this very clear walkthrough – saves a lot of time
No problem. I was hoping it came across pretty clear.
Pingback: Inspired Web - » Freebies - Buttons, Icons and Templates
Pingback: SachinKRaj - get something useful from web Huge Free Graphics collection (Icons, Buttons and Templates)- collected by smashingmagazine.com «
Pingback: » 23 set di icone e bottoni Geekissimo
Pingback: TheHypedâ„¢» Blog Archive » 21 Free Icon Sets Worth Checking Out
Pingback: aloha WEBLOG - spreading the aloha spirit » links for 2007-05-23 through 2007-05-28
Pingback: Agregar icono de fecha en el titulo de tus post « Xyberneticos
Pingback: Tekjuice.com » Blog Archive » Freebies Round-Up: Icons, Buttons and Templates
Pingback: Freebies Round-Up: Icons, Buttons and Templates | Tekjuice.com
Pingback: Risorse gratuite di Visual Design
Pingback: Pixelco Blog » Blog Archive » Los mejores iconos, logos y botones gratis
Are these icons hard to make? They don’t seem very hard to make but I see you have some small details
Pingback: 30 Resources to Create Your Own Web 2.0 Site - Simplehelp
Pingback: XSiR.NET» Blog Arsiv » Bloglar için ikonlar
Thanks for the icon, and the tutorial!
Pingback: Entry Dates Linked to Archive
Pingback: Comixx » Blog Archive » Bei siti nel web
Pingback: tmthai.com All you need for the Website!!!!» Blog Archive » Freebie Round-Up: Icons, Buttons, and Templates
Hello & thank you for the icon and tutorial. I followed all the directions, carefully making note of my correct image path, but the icon will not show at all. The date does show, but the icon will not. Any ideas? Thanks.
Pingback: 60 sosyal a? ikonu (60 social network icon) | Ellibir Design
Pingback: 60+ Free Vectors Icons for Web Designers | SherifAbdou - The Design Blog
Pingback: 60 Free Vectors Icons for Web Designers «
Pingback: SMALLDUDE NETWORK » Blog Archive » 60+ Free Vectors Icons for Web Designers
Pingback: Ücretsiz ?kon Seti #1 | Techlogr
Pingback: Good Graphic Design Related Blog Postings | Northern Virginia Graphic Designer Paintball Photography