You can change the look and feel of ASP.Net AJAX Tab extender control by overriding the CSS class names and styles. AJAX Control Toolkit has a predefined set of CSS class styles specially created for different sections of AJAX Tab extender control e.g.: active tab style, style for on mouse over state (hover), inactive style etc. Each state of Tab extender has been associated with CSS class styles in AJAX Control Toolkit that can be used for customizing the theme of AJAX Tabs control. While working with AJAX Tab extender control if you will not apply any CssClass style to it then it will render the Tabs with default CSS rules and styles.
AJAX Control Toolkit Examples:
You can see the live samples and examples of AJAX Control Toolkit from the following links:
Default Look of AJAX Tab Extender Control
CSS Class Names for ASP.Net AJAX Tab Extender Control
.ajax__tab_header: this CSS class has been associated with tab header container of AJAX TabContainer that wraps all the tabs at the top.
.ajax__tab_outer: this CSS class controls the style of left edge of a tab.
.ajax__tab_inner: this CSS class controls the style of right edge of a tab.
.ajax__tab_tab: it applies the style to the center portion of a tab containing the text.
.ajax__tab_hover: this CSS class applies its styles while mouse over state of a tab.
.ajax__tab_active: this CSS class applies its styles on the currently selected tab.
.ajax__tab_body: it applies the CSS styles on the TabPanel content container associated with each tab.
Sample CSS Code for ASP.Net AJAX Tab Extender Control
<style type="text/css">
.ajax__myTab .ajax__tab_header {
font-family: verdana,tahoma,helvetica;
font-size: 11px;
border-bottom: solid 1px #999999
}
.ajax__myTab .ajax__tab_outer {
padding-right: 4px;
height: 21px;
background-color: #C0C0C0;
margin-right: 2px;
border-right: solid 1px #666666;
border-top: solid 1px #aaaaaa
}
.ajax__myTab .ajax__tab_inner {
padding-left: 3px;
background-color: #C0C0C0;
}
.ajax__myTab .ajax__tab_tab {
height: 13px;
padding: 4px;
margin: 0;
}
.ajax__myTab .ajax__tab_hover .ajax__tab_outer {
background-color: #cccccc
}
.ajax__myTab .ajax__tab_hover .ajax__tab_inner {
background-color: #cccccc
}
.ajax__myTab .ajax__tab_hover .ajax__tab_tab {}
.ajax__myTab .ajax__tab_active .ajax__tab_outer {
background-color: #fff;
border-left: solid 1px #999999;
}
.ajax__myTab .ajax__tab_active .ajax__tab_inner {
background-color:#fff;
}
.ajax__myTab .ajax__tab_active .ajax__tab_tab {}
.ajax__myTab .ajax__tab_body {
font-family: verdana,tahoma,helvetica;
font-size: 10pt;
border: 1px solid #999999;
border-top: 0;
padding: 8px;
background-color: #ffffff;
}
</style>
HTML Code for ASP.Net AJAX Tab Extender Control
Use the following code to apply the above CSS class to the AJAX Tabs:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<ajaxToolkit:TabContainer ID="TabContainer1" runat="server" CssClass="ajax__myTab"
Width="500px">
<ajaxToolkit:TabPanel ID="TabPanel1" runat="server">
<HeaderTemplate>
Tab1</HeaderTemplate>
<ContentTemplate>
<h3>Content under Tab1</h3>
<p>
Sample text Sample text Sample text Sample text
Sample text Sample text Sample text Sample text
Sample text Sample text Sample text Sample text
Sample text Sample text Sample text Sample text
</p>
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="TabPanel2" runat="server">
<HeaderTemplate>
Tab2</HeaderTemplate>
<ContentTemplate>
<h3>Content under Tab2</h3>
<p>
Sample text Sample text Sample text Sample text
Sample text Sample text Sample text Sample text
Sample text Sample text Sample text Sample text
Sample text Sample text Sample text Sample text
</p>
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="TabPanel3" runat="server">
<HeaderTemplate>
Tab3</HeaderTemplate>
<ContentTemplate>
<h3>Content under Tab3</h3>
<p>
Sample text Sample text Sample text Sample text
Sample text Sample text Sample text Sample text
Sample text Sample text Sample text Sample text
Sample text Sample text Sample text Sample text
</p>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
For using default settings and look, see its code here: ASP.Net AJAX Tab Control Extender, by default tabs will render with CSS styles defined in the AJAX control toolkit base code.
Output:
You can see the output of above discussed code from the following link:
AJAX Tab Control
Continue to next tutorial: AJAX TextBoxWatermark Control Extender to learn how to display watermark type text in the textbox control using AJAX toolkit extender.
