Difficulty Theming AJAX Tab Control
I want the background color of the tab panel to be a light blue. In addition, the background color of the tab should probably be light blue.
I think I need to apply a theme to it. I've found a couple examples but whenever I try it seems to lose all css styles applied to it.
Here, I set the CssClass property for the TabContainer.
Code:
<cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" CssClass="ajax__tab_custom_theme">
Here, I include the css file with my custom theme.
Code:
<head runat="server">
<title>Untitled Page</title>
<link href="customtab.css" rel="stylesheet" type="text/css" />
</head>
Here is my css file
Code:
body
{
font-family:verdana,tahoma,helvetica;
}
/* ajax__tab_custom_theme theme */
.ajax__tab_custom_theme .ajax__tab_header
{
font-family:verdana,tahoma,helvetica;
font-size:11px;
background:url(img/xp/tab-line.gif) repeat-x bottom;
}
.ajax__tab_custom_theme .ajax__tab_header .ajax__tab_outer
{
padding-right:4px;
background:url(img/xp/tab-right.gif) no-repeat right;
height:21px;
}
.ajax__tab_custom_theme .ajax__tab_header .ajax__tab_inner
{
padding-left:3px;
background:url(img/xp/tab-left.gif) no-repeat;
}
.ajax__tab_custom_theme .ajax__tab_header .ajax__tab_tab
{
height:13px;
padding:4px;
margin:0;
background:url(img/xp/tab.gif) repeat-x;
}
.ajax__tab_custom_theme .ajax__tab_hover .ajax__tab_outer
{
background:url(img/xp/tab-hover-right.gif) no-repeat right;
}
.ajax__tab_custom_theme .ajax__tab_hover .ajax__tab_inner
{
background:url(img/xp/tab-hover-left.gif) no-repeat;
}
.ajax__tab_custom_theme .ajax__tab_hover .ajax__tab_tab
{
background:url(img/xp/tab-hover.gif) repeat-x;
}
.ajax__tab_custom_theme .ajax__tab_active .ajax__tab_outer
{
background:url(img/xp/tab-active-right.gif) no-repeat right;
}
.ajax__tab_custom_theme .ajax__tab_active .ajax__tab_inner
{
background:url(img/xp/tab-active-left.gif) no-repeat;
}
.ajax__tab_custom_theme .ajax__tab_active .ajax__tab_tab
{
background:url(img/xp/tab-active.gif) repeat-x;
}
.ajax__tab_custom_theme .ajax__tab_body
{
font-family:verdana,tahoma,helvetica;
font-size:10pt;
border:1px solid #999999;
border-top:0;
padding:8px;
background-color:#ffffff;
}
Can someone help?
Thanks,
