How to Put Calender Icon for Post Date?

The ‘calendar icon’ is just html and css. One doesn’t get it anywhere … well, ok, here it is:

The html is

<div class="date">
	<span class="month">Oct</span>
	<span class="day">3</span>
</div>

The css is

.date {
	background: url(images/date.gif) no-repeat;
	height: 54px;
	margin-bottom: 0px;
	width: 54px;
	text-align: center;
	float: left;
	margin-top: 15px;
}
.date .month {
	display: block;
	color: #F6F5BC;
	padding: 2px 0px;
	text-align: center;
	text-transform: uppercase;
	font-size: 10px;
	margin-top: 2px;
	font-weight: bold;
	margin-bottom: 3px;
}
.date .day {
	display: block;
	color: #FFFFFF;
	font: 2.3em Georgia;
	padding-top: 0px;
	text-align: center;
	margin-top: -8px;
}

Hi Pinoy,

Can you teach me how to put both together to make it work? I’m not pro in WordPress. Hope that you can help out. ??

Thanks.

Can someone help me out with this? Thanks.

Impatient? ??

Paste this on your index.php, single.php and whichever that shows the date. Paste it among the HTML anywhere between while (have_posts()) : the_post(); and endwhile;. Make a backup first, of course.

<div class="date" title="<? the_time('F jS, Y') ?>">
	<span class="month"><?php the_time('M'); ?></span>
	<span class="day"><? the_time('j'); ?></span>
</div>

Then paste the previously-mentioned css on your theme’s style.css, though you may need to remove any existing definitions of date, month and day there.

(Hey, isn’t your blog all about writing and editing WordPress themes?? That makes you a pro, right?)

Not working. ??

I’m no pro in WordPress. Just a newbie. Why you say my blog all about wordpress theme?

I’m sorry I misread your first post.

You have to be more specific when you say “Not working. :(” and come for help. People can only guess so much and people may not have the time to serve everything to you ready-to-eat.

I said put it anywhere between while (have_posts()) : the_post(); and endwhile;, like this:

<?php while (have_posts()) : the_post(); ?>

<div class="date" title="<? the_time('F jS, Y') ?>">
	<span class="month"><?php the_time('M'); ?></span>
	<span class="day"><? the_time('j'); ?></span>
</div>

	<h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>

<h4><?php the_time('F jS, Y'); ?><!-- by <?php the_author() ?> --> &middot; <?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?> &middot; <?php the_category(', '); ?> <?php edit_post_link('Edit', ' &middot; ', ''); ?></h4>
	<div class="entry">
		<?php the_content('[Read more &rarr;]'); ?>
	</div>
	<p class="tagged"><span class="add_comment"><?php comments_popup_link('&rarr; No Comments', '&rarr; 1 Comment', '&rarr; % Comments'); ?></span><strong>Tags:</strong><?php the_tags('','&middot;',''); ?>

	<div class="clear"></div>

<?php endwhile; ?>

and I said paste it into your style.css, like this:

li.widget .search_input { font-size: 1.1em !important; }

	#search_form .search_input:focus { border-top: 1px solid #666; border-left: 1px solid #666; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; }

.date {
	background: url(images/date.gif) no-repeat;
	height: 54px;
	margin-bottom: 0px;
	width: 54px;
	text-align: center;
	float: left;
	margin-top: 15px;
}
.date .month {
	display: block;
	color: #F6F5BC;
	padding: 2px 0px;
	text-align: center;
	text-transform: uppercase;
	font-size: 10px;
	margin-top: 2px;
	font-weight: bold;
	margin-bottom: 3px;
}
.date .day {
	display: block;
	color: #FFFFFF;
	font: 2.3em Georgia;
	padding-top: 0px;
	text-align: center;
	margin-top: -8px;
}

You will have to experiment with these until it works fine.