Ir para o conteúdo
LCarreira

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

Mensagens Recomendadas

LCarreira    0
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

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
DanielAmorim    0
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) :D

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
LCarreira    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...

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
LCarreira    0
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="trueStylesheetTheme="MainTheme"

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

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


×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade