Date Boxes

A word about the spanky new date boxes on the left… they are floated left, and created using semantic markup and valid style :-). Insert this into any WordPress blog, and you have the barebones structure of my date box:


<?php
$date = the_date("d:m:y:Y", "", "", FALSE);
if($date) {
  list($day, $month, $year, $yearlong) = split(":", $date);
?>
<div class="date">
<span class="day">
<a href="/log/<?php print $yearlong ?>/<?php print $month ?>/<?php print $day ?>/" title="Click here to view all posts on this day.">
<?php print $day; ?>
</a>
</span>
<span class="month">
<a href="/log/<?php print $yearlong ?>/<?php print $month ?>/" title="Click here to view all posts of this month."><?php print $month ?></a>/<a href="/log/<?php print $yearlong ?>/" title="Click here to view all posts of this year."><?php print $year ?></a>
</span>
</div>
<?php
}
?>

And of course, the style rules:


.date {
display: block;
margin: 5px;
padding: 2px;
float: left;
border: 1px solid #444;
background-color: #111;
color: #eee;
text-align: center;
}

.date span.day {
font-family: trebuchet ms, tahoma, sans-serif;
font-size: 2.2em;
display: block;
}

.date a {
font-weight: normal;
text-decoration: none;
color: #eee;
}

.date a:hover {
text-decoration: none;
}

.date span.month {
font-size: 0.9em;
font-family: verdana, arial, sans-serif;
display: block;
}

Now a few words about its features: it only appears “once per day” so the page won’t be cluttered up with date boxes. Then too, the day, the month and the year are clickable so you can directly navigate to their pages. There are still a few issues remaining regarding the style when a day has too few posts, and it also seems to mess up a few of my pages, so it needs a bit of work. But imho, it spruces up the visual appeal and the usability of the site a good bit 😉

Leave a Reply

Create a website or blog at WordPress.com

%d bloggers like this: