CSS Style Sheet for Ajax TabContainer Control in ASP.NET 2.0


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, 

tab_left_active.gif tab_active.gif tab_right_active.gif tab_left_hover.gif tab_hover.gif tab_right_hover.gif tab_left_inactive.gif tab_Inactive.gif tab_right_inactive.gif

Finally TabContainer looks like

tab1.gif

Next Recommended Readings