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.
- .tabCont .ajax__tab_header
- {
- font-family: verdana,tahoma,helvetica;
- font-size: 11px;
- background: url(../Images/Controls/tab-line.gif) repeat-x bottom;
- }
- .tabCont .ajax__tab_outer
- {
- padding-right: 4px;
- background: url(../Images/Controls/tab-right.gif) no-repeat right;
- height: 21px;
- }
- .tabCont .ajax__tab_inner
- {
- padding-left: 3px;
- background: url(../Images/Controls/tab-left.gif) no-repeat;
- }
- .tabCont .ajax__tab_tab
- {
- height: 13px;
- padding: 4px;
- margin: 0px;
- background: url(../Images/Controls/tab.gif) repeat-x;
- }
- .tabCont .ajax__tab_hover .ajax__tab_outer
- {
- cursor: pointer;
- background: url(../Images/Controls/tab-hover-right.gif) no-repeat right;
- }
- .tabCont .ajax__tab_hover .ajax__tab_inner
- {
- cursor: pointer;
- background: url(../Images/Controls/tab-hover-left.gif) no-repeat;
- }
- .tabCont .ajax__tab_hover .ajax__tab_tab
- {
- cursor: pointer;
- background: url(../Images/Controls/tab-hover.gif) repeat-x;
- }
- .tabCont .ajax__tab_active .ajax__tab_outer
- {
- background: url(../Images/Controls/tab-active-right.gif) no-repeat right;
- }
- .tabCont .ajax__tab_active .ajax__tab_inner
- {
- background: url(../Images/Controls/tab-active-left.gif) no-repeat;
- }
- .tabCont .ajax__tab_active .ajax__tab_tab
- {
- background: url(../Images/Controls/tab-active.png) repeat-x;
- }
- .tabCont .ajax__tab_disabled
- {
- color: #A0A0A0;
- }
- .tabCont .ajax__tab_body
- {
- font-family: verdana,tahoma,helvetica;
- font-size: 10pt;
- border: 0px solid #999999;
- border-top: 0;
- padding: 8px;
- background-color: #f1f1f1;
- margin: 12px;
- }
-
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.
- <asp:TabContainer ID="tcnManageUsers" runat="server" ActiveTabIndex="0" CssClass="tabCont">
- <asp:TabPanel runat="server" HeaderText="Add" ID="tplAdd" >
- <ContentTemplate>
- <uc1:CreateUser ID="AddCreateUser" runat="server" />
- </ContentTemplate>
- </asp:TabPanel>
- <asp:TabPanel ID="tplEdit" runat="server" HeaderText="Edit" >
- <ContentTemplate >
- <asp:Button ID="btnSelectUser" runat="server" Text="Select User" OnClick="btnSelectUser_Click"/>
- <uc1:CreateUser ID="EditCreateUser" runat="server" />
- </ContentTemplate>
- </asp:TabPanel>
- </asp:TabContainer>
-