How can I override the default "TAB" look on the TabControl.

Basically, I'm the designer and trying to customize this tab control. I don't want the default "style" look and need to customize it to my liking. There really isn't much information on this. I do know how to create the tab options as a headertemplate. I just don't know how to TURN off the XP default tab. Can anyone lend any assistance?

I believe I have figured this out - Thanks to an external web site. I'm posting the solution here so others may benefit from it.

Basically I found out that the default CSS styles are listed below: The tab control uses CSS inheritance to set the cascade. So if you change the

<ajaxToolkit:TabContainerrunat="server"Height="300px"width="750px"ScrollBars="Vertical"CssClass="ajax__tab_xp"> to the following and modify the class value you can take control of the CSS in an external style sheet. The one problem is utilizing the embedded images.

/*AJAX.NET TAB CONTROL */.ajax__tab_xp .ajax__tab_header { font-family:verdana,tahoma,helvetica; font-size:11px; background: url(AjaxControlToolkit.Tabs.tab-line.gif")%>) repeat-x bottom;}.ajax__tab_xp .ajax__tab_outer { padding-right:4px; background: url(AjaxControlToolkit.Tabs.tab-right.gif")%>) no-repeat right; height:21px;}.ajax__tab_xp .ajax__tab_inner { padding-left:3px; background: url(AjaxControlToolkit.Tabs.tab-left.gif")%>) no-repeat;}.ajax__tab_xp .ajax__tab_tab { height:13px; padding:4px; margin:0; background: url(AjaxControlToolkit.Tabs.tab.gif")%>) repeat-x;}.ajax__tab_xp .ajax__tab_hover .ajax__tab_outer { background: url(AjaxControlToolkit.Tabs.tab-hover-right.gif")%>) no-repeat right;}.ajax__tab_xp .ajax__tab_hover .ajax__tab_inner { background: url(AjaxControlToolkit.Tabs.tab-hover-left.gif")%>) no-repeat;}.ajax__tab_xp .ajax__tab_hover .ajax__tab_tab { background: url(AjaxControlToolkit.Tabs.tab-hover.gif")%>) repeat-x;}.ajax__tab_xp .ajax__tab_active .ajax__tab_outer { background: url(AjaxControlToolkit.Tabs.tab-active-right.gif")%>) no-repeat right;}.ajax__tab_xp .ajax__tab_active .ajax__tab_inner { background: url(AjaxControlToolkit.Tabs.tab-active-left.gif")%>) no-repeat;}.ajax__tab_xp .ajax__tab_active .ajax__tab_tab { background: url(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;}

Hi,

Do you know if there any sample css styles for the tabs out there? I am not very good with css and was wondering if I could look at some samples.

Thanks