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