tabcontainer tabpanel css in AJAX toolkit

see if this is useful

http://community.bennettadelson.com/blogs/rbuckton/archive/2007/02/02/Skinning-model-for-Calendar-and-Tabs-in-Ajax-Control-Toolkit.aspx

can i just change de header color overloading the CSS charged?

copy the style given below in your page.This is same as .ajax__tab_xp style only difference is that image urls are changed.

<style>
.ajax__tab_test .ajax__tab_header{font-family:verdana,tahoma,helvetica;font-size:11px;background:url(../Images/Tabs/tab-line.gif)repeat-x bottom;}
.ajax__tab_test .ajax__tab_outer {padding-right:4px;background:url(../Images/Tabs/tab-right.gif) no-repeat right;height:21px;}
.ajax__tab_test .ajax__tab_inner {padding-left:3px;background:url(../Images/Tabs/tab-left.gif) no-repeat;}
.ajax__tab_test .ajax__tab_tab {height:13px;padding:4px;margin:0;background:url(../Images/Tabs/tab.gif) repeat-x;}
.ajax__tab_test .ajax__tab_hover .ajax__tab_outer {background:url(../Images/Tabs/tab-hover-right.gif) no-repeat right;}
.ajax__tab_test .ajax__tab_hover .ajax__tab_inner {background:url(../Images/Tabs/tab-hover-left.gif) no-repeat;}
.ajax__tab_test .ajax__tab_hover .ajax__tab_tab {background:url(../Images/Tabs/tab-hover.gif) repeat-x;}
.ajax__tab_test .ajax__tab_active .ajax__tab_outer {background:url(../Images/Tabs/tab-active-right.gif) no-repeat right;}
.ajax__tab_test .ajax__tab_active .ajax__tab_inner {background:url(../Images/Tabs/tab-active-left.gif) no-repeat;}
.ajax__tab_test .ajax__tab_active .ajax__tab_tab {background:url(../Images/Tabs/tab-active.gif) repeat-x;}
.ajax__tab_test .ajax__tab_body{font-family:verdana,tahoma,helvetica;font-size:10pt;border:1px solid#999999;border-top:0;padding:8px;background-color:#ffffff;}
</style>

Ihave copied the actual images used within theDLL into \images\Tabs folder you can get these images fromAjaxControlToolkit source download(path withing source isAjaxControlToolkit\AjaxControlToolkit\Tabs). Use some resourceextraction tool and extract images directly from DLL. Or simply createdyour on images.

Tomake the header blink while the tab is active make tab-active-right.gif,tab-active-left.gif,tab-active.gif ananimated blinking image and use that image.Similiarly for other imagesalso.

Once you have done that make CSSClass attribute of TabContainer ="ajax__tab_test"

copy the style given below in your page.This is same as .ajax__tab_xp style only difference is that image urls are changed.

<style>
.ajax__tab_test .ajax__tab_header{font-family:verdana,tahoma,helvetica;font-size:11px;background:url(../Images/Tabs/tab-line.gif)repeat-x bottom;}
.ajax__tab_test .ajax__tab_outer {padding-right:4px;background:url(../Images/Tabs/tab-right.gif) no-repeat right;height:21px;}
.ajax__tab_test .ajax__tab_inner {padding-left:3px;background:url(../Images/Tabs/tab-left.gif) no-repeat;}
.ajax__tab_test .ajax__tab_tab {height:13px;padding:4px;margin:0;background:url(../Images/Tabs/tab.gif) repeat-x;}
.ajax__tab_test .ajax__tab_hover .ajax__tab_outer {background:url(../Images/Tabs/tab-hover-right.gif) no-repeat right;}
.ajax__tab_test .ajax__tab_hover .ajax__tab_inner {background:url(../Images/Tabs/tab-hover-left.gif) no-repeat;}
.ajax__tab_test .ajax__tab_hover .ajax__tab_tab {background:url(../Images/Tabs/tab-hover.gif) repeat-x;}
.ajax__tab_test .ajax__tab_active .ajax__tab_outer {background:url(../Images/Tabs/tab-active-right.gif) no-repeat right;}
.ajax__tab_test .ajax__tab_active .ajax__tab_inner {background:url(../Images/Tabs/tab-active-left.gif) no-repeat;}
.ajax__tab_test .ajax__tab_active .ajax__tab_tab {background:url(../Images/Tabs/tab-active.gif) repeat-x;}
.ajax__tab_test .ajax__tab_body{font-family:verdana,tahoma,helvetica;font-size:10pt;border:1px solid#999999;border-top:0;padding:8px;background-color:#ffffff;}
</style>

Ihave copied the actual images used within theDLL into \images\Tabs folder you can get these images fromAjaxControlToolkit source download(path withing source isAjaxControlToolkit\AjaxControlToolkit\Tabs). Use some resourceextraction tool and extract images directly from DLL. Or simply createdyour on images.

Tomake the header blink while the tab is active make tab-active-right.gif,tab-active-left.gif,tab-active.gif ananimated blinking image and use that image.Similiarly for other imagesalso.

Once you have done that make CSSClass attribute of TabContainer ="ajax__tab_test"