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

Tab Controls and CssClass Not Working

I have been working with the tab Control for two days with no success at overridding the default styles for the tabs. I have copied the styles from the tabs.css file located in the toolkit, and have modified the hover, active and selected styles that I want to modiy. I have included the new css sheet into my application and included the CssClass reference in the file code. when I run the page or site to debug I get the default images and actions. Could anyone tell me what is wrong. I'm including the source code below:

ASP file

<%@dotnet.itags.org.PageLanguage="VB"AutoEventWireup="true"CodeFile="Default.aspx.vb"Inherits="_Default" %>

<%@dotnet.itags.org.RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="cc1" %>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

<title>Untitled Page</title>

<linkhref="Tabs.css"rel="stylesheet"type="text/css"/>

</head>

<body>

<formid="form1"runat="server">

<asp:ScriptManagerID="ScriptManager1"runat="server"/>

<div>

<cc1:TabContainerID="TabContainer1"runat="server">

<cc1:TabPanelID="TabPanel1"runat="server"CssClass="ajax__tab_tab1">

<HeaderTemplate>DashBoard</HeaderTemplate>

</cc1:TabPanel>

</cc1:TabContainer>

</div>

</form>

</body>

</html>

Style sheet

/* 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}

/* tab1 theme */

.ajax__tab_tab1.ajax__tab_header {font-family:verdana,tahoma,helvetica;font-size:11px;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-line.gif")%>)repeat-xbottom;}

.ajax__tab_tab1.ajax__tab_outer {padding-right:4px;background:url("Images\green_gradient_3.gif")no-repeatright;height:21px;}

.ajax__tab_tab1.ajax__tab_inner {padding-left:3px;background:url("Images\green_gradient_1.gif")no-repeat;}

.ajax__tab_tab1.ajax__tab_tab {height:13px;padding:4px;margin:0;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab.gif")%>)repeat-x;}

.ajax__tab_tab1.ajax__tab_hover.ajax__tab_outer {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover-right.gif")%>)no-repeatright;}

.ajax__tab_tab1.ajax__tab_hover.ajax__tab_inner {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover-left.gif")%>)no-repeat;}

.ajax__tab_tab1.ajax__tab_hover.ajax__tab_tab {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover.gif")%>)repeat-x;}

.ajax__tab_tab1.ajax__tab_active.ajax__tab_outer {background:url("Images\green_gradient_4.gif")no-repeatright;}

.ajax__tab_tab1.ajax__tab_active.ajax__tab_inner {background:url("Images\green_gradient_3.gif")no-repeat;}

.ajax__tab_tab1.ajax__tab_active.ajax__tab_tab {background:url("Images\green_gradient_1.gif")repeat-x;}

.ajax__tab_tab1.ajax__tab_body {font-family:verdana,tahoma,helvetica;font-size:10pt;border:1pxsolid#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}

thank you,

kkof

You should apply the CssClass attribute to the TabContainer control rather than to the TabPanel element.

Kind regards,

sbogus.

Thanks sbogus, placing the CssClass on the TabContainer corrected the issues I was having.

Tab Panel - Gap between tab and body and style problems

Hi guys.

I am using the AJAX tab panel control and applying custom styles to it. I'm having a problem in that I cannot seem to get the "default" style for the tabs to look right.

I am trying to do something similar to the default style of the tab, whereby the top border changes color when the user hovers over a tab. My problem is two fold:

Firstly, there is a small gap between the tab itself and the content displayed in the body of the panel. How do I get rid of that space? I've tried setting padding and spacing on just about all the styles they mention on the ajax sample website, but I'm not having any luck getting rid of it.

Secondly, this is the style for my outer border:

1.TabPanel .ajax__tab_outer
2{
3background-color: #FFFFFF;
4border-left: solid1px #666666;
5border-top: solid1px #666666;
6border-right: solid1px #666666;
7border-bottom: solid0px #FFFFFF;
8margin-bottom:0px;
9margin-left:2px;
10padding:2px;
11}

And this is the style that has to be applied when the user hovers over a tab:

1.TabPanel .ajax__tab_hover
2{
3background-color: #FFFFFF;
4border-left: solid1px #666666;
5border-top: solid1px #666666;
6border-right: solid1px #666666;
7border-bottom: solid0px #FFFFFF;
8margin-bottom:0px;
9margin-left:2px;
10padding:2px;
11}

What's happening with this setting though is that ANOTHER border is put around the tab, so it looks COMPLETELY wonky.

Please please please help me! I have to have this done tomorrow and it looks TERRIBLE at the moment.

Thanks everyone,
Johann.

Seehttp://blogs.visoftinc.com/archive/2007/09/26/ajax-control-toolkit-tab-control-themes.aspx for a tab theming example.

-Damien