Tab container styles

Can we change tab containers look and feel by overriding its CSS ,

Yes of course :)

Look in the Tabs.css file in the folder where you've installed the AjaxControlToolkit.

These CSS classes can you override in your own CSS file (new is the name of the style I choose, then you specify the attribute CssClass="ajax__tab_new" to override the CSS style):

/* inactive tab */
.ajax__tab_new .ajax__tab_header
.ajax__tab_new .ajax__tab_outer
.ajax__tab_new .ajax__tab_inner
.ajax__tab_new .ajax__tab_tab
/* active tab */
.ajax__tab_new .ajax__tab_active .ajax__tab_outer
.ajax__tab_new .ajax__tab_active .ajax__tab_inner
.ajax__tab_new .ajax__tab_active .ajax__tab_tab
/* tab hover */
.ajax__tab_new .ajax__tab_hover .ajax__tab_outer
.ajax__tab_new .ajax__tab_hover .ajax__tab_inner
.ajax__tab_new .ajax__tab_hover .ajax__tab_tab
/* tab's body */
.ajax__tab_new .ajax__tab_body

Kind regards,

sbogus.

I tried that and I still get the default tabs everytime.

Here is my stylesheet:

.MyTabStyle .ajax__tab_header{font-family:verdana,tahoma,helvetica;font-size:3px;background:url(../images/tab-line.gif) repeat-x bottom;}
.MyTabStyle .ajax__tab_outer{padding-right:4px;background:url(../images/tab-active-right.gif) no-repeat right;height:21px;}
.MyTabStyle .ajax__tab_inner{padding-right:3px;background:url(../images/tab-active-left.gif) no-repeat;}
.MyTabStyle .ajax__tab_tab{height:13px;padding:4px;margin:0;background:url(../images/tab-active.gif) repeat-x;}

.MyTabStyle .ajax__tab_hover .ajax__tab_outer{background: url(../images/tab-active-right.gif) no-repeat left top;}
.MyTabStyle .ajax__tab_hover .ajax__tab_inner{background: url(../images/tab-active-left.gif) no-repeat left top;}
.MyTabStyle .ajax__tab_hover .ajax__tab_tab{background: url(../images/tab-active.gif) repeat-x botom;}

.MyTabStyle .ajax__tab_active .ajax__tab_outer{background: url(../images/tab-active-right.gif) no-repeat left top;}
.MyTabStyle .ajax__tab_active .ajax__tab_inner{background: url(../images/tab-active-left.gif) no-repeat left top;}
.MyTabStyle .ajax__tab_active .ajax__tab_tab{background: url(../images/tab-active.gif) repeat-x botom;}

.MyTabStyle .ajax__tab_body {font-family:verdana,tahoma,helvetica;font-size:10pt;border:1px solid #999999;border-top:0;padding:8px;background-color:#ffffff;}

This is pretty much copied from the Tabs.css file just to see if everything worked and I still get the default tabs. What am I missing something? Now the tabs demo says that it can be done this way.

Yes you are right, you are on correct way. I had similar issue with customization and I found that I have issue with my development enviroment.

Issue was that I was running on Windows Vista with VS .NET 2005. If you have the same enviroment don't use debug from VS. Just deploy your application to IIS and try it from there. It worked on my machine.

ricco831:

I tried that and I still get the default tabs everytime.

Have a look at thisblog entry, it discusses "Theming" the tabs

-Damien