Geeks With Blogs

Jonathan Lawson
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\.

image

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.

image

 

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!

 

 

 

 

 

 

 

 

Posted on Wednesday, April 29, 2009 5:39 PM | Back to top


Comments on this post: Skinning the ASP.NET AJAX Tab Control

# re: Skinning the ASP.NET AJAX Tab Control
Requesting Gravatar...
oh my god! İt's amazing. They're so much beautiful....
thanx dude
Left by Yiğit Özdemir on Jun 10, 2009 2:04 PM

# re: Skinning the ASP.NET AJAX Tab Control
Requesting Gravatar...
Thanks a BUNCH! Just what I was looking for!
Left by Stephanie on Jul 07, 2009 6:18 PM

# re: Skinning the ASP.NET AJAX Tab Control
Requesting Gravatar...
How can I edit just a few things of the default appearance? Do I have to write my own style with de differences??
Left by Jonathan on Jul 14, 2009 11:03 AM

# re: Skinning the ASP.NET AJAX Tab Control
Requesting Gravatar...
so cool tips...plz keep up
Left by sex cam on Mar 31, 2011 8:09 PM

# re: Skinning the ASP.NET AJAX Tab Control
Requesting Gravatar...
youre images aren't loading so thers nothing to be amazed about
Left by kdm on Feb 24, 2012 7:49 PM

# re: Skinning the ASP.NET AJAX Tab Control
Requesting Gravatar...
Awesome! Thanks for your post, it saved me a great deal of time.
Left by friv game on Feb 26, 2012 10:36 AM

# re: Skinning the ASP.NET AJAX Tab Control
Requesting Gravatar...
Guys not able to dowload the code. Can anyone of u gimme the alternate link. . Thanks in advance!!
Left by Jerome on Mar 18, 2012 1:21 PM

# re: Skinning the ASP.NET AJAX Tab Control
Requesting Gravatar...
Thanks for a very nice post, very insight full. I learned a lot
Left by friv on Jul 10, 2012 1:12 AM

# re: Skinning the ASP.NET AJAX Tab Control
Requesting Gravatar...
Einfach toll, hatte eine richtig geile Zeit hier auf der Seite. Macht einfach Spaß und es lohnt sich immer wieder reinzuschauen.
Left by Marion on Jan 12, 2013 2:33 AM

# re: Skinning the ASP.NET AJAX Tab Control
Requesting Gravatar...
Broken images, can't see anything
Left by Mo on Feb 13, 2013 3:29 PM

Your comment:
 (will show your gravatar)


Copyright © ProjectLawson | Powered by: GeeksWithBlogs.net