Changing the Tab Container

Are you seeking a way to customize the tabcontainer which comes with AJAX toolkit? AJAX tab container has several Cascade Style Sheet (CSS) properties which you can use to change the look of the tab container. But you need to make sure that you are not changing the keywords used in the CSS (ajax__tab_header, ajax__tab_outer, etc…).

You can change the look of the tabs by two methods. Tab container is using few images to give the 3D look it is having in its default view. so the first method is by changing the images and associating the new images to the tab container using a style sheet, second method is to change the tabs using the CSS without images, by using the CSS you can change the colors, sizes etc of the tabs.

Following are the default images that are shipped with the toolkit.

tab
tab-active
tab-active-left
tab-active-right
tab-hover
tab-hover-left
tab-hover-right
tab-left
tab-right
tab-line

 

In the following code I am changing the tabcontainer look by using CSS and then placing the updated images to the relevant (Images/Controls) folder.

1. .tabCont .ajax__tab_header
2. {
3.     font-family: verdana,tahoma,helvetica;
4.     font-size: 11px;
5.     background: url(../Images/Controls/tab-line.gif) repeat-x bottom;
6. }
7. .tabCont .ajax__tab_outer
8. {
9.     padding-right: 4px;
10.     background: url(../Images/Controls/tab-right.gif) no-repeat right;
11.     height: 21px;
12. }
13. .tabCont .ajax__tab_inner
14. {
15.     padding-left: 3px;
16.     background: url(../Images/Controls/tab-left.gif) no-repeat;
17. }
18. .tabCont .ajax__tab_tab
19. {
20.     height: 13px;
21.     padding: 4px;
22.     margin: 0px;
23.     background: url(../Images/Controls/tab.gif) repeat-x;
24. }
25. .tabCont .ajax__tab_hover .ajax__tab_outer
26. {
27.     cursor: pointer;
28.     background: url(../Images/Controls/tab-hover-right.gif) no-repeat right;
29. }
30. .tabCont .ajax__tab_hover .ajax__tab_inner
31. {
32.     cursor: pointer;
33.     background: url(../Images/Controls/tab-hover-left.gif) no-repeat;
34. }
35. .tabCont .ajax__tab_hover .ajax__tab_tab
36. {
37.     cursor: pointer;
38.     background: url(../Images/Controls/tab-hover.gif) repeat-x;
39. }
40. .tabCont .ajax__tab_active .ajax__tab_outer
41. {
42.     background: url(../Images/Controls/tab-active-right.gif) no-repeat right;
43. }
44. .tabCont .ajax__tab_active .ajax__tab_inner
45. {
46.     background: url(../Images/Controls/tab-active-left.gif) no-repeat;
47. }
48. .tabCont .ajax__tab_active .ajax__tab_tab
49. {
50.     background: url(../Images/Controls/tab-active.png) repeat-x;
51. }
52. .tabCont .ajax__tab_disabled
53. {
54.     color: #A0A0A0;
55. }
56. .tabCont .ajax__tab_body
57. {
58.     font-family: verdana,tahoma,helvetica;
59.     font-size: 10pt;
60.     border: 0px solid #999999;
61.     border-top: 0;
62.     padding: 8px;
63.     background-color: #f1f1f1;
64.     margin: 12px;
65. }
66. 
    

 

To apply the style to the tab container you can use the following code.

<asp:TabContainer ID="tcnManageUsers" runat="server" ActiveTabIndex="0" CssClass="tabCont">

Following is the full code of my tab container.

1. <asp:TabContainer ID="tcnManageUsers" runat="server" ActiveTabIndex="0" CssClass="tabCont">
2.      <asp:TabPanel runat="server" HeaderText="Add" ID="tplAdd" >
3.          <ContentTemplate>
4.              <uc1:CreateUser ID="AddCreateUser" runat="server" />
5.          </ContentTemplate>  
6.      </asp:TabPanel>
7.      <asp:TabPanel ID="tplEdit" runat="server" HeaderText="Edit" >
8.          <ContentTemplate >
9.             <asp:Button ID="btnSelectUser" runat="server" Text="Select User" OnClick="btnSelectUser_Click"/>
10.             <uc1:CreateUser ID="EditCreateUser" runat="server" />
11.          </ContentTemplate>
12.      </asp:TabPanel>
13.  </asp:TabContainer>
14.