Hey Robert...
The images that make up the Tab Container are embedded in the AJAX Control Toolkit. So inorder to make them your own images, you will need to create a CSS class for each of the images to change them to your own. I was able to change the images that the control toolkit uses by using the following CSS:
.my_ajax__tab_xp.ajax__tab_header {font-family:verdana,tahoma,helvetica;
font-size:11px;background:url(../../Handler.ashx?id=102)repeat-xbottom;
}
.my_ajax__tab_xp.ajax__tab_outer {padding-right:0px;
background:url(../../Handler.ashx?id=103)
no-repeatright;
height:21px;}
.my_ajax__tab_xp.ajax__tab_inner {padding-left:3px;
background:url(../../Handler.ashx?id=101)
no-repeat;}
.my_ajax__tab_xp.ajax__tab_tab {height:13px;
padding:4px;margin:0;
background:url(../../Handler.ashx?id=94)
repeat-x;}
.my_ajax__tab_xp.ajax__tab_hover.ajax__tab_outer {background:
url(../../Handler.ashx?id=100)no-repeat
right;}
.my_ajax__tab_xp.ajax__tab_hover.ajax__tab_inner {background:
url(../../Handler.ashx?id=99)
no-repeat;}
.my_ajax__tab_xp.ajax__tab_hover.ajax__tab_tab {background:
url(../../Handler.ashx?id=98)
repeat-x;}
.my_ajax__tab_xp.ajax__tab_active.ajax__tab_outer {background:
url(../../Handler.ashx?id=97)
no-repeatright;
}
.my_ajax__tab_xp.ajax__tab_active.ajax__tab_inner {background:
url(../../Handler.ashx?id=96)
no-repeat;}
.my_ajax__tab_xp.ajax__tab_active.ajax__tab_tab {background:
url(../../Handler.ashx?id=95)
repeat-x;}
.my_ajax__tab_xp.ajax__tab_body {font-family:verdana,tahoma,helvetica;
font-size:10pt;border:1pxsolid#999999;
border-top:0;padding:8px;
background-color:#ffffff;}
Use the my_ajax__tab* styles when you create your Tab Container.
I have put this inside a CSS file inside of a theme and there is no need for a skin. If you still need a skin for this, from here it should be straight forward...
Let me know if you have any questions...
--Jeff
[deleted... posted twice...]
Jeff,
Thanks for the info, but I already am aware that you can apply a style to the tabcontainer. What I would like to do is use a skin file instead. I find them easier to work with. I have inserted my code below. I used the Ajax SampleWebSite\App_Themes\CollapsiblePanel.skin as a reference to create my tcstyle.skin and tpstyle.skin files. However, when I run this code no changes are made to the tabcontainer or panel. Any ideas?
Thanks,
-Robert
tabpanel.aspx
1 <%@. Page Language="VB" AutoEventWireup="false" CodeFile="tabpaneldemo.aspx.vb"Inherits="tabpaneldemo" theme="MyTheme" %>
2
3 <%@. Register assembly="AjaxControlToolkit, Version=1.0.10618.0, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e" namespace="AjaxControlToolkit" tagprefix="cc1" %>
4
5 <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
6
7 <html xmlns="http://www.w3.org/1999/xhtml">
8 <head runat="server">
9 <title>Untitled Page</title>
10 </head>
11 <body>
12 <form id="form1" runat="server">
13 <div>
14
15 <asp:ScriptManager ID="ScriptManager1" runat="server">
16 </asp:ScriptManager>
17
18 </div>
19 <cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="4" SkinID="tcstyle" >
20 <cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1" SkinID="tpstyle">
21 </cc1:TabPanel>
22 <cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2">
23 </cc1:TabPanel>
24 <cc1:TabPanel ID="TabPanel3" runat="server" HeaderText="TabPanel3">
25 </cc1:TabPanel>
26 <cc1:TabPanel ID="TabPanel4" runat="server" HeaderText="TabPanel4">
27 </cc1:TabPanel>
28 <cc1:TabPanel ID="TabPanel5" runat="server" HeaderText="TabPanel5">
29 </cc1:TabPanel>
30 </cc1:TabContainer>
31 </form>
32 </body>
33 </html>
34
~/App_Themes/My Theme/tcstyle.skin
1<%@. Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>2<cc1:TabContainer runat="server"3 Backcolor="Blue"4 Forecolor="Red"5 Font-Size="Larger"6 />7<cc1:TabContainer runat="server"8 SkinID="tcstyle" />~/App_Themes/My Theme/tpstyle.skin1<%@. Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>2<cc1:TabPanel runat="server"3 Backcolor="Blue"4 Forecolor="Red"5 Font-Size="Larger"6 />7<cc1:TabPanel runat="server" SkinID="tpstyle" />8
No comments:
Post a Comment