• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

LCarreira

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

5 mensagens neste tópico

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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) :D

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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="trueStylesheetTheme="MainTheme"

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Os Themes foram inseridos na infraestrutura para facilitar  :P

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora