We like to put some fancy displays for all the dates on our blogs and we tried the plugins from NucleusCMS site and we could never get it to work. After reading and searching, we found a simple way using CSS to have our ways with the dates For the programming pros, please don't laugh, but it does work for our blogs. Anyhow, this is for people who... ... knows nothing about web design or web programming. Again, it doesn't work with almighty troublesome IE.

div.fancydate {width:60px;height:60px;border:none;float:left;margin:0;}
div.fancydate p {font-weight:700;line-height:10pt;font-size:14px;font-style:italic;color:#fff;font:Book Antiqua,Garamond;margin:10px;}

First, we need to create some fancy images for the background of... ... our dates, the size we use is 60x60 pixels. We will show how we did ours.

Second, we need to create the CSS for our blog, if you like, you can use ours and change your urls and images. In our css, we use 2 images, 1 for index page, and 1 for item page (just want to make life more complicated), therefore, the class fancydate can display any image we want just put our images accordingly. We have 6 blogs, so we only need to use 1 fancydate.css for all skins' head.inc. Anyhow, if you just use 1 image for your blog, just select an image for the background and edit both index&item template using the same code.

Third, go to admin page and edit the "Templates", we hope you know where it is, it's on the left hand side column, just click it, there will be a list of all your skins, choose the one that you're using and edit the index and the item accordingly. Scroll down to the bottom of the page where you see "Date and Time" and in the "Date Format" field, copy and paste these code in there (see picture).

Index template

<div class="fancydate" style="background: url(http://yourdomain.com/yourimagefolder/yourimage1) repeat;">
<p style="text-align: center;">%b<br/>%d</p>
</div>

Item template with different image.

<div class="fancydate" style="background: url(http://yourdomain.com/yourimagefolder/yourimage2) repeat;">
<p style="text-align: center;">%b<br/>%d</p>
</div>

Just update them then voila, your dates will show in the image that you designed.

Now, we need to create some background images for the dates, we like to use the paint.net program which is great for making transparent background of images. We also use Jasc paintshop pro.

We created some background images if you want to use or create your own. Remember, if the size is bigger than 60x60, you need to edit the CSS to accomodate the new size.

The last thing we need to do is to declare the CSS file in the head of our skin. Normally the head.inc or head.php file in your skin folder like this

<link rel="stylesheet" type="text/css" href="http://youdomain.com/yourcss folder/fancydate.css"/>

There is another way to place the images inside the CSS if someone may like to do it, but everytime we need to change the image, we will have to change it inside the CSS like this nucleusdate.css and place the codes in the index & item templates accordingly.

Index template (remove the "</a>" in the picture, it's not neccessary)

Item template (remove the "</a>" in the picture, it's not neccessary)

Cheers,

Louis