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:

Class	Children	Attributes
.ajax__calendar_container The outer rectangular container that supplies the border around the calendar element.	.ajax__calendar_header.ajax__calendar_body.ajax__calendar_footer	border-* background-* color font-*
.ajax__calendar_header A container element that holds the next and previous arrows and the title of the current view.	.ajax__calendar_prev.ajax__calendar_title.ajax__calendar_next	background-*color font-*
.ajax__calendar_prev An element that displays the arrow to view the previous set of data in the view (previous month/year/decade).	none	background-image
.ajax__calendar_title An element that displays the title of the current view (month name, year, decade)	none	color font-*
.ajax__calendar_next An element that displays the arrow to view the previous set of data in the view (previous month/year/decade)	none
.ajax__calendar_body A container element that holds the days, months, and years panes. Also provides a fixed rectangle with hidden overflow that is used for transitioning between views (next/previous month, or days/months/years)	.ajax__calendar_days.ajax__calendar_months.ajax__calendar_years	background-* color-* font-*
.ajax__calendar_days A container element that holds the layout for the days in a month.	.ajax__calendar_dayname.ajax__calendar_day	background-* color font-*
.ajax__calendar_dayname An element that displays the short name of the day of the week.	none	background-* color font-*
.ajax__calendar_day An element that displays the day of the month.	none	background-* color font-* border-*
.ajax__calendar_months A container element that holds the layout for the months in a year.	.ajax__calendar_month	background-* color font-*
.ajax__calendar_month An element that displays the month of the year.	none	background-* color font-* border-*
.ajax__calendar_years A container element that holds the layout for the years in a decade.	.ajax__calendar_year	background-* color font-*
.ajax__calendar_year An element that displays the year in a decade.	none	background-* color font-* border-*
.ajax__calendar_footer A container element that holds the current date	.ajax__calendar_today	background-* color font-*
.ajax__calendar_today An element that displays the current date	none	background-* color font-*
.ajax__calendar_hover This is applied to an element in the DOM above a day, month or year and is used to apply CSS attributes that show a hover state.	.ajax__calendar_day .ajax__calendar_month .ajax__calendar_year	background-* color font-* border-*
.ajax__calendar_active This is applied to an element in the DOM above a day, month or year and is used to apply CSS attributes that show the currently selected value.	.ajax__calendar_day .ajax__calendar_month .ajax__calendar_year	background-* color font-* border-*
.ajax__calendar_other This is applied to an element in the DOM above a day or year that is outside of the current view (day not in the visible month, year not in the visible decade).	.ajax__calendar_day .ajax__calendar_year	background-* color font-* border-*

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:

Class	Children	Attributes
.ajax__tab_header A container element that wraps all of the tabs at the top of the TabContainer.	.ajax__tab_outer	border-* background-* color font-*
.ajax__tab_outer An outer element of a tab, often used to set the left-side background image of the tab.	.ajax__tab_inner	border-* background-* color font-*
.ajax__tab_inner An inner element of a tab, often used to set the right-side image of the tab	.ajax__tab_tab	border-* background-* color font-*
.ajax__tab_tab An element of the tab that contains the text content.	none	border-* background-* color font-*
.ajax__tab_body A container element that wraps the area where a TabPanel is displayed.	none	border-* background-* color font-*
.ajax__tab_hover This is applied to a tab when the mouse is hovering over.	.ajax__tab_outer	border-* background-* color font-*
.ajax__tab_active This is applied to a tab when it is the currently selected tab.	.ajax__tab_outer	border-* background-* color font-*

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.

Comments

• Anonymous
  August 24, 2007
  This article was originally posted on 2/2/2007. The original host of the article is no longer available.

• Anonymous
  August 24, 2007
  This article was originally posted on 2/2/2007. The original host of the article is no longer available

• Anonymous
  September 17, 2007
  I am trying to skin the tab controls.  When I used the above styles I lost the styles that define the tabs and all you see is text (rather than the expected visual appearance of tabs with text labels that contain the names of my tabs).  My guess is that things have changed so the styles for the tabs no longer work.  I did play around witht the styles to make sure that those definitions were being applied and I was able to change font size and see it correctly change the font size of the tabs.  How can I get the current definitions of those styles?  How did you get them for the post? -Russ

• Anonymous
  September 17, 2007
  I have figured out the answers to my questions above from help from another post on the same topic ( http://forums.asp.net/rss.aspx?ForumID=1022&PostID=1742827 ).  My problem was that WebResource() was not able to return images from the installation directory of the Toolkit.  I followed the instruction from the other post and fixed my problem and I also found out where the original toolkit style definitions were as well ( they were located in "C:AjaxControlToolkit-Framework3.5AjaxControlToolkitTabs" on my machine) -Russ

• Anonymous
  February 27, 2008
  Awesome ruwill. That post solved my problem too.

• Anonymous
  April 29, 2008
  I got all my styles working, but the css still applies the hover style over an active tab which destorts the theme. Does anybody know how to stop an active tab from having a mouseover hover? Thanks, Phil

• Anonymous
  May 08, 2008
  根据：http://www.cnblogs.com/DonLiang/archive/2007/05/08/739078.html

• Anonymous
  November 03, 2008
  Sweet! I was having troubles with the horizontal scroll bar showing up but being inactive. The css fixed everything! Thanks! just add overflow:auto;  

• Anonymous
  May 21, 2009
  I've found new one, maybe you will be interested in http://www.virtosoftware.com/sharepoint-web-part-calendar-day-view