This article explains us how to give own css style for Ajax TabContainer Control.
1. Create new ASP.NET AjaxEnabled Website.
2. Drag and Drop TabContainer Control from Toolkit to web form.
3. Drag and Drop TabPanel Control from Toolkit to TabContainer.And Drop Label, Textbox and Button Controls to TabPanels, like this
<cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0">
<cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="Tab 1">
<ContentTemplate>
<asp:TextBox ID="TextBox1"
runat="server"></asp:TextBox>
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="TabPanel2"
runat="server"
HeaderText="Tab
2">
<ContentTemplate>
<asp:Label ID="Label1" runat="server"
Text="Label"></asp:Label>
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="TabPanel3" runat="server" HeaderText="Tab 3">
<ContentTemplate>
<asp:Button ID="Button1"
runat="server"
Text="Button1"
/>
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>
4. Now create a new Style Sheet with the following css code.
/*Header*/
.Tab .ajax__tab_header
{
color: #4682b4;
font-family:Calibri;
font-size: 14px;
font-weight: bold;
background-color: #ffffff;
margin-left: 0px;
}
/*Body*/
.Tab .ajax__tab_body
{
border:1px solid #b4cbdf;
padding-top:0px;
}
/*Tab Active*/
.Tab .ajax__tab_active .ajax__tab_tab
{
color: #ffffff;
background:url("../../tab_active.gif")
repeat-x;
height:20px;
}
.Tab .ajax__tab_active .ajax__tab_inner
{
color: #ffffff;
background:url("../../tab_left_active.gif")
no-repeat left;
padding-left:10px;
}
.Tab .ajax__tab_active .ajax__tab_outer
{
color: #ffffff;
background:url("../../tab_right_active.gif")
no-repeat right;
padding-right:6px;
}
/*Tab Hover*/
.Tab .ajax__tab_hover .ajax__tab_tab
{
color: #000000;
background:url("../../tab_hover.gif")
repeat-x;
height:20px;
}
.Tab .ajax__tab_hover .ajax__tab_inner
{
color: #000000;
background:url("../../tab_left_hover.gif")
no-repeat left;
padding-left:10px;
}
.Tab .ajax__tab_hover .ajax__tab_outer
{
color: #000000;
background:url("../../tab_right_hover.gif")
no-repeat right;
padding-right:6px;
}
/*Tab Inactive*/
.Tab .ajax__tab_tab
{
color: #666666;
background:url("../../tab_Inactive.gif")
repeat-x;
height:20px;
}
.Tab .ajax__tab_inner
{
color: #666666;
background:url("../../tab_left_inactive.gif")
no-repeat left;
padding-left:10px;
}
.Tab .ajax__tab_outer
{
color: #666666;
background:url("../../tab_right_inactive.gif")
no-repeat right;
padding-right:6px;
margin-right: 2px;
}
5. Now add CssClass="Tab" to TabContainer like this
<cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" CssClass="Tab" >
Download Images here,
Finally TabContainer looks like