Customising Calendar Archive

By now I am sure mostyou have started using phydeaux’s Calendar Archive in their blog..He has indeed given us a great tool .The dull blogger archive is replaced with more vibrant clanedar archive

I am sure some of you would have gone a step further and modified the calender style sheet to modify he appreatence of the calender to match your blog’s color scheme.

If you want to perform such a customisation…and really dont know how to go about it..then all you have to do is just follw the instructions ..drop in your comment help shall come to you

In the Picture below I have marked certain areas in the calendar with refrence to its code in the stylesheet

#bcaption #bcaption select td.highlightCell This is responsible for the cells(dates) which have posts in them td.filledCell table#bcNavigation table#bcalendar thead tr th This is responsible for the display of the days of the week ul#calendarUl li This is responsible for the display of the posts (of selected month) as lists

It is my guess that the basic customisation works with adding some background color for the dates – days – title etc..this can be done in a very simple manner

You may add Background color by adding background-color:COLOR to the respective block of the code
Say.. you want to add the background as pink in the area marked #bcaption..Then your code will look something like this
#bcaption
{border:1px outset #000;
background-color:pink;
padding:2px;
margin-left:0;
margin-right:0;
margin-top:10px;
margin-bottom:0
}
You may also use the hexadecimal color code to get the color of your choice…background-color:#ffc0ff;

Once the month is selected the posts made during that month is displayed as list…You may want to add a picture to appear near those titles in the list (See my Calender archive.. you will see picture)

You can also do this all you need to do is

1. Choose a picture that you would like to display

The width and height of the picture must NOT exceed 16*16px

2. Upload the picture to a common fileserver..like googlepages
3. Add the <img src=”URL_of the picture“/> to the ul#calendarUl li