The TabContainer is an ASP.NET AJAX Control which creates a set of Tabs that can be used to organize page content. A TabContainer is a host for a number of TabPanel controls. You can change the look of the control by using the CSSClass property, however the styles must be overridden, and a slightly overlooked, but significant fact is that the GIF tab images must be redrawn if you are going to be changing the look of the tabs. The AJAX Control Toolkit can be found here:
http://www.asp.net/AJAX/AjaxControlToolkit/Samples/Tabs/Tabs.aspx.
Here is the default appearance of the AJAX TabContainer.
Tabs Css classes
- .ajax__tab_header: A container element that wraps all of the tabs at the top of the TabContainer. Child CSS classes:.ajax__tab_outer.
- .ajax__tab_outer: An outer element of a tab, often used to set the left-side background image of the tab.Child CSS classes: .ajax__tab_inner.
- .ajax__tab_inner: An inner element of a tab, often used to set the right-side image of the tab. Child CSS classes:.ajax__tab_tab.
- .ajax__tab_tab: An element of the tab that contains the text content. Child CSS classes:none.
- .ajax__tab_body: A container element that wraps the area where a TabPanel is displayed. Child CSS classes: none.
- .ajax__tab_hover . This is applied to a tab when the mouse is hovering over. Child CSS classes:.ajax__tab_outer.
- .ajax__tab_active: This is applied to a tab when it is the currently selected tab. Child CSS classes:.ajax__tab_outer.
You can find the default styles in the Toolkit solution in the "AjaxControlToolkit\Tabs\Tabs.css.
The tab appearance is divided into three sets of gif images comprising the elements of the tabs. An Active Tab, an In-Active Tab and a Hover Tab. For each set of tabs there are a corresponding number of GIF images that define its appearance. Mainly, a Left-Side, Main, and Right-Side.
The default Tab GIF Images for the control can be found in AjaxControlToolkit\Tabs\.
Here is the layout of the tab GIF Images as they appear on the TabContainer.
To do something a little more out of the box, you have to change both the CSS and the Images. Here we have a Black Theme with a Green Highlight and a Green Gradient Hover Effect.
First we copy over the default CSS Styles into your default.css and the Images into your App_Themes folder. Next, We’ll change the CSS to match our Black Appearance and change the style name to our custom name - DarkGoo, and then we change the reference to our custom GIF Tab images parts.
Next, using Paint or your favorite Image Editing Tool, You need to repaint the Default tab gif images, and then slice them out into the correct sizes.
Finally, in order to implement your new TabContainer Appearance, you will need to set the CSSClass property of your TabContainer to your new CSS Style.
Using C# Code-Behind Example:
AjaxControlToolkit.TabContainer MyTabContainer = new TabContainer();
MyTabContainer.CssClass = "DarthGoo__tab_xp";
The final Styles and images can be downloaded here. [Demo Code]
Enjoy!