Skip to main content

Diigo Home

Download: Web 2.0 Date Icons For Your Blog - The Diigo Meta page

www.euphorish.com/...eb-20-date-icons-for-your-blog - Cached - Annotated View

Suzannah Porter's personal annotations on this page

suzannah
Suzannah bookmarked on 2009-03-06 Icons Downloads Web Design Euphorish Calendar List-CrazyHugeIconList
  • 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.

  • 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!

  • 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…

This link has been bookmarked by 5 people . It was first bookmarked on 09 Nov 2008, by someone privately.

Top Tags