inventive title

Skinning model for Calendar and Tabs in Ajax Control Toolkit

Note: This article was originally posted on 2/2/2007. The original host of the article is no longer available.  Due to the high demand for the content I am reproducing it in its entirety:

About a week ago we published a new version of the Ajax Control Toolkit to line up with the RTW bits of ASP.NET AJAX 1.0. This release included some new features including the Calendar behavior and the TabContainer control.  These two features utilize a CSS skinning model that is designed to be compatible with all of today's major browsers (IE 6/7, FireFox, Opera, Safari), however documentation around how the skinning model works has not yet been included in the Toolkit.

Skinning Model

The new skinning model uses CSS classes and child selectors to apply layout to the elements created by Calendar and Tabs.  This allows us to use CSS to define the visual representation for the controls and allow control implementers to modify the appearance.  Each control has a number of pre-defined skinnable elements which have specific class names defined.  A set of basic required CSS attributes are placed inside of a CSS file embedded as a WebResource inside the toolkit assembly.  In addition to the required attributes, a number of other attributes which define the default layout of the control are also included.  Each control contains a default "skin" which is basically a CSS class name that is applied higher in the DOM than the skinnable elements.  Using CSS child selectors you can override the default style and define your own custom style.

CalendarBehavior/Extender

The following table lists the built-in CSS class names applied to the elements within the calendar:

The default style is called ".ajax__calendar" and uses the following CSS:

.ajax__calendar .ajax__calendar_container {
    border:1px solid #646464;
    background-color:#ffffff;
    color:#000000;
}
.ajax__calendar .ajax__calendar_footer {
    border-top:1px solid #f5f5f5;
} 
.ajax__calendar .ajax__calendar_dayname {
    border-bottom:1px solid #f5f5f5;
} 
.ajax__calendar .ajax__calendar_day {
    border:1px solid #ffffff;
} 
.ajax__calendar .ajax__calendar_month {
    border:1px solid #ffffff;
} 
.ajax__calendar .ajax__calendar_year {
    border:1px solid #ffffff;
} 
.ajax__calendar .ajax__calendar_active .ajax__calendar_day {
    background-color:#edf9ff;
    border-color:#0066cc;
    color:#0066cc;
} 
.ajax__calendar .ajax__calendar_active .ajax__calendar_month {
    background-color:#edf9ff;
    border-color:#0066cc;
    color:#0066cc;
} 
.ajax__calendar .ajax__calendar_active .ajax__calendar_year {
    background-color:#edf9ff;
    border-color:#0066cc;
    color:#0066cc;
} 
.ajax__calendar .ajax__calendar_other .ajax__calendar_day {
    background-color:#ffffff; 
    border-color:#ffffff;
    color:#646464;
} 
.ajax__calendar .ajax__calendar_other .ajax__calendar_year {
    background-color:#ffffff;
    border-color:#ffffff;
    color:#646464;
} 
.ajax__calendar .ajax__calendar_hover .ajax__calendar_day {
    background-color:#edf9ff;
    border-color:#daf2fc;
    color:#0066cc;
} 
.ajax__calendar .ajax__calendar_hover .ajax__calendar_month {
    background-color:#edf9ff;
    border-color:#daf2fc;
    color:#0066cc;
} 
.ajax__calendar .ajax__calendar_hover .ajax__calendar_year {
    background-color:#edf9ff;
    border-color:#daf2fc;
    color:#0066cc;
} 
.ajax__calendar .ajax__calendar_hover .ajax__calendar_title {
    color:#0066cc;
} 
.ajax__calendar .ajax__calendar_hover .ajax__calendar_today {
    color:#0066cc;
} 

To create your own skin for calendar, copy the above CSS and change the .ajax__calendar skin class name to your own.  Finally, set this new skin class name to the CssClass property of the CalendarBehavior.

TabContainer

The following table lists the built-in CSS class names applied to the elements within TabContainer:

The default style is called ".ajax__tab_xp" and uses the following CSS:

.ajax__tab_xp .ajax__tab_header {
    font-family:verdana,tahoma,helvetica;
    font-size:11px;
    background:
        url(<%=WebResource("AjaxControlToolkit.Tabs.tab-line.gif")%>) 
        repeat-x 
        bottom;
}
.ajax__tab_xp .ajax__tab_outer {
    padding-right:4px;
    background:
        url(<%=WebResource("AjaxControlToolkit.Tabs.tab-right.gif")%>) 
        no-repeat 
        right;
    height:21px;
}
.ajax__tab_xp .ajax__tab_inner {
    padding-left:3px;
    background:
        url(<%=WebResource("AjaxControlToolkit.Tabs.tab-left.gif")%>) 
        no-repeat;
}
.ajax__tab_xp .ajax__tab_tab {
    height:13px;
    padding:4px;
    margin:0;
    background:
        url(<%=WebResource("AjaxControlToolkit.Tabs.tab.gif")%>) 
        repeat-x;
}
.ajax__tab_xp .ajax__tab_hover .ajax__tab_outer {
    background:
        url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover-right.gif")%>) 
        no-repeat 
        right;
}
.ajax__tab_xp .ajax__tab_hover .ajax__tab_inner {
    background:
        url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover-left.gif")%>) 
        no-repeat;
}
.ajax__tab_xp .ajax__tab_hover .ajax__tab_tab {
    background:
        url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover.gif")%>) 
        repeat-x;
}
.ajax__tab_xp .ajax__tab_active .ajax__tab_outer {
    background:
        url(<%=WebResource("AjaxControlToolkit.Tabs.tab-active-right.gif")%>) 
        no-repeat 
        right;
}
.ajax__tab_xp .ajax__tab_active .ajax__tab_inner {
    background:
        url(<%=WebResource("AjaxControlToolkit.Tabs.tab-active-left.gif")%>)
        no-repeat;
}
.ajax__tab_xp .ajax__tab_active .ajax__tab_tab {

    background:
        url(<%=WebResource("AjaxControlToolkit.Tabs.tab-active.gif")%>)
        repeat-x;
}
.ajax__tab_xp .ajax__tab_body {
    font-family:verdana,tahoma,helvetica;
    font-size:10pt;
    border:1px solid #999999;
    border-top:0;
    padding:8px;
    background-color:#ffffff;
}

To create your own skin for the tabs, copy the above CSS and change the .ajax__tab_xp skin class name to your own. Finally, set this new skin class name to the CssClass property of the TabContainer.