Download: Web 2.0 Date Icons For Your Blog

bigpreview

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.

package_go.pngDownload .PNG Files

package_go.png Download .PSD (Photoshop) Files

How To Incorporate Into WordPress

example.png

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 package_go.png 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

36 thoughts on “Download: Web 2.0 Date Icons For Your Blog

  1. Cristian

    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

  2. alex Post author

    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.

  3. David

    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.

  4. alex Post author

    Yeah you’re right. I copied and pasted it from an older theme without optimizing it. I’ll replace it with yours. Thanks

  5. Pingback: Pixeljunkie`s Blog » Blog Archive » links for 2007-05-14

  6. Pingback: All in a days work…

  7. Pingback: Web 2.0 Date Icons « Web Development (Tips & Tricks)

  8. Pingback: Dove trovare le migliori icone gratuite | Googlisti.com

  9. Pingback: Freebies Round-Up: Icons, Buttons and Templates | Smashing Magazine

  10. Pingback: Freebies Round-Up: Icons, Buttons and Templates | Webdesign (css, grafica e altro)

  11. Pingback: Inspired Web - » Freebies - Buttons, Icons and Templates

  12. Pingback: SachinKRaj - get something useful from web Huge Free Graphics collection (Icons, Buttons and Templates)- collected by smashingmagazine.com «

  13. Pingback: » 23 set di icone e bottoni Geekissimo

  14. Pingback: TheHypedâ„¢» Blog Archive » 21 Free Icon Sets Worth Checking Out

  15. Pingback: aloha WEBLOG - spreading the aloha spirit » links for 2007-05-23 through 2007-05-28

  16. Pingback: Agregar icono de fecha en el titulo de tus post « Xyberneticos

  17. Pingback: Tekjuice.com » Blog Archive » Freebies Round-Up: Icons, Buttons and Templates

  18. Pingback: Freebies Round-Up: Icons, Buttons and Templates | Tekjuice.com

  19. Pingback: Risorse gratuite di Visual Design

  20. Pingback: Pixelco Blog » Blog Archive » Los mejores iconos, logos y botones gratis

  21. Pingback: 30 Resources to Create Your Own Web 2.0 Site - Simplehelp

  22. Pingback: XSiR.NET» Blog Arsiv » Bloglar için ikonlar

  23. Pingback: Entry Dates Linked to Archive

  24. Pingback: Comixx » Blog Archive » Bei siti nel web

  25. Pingback: tmthai.com All you need for the Website!!!!» Blog Archive » Freebie Round-Up: Icons, Buttons, and Templates

  26. The WAHM Shack

    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. :)

  27. Pingback: 60 sosyal a? ikonu (60 social network icon) | Ellibir Design

  28. Pingback: 60+ Free Vectors Icons for Web Designers | SherifAbdou - The Design Blog

  29. Pingback: 60 Free Vectors Icons for Web Designers «

  30. Pingback: SMALLDUDE NETWORK » Blog Archive » 60+ Free Vectors Icons for Web Designers

  31. Pingback: Ücretsiz ?kon Seti #1 | Techlogr

  32. Pingback: Good Graphic Design Related Blog Postings | Northern Virginia Graphic Designer Paintball Photography

Leave a Reply