Example cssfile for Tab Control ?

Does anyone have an example css file or a definition of what fields control what on the control.

Every post on this subject, including the Ajax Control Toilkit samples points to the link below, which does not work anymore. (I contacted the company but no reply so far).

....or does anyone have a copy of this blog ??

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

Thanks for any help.

KeithT

Hi Keith,

May be you can download the source file for the Control Toolkit, and a full list is available in the /tabs/Tabs.css file.

Hope this helps.

Thanks Raymond,

The example file in the source is a useful start.

For people doing this don't forget to override the .ajax__tab_xp default in both the tab container and the tab panels, otherwise the styles are not applied.

Regards

KeithT

Hello Keith,

Could please explain how to override the .ajax__tab_xp class.

Also, does anyone know how the Tab styles are applied once I add the Tab.css to my Themes folder.

Thanks

Look, this is the default css for tabs:

/* default layout */.ajax__tab_default .ajax__tab_header {white-space:nowrap;}.ajax__tab_default .ajax__tab_outer {display:-moz-inline-box;display:inline-block}.ajax__tab_default .ajax__tab_inner {display:-moz-inline-box;display:inline-block}.ajax__tab_default .ajax__tab_tab {margin-right:4px;overflow:hidden;text-align:center;cursor:pointer;display:-moz-inline-box;display:inline-block}/* xp theme */.ajax__tab_xp .ajax__tab_header {font-family:verdana,tahoma,helvetica;font-size:11px;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-line.gif")%>) repeat-x bottom;}.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;}.ajax__tab_xp .ajax__tab_tab {height:13px;padding:4px;margin:0;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab.gif")%>) repeat-x;}.ajax__tab_xp .ajax__tab_hover .ajax__tab_outer {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover-right.gif")%>) no-repeat right;}.ajax__tab_xp .ajax__tab_hover .ajax__tab_inner {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover-left.gif")%>) no-repeat;}.ajax__tab_xp .ajax__tab_hover .ajax__tab_tab {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover.gif")%>) repeat-x;}.ajax__tab_xp .ajax__tab_active .ajax__tab_outer {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-active-right.gif")%>) no-repeat right;}.ajax__tab_xp .ajax__tab_active .ajax__tab_inner {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-active-left.gif")%>) no-repeat;}.ajax__tab_xp .ajax__tab_active .ajax__tab_tab {background:url(<%=WebResource("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;}/* scrolling */.ajax__scroll_horiz {overflow-x:scroll;}.ajax__scroll_vert {overflow-y:scroll;}.ajax__scroll_both {overflow:scroll}.ajax__scroll_auto {overflow:auto}

Is a file that you can get from the AjaxControlToolkit\Tabs (where you instaled ASP AJAX Extensions). Also, you can get there all the images that the default theming uses.

So, you just need to changecopy that code in your page CSS sheet and change "ajax__tab_xp" for "myCustomstyle", and put into TabContainer properties CSsClass=myCustomstyle.

Notice that for the background image url is using<%=WebResource("AjaxControlToolkit.Tabs.tab-right.gif")%>, so you have to change this to your images path.

Hope it helps