Zoe Zombie

The story is this: I’ve had this new layout online for a little over a day and have already received a few emails asking me how I did the calendar images on the left. I don’t blame them, that was the only thing that was stopping me from going online with this new design earlier. It literally took me a few hours to get it straight.

I nabbed the images from Eurphorish, but the installation code wasn’t getting me anywhere. So here we go..(note, this is for wordpress hosted blogs. Twist it around and it can word for any hosted webpage.)

1. Visit Eurphorish and download the zipped files either containing the .png or .psd calendar images. I took the black one and edited it with a gradient of my choice and changed the drop shadow on it. You can do it using the .psd zip files. I resized the image to 60px x 60px.

2. Once you’ve uploaded the image, open up your index.php file and add the below code before ‘<a href=”<?php the_permalink() ?>” title=”Permalink”><?php the_title(); ?>‘ or at least before the title of your blog post:

<div class=”date”>
<span class=”month”><?php the_time(’M’); ?></span><br />
<span class=”numb”><?php the_time(’j’); ?></span><br />
</div>

3. Open up your style.css folder and add:

.date {
width:60px;
height:60px;
padding:0.6em 0 0 0;
text-align:center;
float:left;
background-image:url(images/dateicon.gif);
background-repeat:no-repeat;
background-position:top center;
margin-right:5px;
}
.month {
text-transform:uppercase;
font-weight:bold;
color:#ffffff;
}

Note that the width and height of “.date” should be changed to suit the width and height of your image.

4.  Open up your single.php file, or the file which displays a post page and include the code in step 2 in the same area as mentioned. Ensure that you delete any other date formatting which may show up in the post. And that’s it. Hopefully it will not take you as long as it took me to figure out why the hell it wasn’t working!

Categorized as web design