How to Style Tab Ajax Control Toolkit

If you’ll ask all the ASP.Net developers on what control they want Microsoft to create and include freely, I bet that Tab Control is in the top 5 list. Well, now our dreams finally came true. With the released ASP.Net AJAX last January 2007, the ASP.Net AJAX Team included 4 new controls that are not in their RC1 and Tab Control is one of them (others are AutoComplete, Calendar, MaskedEdit).

The easiest way to create new styles is to copy that of the ajax__tab_xp which is the default style that you typically see.

1. Download the AjaxControlToolkit.
2. Open the .ZIP archive and extract the tabs.css file, and the tab images - get all 10 of the .gif files that start with "tab".
3. Place the .gif files into a folder in your website, then right-click that folder in Solution Explorer and "Add Existing item..." for each image file.
4. Open the "tabs.css" file and Copy the entire XP style. Paste it into a .CSS file in your project, such as the one you are already using.
5. In the .CSS file in your project, edit this first part of each entry for the tab control: .ajax__tab_xp . You want to change it slightly, such as to .ajax__tab_xp2 - that is, add the number 2 to the end. Do this for each entry in the XP style; do it only for the first item on each line.

6. Go through each entry that contains a URL reference to a .gif file, and edit it to point to the .gif files you added to your project in step 3. If you placed them into a folder called "images" in your website's root folder, the reference should look like this background:url(../images/tab.gif).

The last thing we need to do is to add the custom CssClass to the Tab Container:

<ajaxcontroltoolkit:tabcontainer id="tabContainer" runat="server" height="300" cssclass=".ajax_tab_xp2">