Matt Berseth

I was browsing the YUI documentation and I came across a very nice looking tab control.  I thought it would be interesting to create a similar styled theme for the AjaxControlToolkit's TabContainer control.  I don't mind the default XP-themed TabContainer, but I think the XP style tab's are getting a little bit dated.  I had not previously created a theme for a TabContainer, so I had no idea what to expect.  It turns out it was very easy to do.  Below are the steps I followed ...

Live Demo | Download Code

[Update 10/1/2007] :

• Updated CSS so it would work with IE6
• Check out here for additional TabContainer theme
• Check out here for an XP without the roll-over flicker

Read the 'Tab Theming' Section of the TabContainer's Documentation

Because I haven't created a custom theme for this control yet, I needed to do a little research before getting started.  I read through the paragraph on the toolkit's sample site that explains how the TabContainer control can be themed.  It turns out theming is pretty simple - it boils down to understanding which HTML element's the following 7 css classes are applied to*.

* Be careful, I think there is a small bug in this documentation.  The documentation for the .ajax__tab_outer class states that it is often used to set to left-side background image of the tab.  I think .ajax__tab_outer is used to set the right-hand side image while .ajax__tab_inner is used to set the left-hand image.  Check out the XP themed css for these classes.  Notice the tab_outer class is assigned the tab-right image and the tab-left is assigned to the tab_inner class.  Also notice how the images are aligned.

.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;
}

Use the IE Developer Toolbar to View the XP Themed TabContianer's HTML Elements

Next, I used the IE Developer Toolbar so I could see how these classes are used for styling by the default XP theme.  If you haven't used the toolbar, I highly recommend checking it out.  It is one of those tools where once you start using it you wonder how you ever got along without it.  Below are screen shots of a very simple tab control that uses the default XP style theme.  In each figure, the area shaded in blue is the element the corresponding css class is assigned to. 

Use the IE Developer Toolbar to get the Color Codes and Image's from Yahoo's Demo Site

After I completed my research on how theming works with the TabContainer, I started the task of figuring out what style attributes are used on Yahoo!'s YUI TabView demo page.  Again, I used the IE Developer Toolbar to drill into the various DOM Elements so I could get the exact hex-codes for various colors and images used by the control.  Below is a screen shot of the toolbar tool.  On the left pane is a review that displays the DOM for the page being viewed.  The right pane displays the values of all of the style attributes for the selected element.

Create the YUI TabView CSS Classes

Now that I have determined which style attributes I need, I can start creating the stylesheet using the well known TabContainer classes described above.  According to the TabContainer's theme documentation, the style classes need to be prefixed with the css class that corresponds to our custom theme.  This way, the TabContainer can be themed by setting the value of the CssClass property to the name of our custom theme.  So for our example, we will define the above mentioned classes under the .ajax__tab_yuitabview-theme class like so ...

/* ajax__tab_yuitabview-theme theme (img/yui/sprite.png) */
.ajax__tab_yuitabview-theme .ajax__tab_header 
{
    font-family:arial,helvetica,clean,sans-serif;
    font-size:small;
    border-bottom:solid 5px #2647a0;
}
.ajax__tab_yuitabview-theme .ajax__tab_header .ajax__tab_outer 
{
    background:url(img/yui/sprite.png) #d8d8d8 repeat-x;
    margin:0px 0.16em 0px 0px;
    padding:1px 0px 1px 0px;
    vertical-align:bottom;
    border:solid 1px #a3a3a3;
    border-bottom-width:0px;
}
.ajax__tab_yuitabview-theme .ajax__tab_header .ajax__tab_tab
{    
    color:#000;
    padding:0.35em 0.75em;    
    margin-right:0.01em;
}
.ajax__tab_yuitabview-theme .ajax__tab_hover .ajax__tab_outer 
{
    background: url(img/yui/sprite.png) #bfdaff repeat-x left -1300px;
}
.ajax__tab_yuitabview-theme .ajax__tab_active .ajax__tab_tab 
{
    color:#fff;
}
.ajax__tab_yuitabview-theme .ajax__tab_active .ajax__tab_outer
{
    background:url(img/yui/sprite.png) #2647a0 repeat-x left -1400px;
}
.ajax__tab_yuitabview-theme .ajax__tab_body 
{
    font-family:verdana,tahoma,helvetica;
    font-size:10pt;
    padding:0.25em 0.5em;
    background-color:#edf5ff;    
    border:solid 1px #808080;
    border-top-width:0px;
}

Update your TabContainer's to use the Theme

After the classes for the theme have been defined, they can easily be applied to the TabContainer by setting the CssClass attribute of the control to the name of the theme like so ...

<ajaxToolkit:TabContainer runat="server" CssClass="ajax__tab_yuitabview-theme" />

That's it.  Enjoy!