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 */
.calendar
{
    float: right;
    margin-right: 6px;
    width: 42px;
    height: 42px;
}
/* this style defines daily text rendering */
.calendar-day
{
    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)

Tags:

BlogEngine.NET

Comments

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

pingback

Pingback from michaelmiracles.co.cc

Calendar thumbnails | Michaelmiracles

michaelmiracles.co.cc | Reply

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

pingback

Pingback from listofteamsports.mothersforafreeamerica.com

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

listofteamsports.mothersforafreeamerica.com | Reply

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

pingback

Pingback from bot.moldseo.info

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

bot.moldseo.info | Reply

Add comment


(Will show your Gravatar icon)

  Country flag

biuquote
  • Comment
  • Preview
Loading



About Me

mage.axd?picture=2012%2f4%2fbert.jpg

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

PSNetwork


bertoncaffeine

Playing
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