Alterar estilos css do TabContainer / TabPanel numa pag ASP.NET

[LCarreira]

Boa tarde.

Estou a fazer uma aplicação em asp.net e agora estou a começar a utilizar AJAX, no entanto não estou a conseguir alterar os estilos css que vêm por defeito no objecto TabContainer.

Já tentei criar uma classe css com as novas configurações mas só aparecem as configurações css definidas por defeito ou então nem sequer aparece qualquer estilo css.

<cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="1" CssClass="ajax__tab_xp">
                                           <cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1">
                                                <ContentTemplate>
                                                    11111
                                                </ContentTemplate>
                                            </cc1:TabPanel>
                                            <cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2">
                                                <ContentTemplate>
                                                    222222
                                                </ContentTemplate>
                                            </cc1:TabPanel>
                                        </cc1:TabContainer>

O que pretendo descobrir é, como posso eu alterar o css do objecto TabContainer  de modo a conseguir o aspecto visual desejado?

Obrigado,

Carreira

[DanielAmorim]

Esses ID que colocas nos controlos ASP.Net apenas são válidos no lado do servidor, pois quando é feito o render do controlo são gerados novos ID's (CliendID) e são esses que o browser conhece.

Vai ver a página gerada e vê os ID's atribuídos...

Se queres criar estilos para controlos ASP.Net podes usar Themes (ASP.Net 2.0) 😄

[LCarreira]

Continuo sem conseguir alterar o aspecto dos tabs, no entanto já consigo alterar a cor do body...

Os estilos css que compõem o os tabs por defeito são:

/* xp theme */
.ajax__tab_xp .ajax__tab_header {font-family:verdana,tahoma,helvetica;font-size:11px;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-line.gif")%>) repeat-x bottom;}
.ajax__tab_xp .ajax__tab_outer {padding-right:4px;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-right.gif")%>) no-repeat right;height:21px;}
.ajax__tab_xp .ajax__tab_inner {padding-left:3px;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-left.gif")%>) no-repeat;}
.ajax__tab_xp .ajax__tab_tab {height:13px;padding:4px;margin:0;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab.gif")%>) repeat-x;}
.ajax__tab_xp .ajax__tab_hover .ajax__tab_outer {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover-right.gif")%>) no-repeat right;}
.ajax__tab_xp .ajax__tab_hover .ajax__tab_inner {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover-left.gif")%>) no-repeat;}
.ajax__tab_xp .ajax__tab_hover .ajax__tab_tab {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover.gif")%>) repeat-x;}
.ajax__tab_xp .ajax__tab_active .ajax__tab_outer {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-active-right.gif")%>) no-repeat right;}
.ajax__tab_xp.ajax__tab_active .ajax__tab_inner {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-active-left.gif")%>) no-repeat;}
.ajax__tab_xp .ajax__tab_active .ajax__tab_tab {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-active.gif")%>) repeat-x;}
.ajax__tab_xp .ajax__tab_body {font-family:verdana,tahoma,helvetica;font-size:10pt;border:1px solid #999999;border-top:0;padding:8px;
                                                       background-color:#ffffff;}

Os estilos criados por mim são:

/*theme - Backgrounds */

.MyTabs .ajax__tab_header		{ background:url(images/tabs/tab-line.gif) repeat-x bottom; }
.MyTabs .ajax__tab_outer		{ background:url(images/tabs/tab-right.gif) no-repeat right; }
.MyTabs .ajax__tab_inner		                     { background:url(images/tabs/tab-left.gif) no-repeat; }

.MyTabs .ajax__tab_tab			{ background:url(images/tabs/tab.gif) repeat-x; }
.MyTabs .ajax__tab_hover .ajax__tab_outer	{ background:url(images/tabs/tab-hover-right.gif) no-repeat right; }
.MyTabs .ajax__tab_hover .ajax__tab_inner	{ background:url(images/tabs/tab-hover-left.gif) no-repeat; }
.MyTabs .ajax__tab_hover .ajax__tab_tab               { background:url(images/tabs/tab-hover.gif) repeat-x; }
.MyTabs .ajax__tab_active .ajax__tab_outer	{ background:url(images/tabs/tab-active-right.gif) no-repeat right; }
.MyTabs .ajax__tab_active .ajax__tab_inner	{ background:url(images/tabs/tab-active-left.gif) no-repeat; }
.MyTabs .ajax__tab_active .ajax__tab_tab	{ background:url(images/tabs/tab-active.gif) repeat-x; }


/* Other Styles */
.MyTabs .ajax__tab_header 		{ font-family:verdana,tahoma,helvetica;font-size:11px; }
.MyTabs .ajax__tab_outer		{ height:29px; }
.MyTabs .ajax__tab_inner			{ padding-left:3px; }
.MyTabs .ajax__tab_tab			{ padding:8px 40px;margin:0; }
.MyTabs .ajax__tab_body		                     { font-family:verdana,tahoma,helvetica;font-size:10pt;border:1px solid #999999;
                                                                                        border-top:0;padding:8px;background-color:#CDC8B1; }	

Tento desta forma utilizar os setilos do meu ficheiro css mas só consigo alterar o fundo do body. As imagens que formam os headers dos tabs não são chamadas e os tabs aparecem sem qq tipo de formatação, só com o body escolhido.

será que estou a fazer algo mal?

não precebo...

[LCarreira]

Parece que já resolvi o meu problema... De facto usando Themes resolve...

1º  -  Adicionar pasta "AppThemes" à raiz do Website, dentro desta pasta criar uma outra, por exemplo "MainTheme".

        Dentro da pasta colocar o ficheiro de estilos css que contém os estilos do TabContainer/TabPanels e se necessário as imagens.

2º  -  Adicionar ao inicio do ficheiro .aspx os seguintes parâmetros:

        EnableTheming="true"  StylesheetTheme="MainTheme"

Assim fica resolvido o problema de atribuir novos estilos css aos tab panels do AjaxToolkit... 😛

[DanielAmorim]

Os Themes foram inseridos na infraestrutura para facilitar  😛