Calendar Theme Customization

by Albert Mutangiri 22. April 2010 18:27

As part of my blog theme customization , I thought i must share this tip for your blog entry calendar theme as well. So rather displaying  date strings, why not render these date strings in a nicely done calendar thumbanil display using css. All we need is a bunch of images - in this case we have 12 months in a year, so we will have 12 images - one calendar thumbnail per month. We will need to name these images in a sequence like below

We will define three important style definitions.

/* This style will define the positioning of the calendar thumbnails */
    float: right;
    margin-right: 6px;
    width: 42px;
    height: 42px;
/* this style defines daily text rendering */
    font-weight: bold;
    font-size: 1.3em;
    color: #000;
    width: 42px;
    text-align: center;
    padding-top: 14px;
/* this style defines monthly thumbnail rendering, we will decide using this style at runtime which thumbnail to display - we will have 12 of these below defined for all 12 thumbanils */
#content .calendar-icon-01
  background: url('calendar/01.gif');
#content .calendar-icon-02
    background: url('calendar/02.gif');

Blog Engine themes ships with two default controls - CommentView.ascx and PostView.ascx, In this case we're interested with the PostView.ascx for customization. Once we've defined our css and created our thumbnails, in our PostView control depending on datetime month of the year we can decide at runtime which style to apply to the calendar div.

<div class="<%="calendar calendar-icon-0" + Post.DateCreated.Month.ToString() %>"><div class="calendar-day">               <%=Post.DateCreated.Day.ToString() %></div></div>

So this will diplay a custom thumbnail for each month. Download Source Calendar-theme.rar (32.59 kb)




1/4/2012 5:04:48 AM #


Pingback from

Calendar thumbnails | Michaelmiracles | Reply

6/26/2012 7:16:07 PM #


Pingback from

Moderate Exercise Can Lower Breast Cancer Risk: Study | List of Team Sports | Reply

9/6/2014 2:33:23 AM #


Pingback from

блог английского языка | Reply

Add comment

(Will show your Gravatar icon)

  Country flag

  • Comment
  • Preview

About Me


Hi, My name is Albert Mutangiri, I am a software developer currently interested in software design, integration, .net technologies and Java. I'm currently developing enterprise applications for business process automation using Java & .Net Technologies.


I Code Java



17 0 1 0 18
13 6 0 0 19
4 0 0 0 4
22 1 0 0 23
0 0 3 0 3

Tag cloud