WordPress- Displaying date via. image

[weblogic]

Hi, everyone. I am trying to put together a WordPress for a client and although I hate asking for help - I am at a total standstill! She wants date tabs on the left of each post (on the main homepage and then each post; NOT pages- obviously, since those aren't 'dated', per say...).

 

Here is the function.php code I am using:

// custom date tab - creates two divs
// first div pulls in a background png image named by date
// and adds year dynamically. Placed via css to left of post as
// a hanging tab.

remove_action('genesis_before_post_content', 'genesis_post_info');
add_action('genesis_before_post_content', 'family_tree_post_info');
function family_tree_post_info() {
    if(is_page()) return; // don't do post-info on pages
	echo '<div class="post-date-wrap">';
	echo '<div class="post-date post-date-background" style="background:url(';
	echo CHILD_URL;;
	echo '/images/date';
	echo the_time('F');
	echo '/';
	echo the_time('M');
	echo '.png) no-repeat 4px -3px">';
	echo the_time('Y');
	echo '</div>';
	echo '</div>';
	echo '<div class="post-info">';
        genesis_post_comments_link(__('Leave a Comment', 'child'), __('1 Comment', 'child'), __('% Comments', 'child'));
        edit_post_link(__('(Edit)', 'child'), '', ''); // if logged in
    	echo '</div>';
}  

 

This shouldn't matter [much] - but here is the style.css for the post-dat:

 

.post-date-wrap {
width: 65px;
height: 73px;
}

.content-sidebar .post-date-wrap {
float: left;
margin-top: -42px;
margin-left: -107px;
background: url(images/dates/bgd-left.png) no-repeat top left;
}

.content-sidebar-sidebar .post-date-wrap {
float: left;
margin-top: -42px;
margin-left: -84px;
background: url(images/dates/bgd-left.png) no-repeat top left;
}

.full-width-content .post-date-wrap {
float: left;
margin-top: -42px;
margin-left: -89px;
background: url(images/dates/bgd-left.png) no-repeat top left;
}

.sidebar-content .post-date-wrap {
width: 65px;
height: 73px;
float: right;
margin-top: -42px;
margin-right: -89px;
background: url(images/dates/bgd-right.png) no-repeat top left;
}

.sidebar-sidebar-content .post-date-wrap {
width: 65px;
height: 73px;
float: right;
margin-top: -42px;
margin-right: -86px;
background: url(images/dates/bgd-right.png) no-repeat top left;
}

.sidebar-content-sidebar .post-date-wrap, .sidebar-content-sidebar .post-date {
visibility: collapse;
height: 0;
width: 0;
}

.post-date {
width: 62px;
height: 17px;
display: inline;
text-align: center;
color: #4e260d;
padding: 50px 0 0 5px;
font-size: 9px;
}

.content-sidebar .post-date, .content-sidebar-sidebar .post-date, .full-width-content .post-date {
float: left;
}

.sidebar-content .post-date, .sidebar-sidebar-content .post-date {
float: right;
}

 

Here are two pictures:

* I have one of these for every day; for each month - found in images/dates - thereafter organized by months (in written out for October, November; then 1.png; 2.png, etc. for each DAY of the month)

 

 

This is how it is coming up right now; only the year (that really small lettering that says 2011):

 

I need the images with the month & date to appear inside of that box/tab. I have been working on this for too long and cannot get it to go. My 'thing' is design, so I really hope you can all help me! I just can't get PHP down.. I am sure it is something so ridiculous that I cannot see.

 

Thanks for your help!!

 

- Nicole