I have been working with the tab Control for two days with no success at overridding the default styles for the tabs. I have copied the styles from the tabs.css file located in the toolkit, and have modified the hover, active and selected styles that I want to modiy. I have included the new css sheet into my application and included the CssClass reference in the file code. when I run the page or site to debug I get the default images and actions. Could anyone tell me what is wrong. I'm including the source code below:
ASP file
<%@dotnet.itags.org.PageLanguage="VB"AutoEventWireup="true"CodeFile="Default.aspx.vb"Inherits="_Default" %><%@dotnet.itags.org.RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="cc1" %>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>Untitled Page</title>
<linkhref="Tabs.css"rel="stylesheet"type="text/css"/></head>
<body>
<formid="form1"runat="server">
<asp:ScriptManagerID="ScriptManager1"runat="server"/>
<div>
<cc1:TabContainerID="TabContainer1"runat="server">
<cc1:TabPanelID="TabPanel1"runat="server"CssClass="ajax__tab_tab1">
<HeaderTemplate>DashBoard</HeaderTemplate>
</cc1:TabPanel>
</cc1:TabContainer>
</div>
</form></body>
</html>
Style sheet
/* default layout */
.ajax__tab_default.ajax__tab_header {white-space:nowrap;}
.ajax__tab_default.ajax__tab_outer {display:-moz-inline-box;display:inline-block}
.ajax__tab_default.ajax__tab_inner {display:-moz-inline-box;display:inline-block}
.ajax__tab_default.ajax__tab_tab {margin-right:4px;overflow:hidden;text-align:center;cursor:pointer;display:-moz-inline-box;display:inline-block}
/* tab1 theme */
.ajax__tab_tab1.ajax__tab_header {font-family:verdana,tahoma,helvetica;font-size:11px;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-line.gif")%>)repeat-xbottom;}
.ajax__tab_tab1.ajax__tab_outer {padding-right:4px;background:url("Images\green_gradient_3.gif")no-repeatright;height:21px;}
.ajax__tab_tab1.ajax__tab_inner {padding-left:3px;background:url("Images\green_gradient_1.gif")no-repeat;}
.ajax__tab_tab1.ajax__tab_tab {height:13px;padding:4px;margin:0;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab.gif")%>)repeat-x;}
.ajax__tab_tab1.ajax__tab_hover.ajax__tab_outer {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover-right.gif")%>)no-repeatright;}
.ajax__tab_tab1.ajax__tab_hover.ajax__tab_inner {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover-left.gif")%>)no-repeat;}
.ajax__tab_tab1.ajax__tab_hover.ajax__tab_tab {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover.gif")%>)repeat-x;}
.ajax__tab_tab1.ajax__tab_active.ajax__tab_outer {background:url("Images\green_gradient_4.gif")no-repeatright;}
.ajax__tab_tab1.ajax__tab_active.ajax__tab_inner {background:url("Images\green_gradient_3.gif")no-repeat;}
.ajax__tab_tab1.ajax__tab_active.ajax__tab_tab {background:url("Images\green_gradient_1.gif")repeat-x;}
.ajax__tab_tab1.ajax__tab_body {font-family:verdana,tahoma,helvetica;font-size:10pt;border:1pxsolid#999999;border-top:0;padding:8px;background-color:#ffffff;}
/* scrolling */
.ajax__scroll_horiz {overflow-x:scroll;}
.ajax__scroll_vert {overflow-y:scroll;}
.ajax__scroll_both {overflow:scroll}
.ajax__scroll_auto {overflow:auto}
thank you,
kkof
You should apply the CssClass attribute to the TabContainer control rather than to the TabPanel element.
Kind regards,
sbogus.
Thanks sbogus, placing the CssClass on the TabContainer corrected the issues I was having.
No comments:
Post a Comment