4Respostas

Tenho uma interface específica em que os inputs do formulário devem ter uma borda diferente
da do padrão do portal.css, é possível que, usando apenas CSS e não editando o XSL da
interface, eu possa alterar a cor das bordas desses inputs, sem que com isso eu altere os
outros inputs no restante do meu portal?

Em 17/02/2009 15:56

4 Respostas

Existem duas soluções para esse problema, uma simples e outra um pouco mais complexa. Mas
vale lembrar que essas soluções valem para qualquer tag html que queira alterar somente
utilizando CSS, e não apenas os inputs:

1- Quando não existem outros inputs na mesma página onde essa interface irá aparecer, você
poderá simplesmente inserir uma interface HTML na página que altera a cor de borda desses
inputs, passando por cima das regras que chegam no portal.css. Para tal basta inserir a
interface HTML e editar seu conteúdo da seguinte forma:

<style type="text/css">
.cLumInputText {
	border:1px solid #f1f1f1;
}
</style>

 

No caso você estará configurando todos os inputs da página para usarem uma borda de 1px de
grossura, em uma linha sólida, e na cor #f1f1f1 (cinza claro).

2- Quando existem outros inputs na mesma página, a única solução é criar um identificador
(id) em torno da interface, para que possa por CSS alterar somente os inputs dentro deste
identificador.

Nesse caso você precisará editar XSL, mas a edição é bastante simples, basta criar um <div>
com um identificador a sua escolha em torno do <xsl:apply-templates> que chama todos os
controles:

<xsl:template match="/">
	<div id="MeuIdentificador">
		<xsl:apply-templates select="renderData/controls/control" />
	</div>
</xsl:template>

 

À partir daí é simples alterar somente os inputs dentro da interface, basta adicionar o
seguinte CSS num arquivo CSS externo, ou mesmo dentro de tags <style> ainda no mesmo XSL
editado:

#MeuIdentificador .cLumInputText {
	border:1px solid #f1f1f1;
}

 

Assim você terá certeza que apenas os inputs (com classe "cLumInputText" conforme o padrão
Lumis) DENTRO de um identificador chamado "MeuIdentificador" (no caso, o <div> em torno da interface) terão seu layout de borda alterado dessa maneira.

Esta opção é sempre a mais segura, apesar de dar um pouco mais de trabalho que a opção 1.

Em 17/02/2009 15:58
Responder

O mesmo não poderia ser feito sem editar o XSL e colocando uma classe nas propriedades da coluna ou da área?

Em 18/02/2009 09:21, editada em 18/02/2009 09:22
Responder

"O mesmo não poderia ser feito sem editar o XSL e colocando uma classe nas propriedades da coluna ou da área?"

Excelente idéia, poderia sim.

No caso apenas usaríamos class e não id, mas a lógica é a mesma.

 

 

Em 18/02/2009 17:35
Responder

No caso, a título de exemplo, bastaria editar as propriedades da coluna onde está inserida a interface e adicionar uma classe (ex: MinhaClasse).

Depois bastaria inserir o seguinte código em uma interface HTML na página:

<style type="text/css">
.MinhaClasse .cLumInputText {   
    border:1px solid #f1f1f1;   
}
</style>

 

Em 18/02/2009 17:45
Responder

Acompanhar pergunta

Receba atualizações e novas respostas por e-mail, e ajude a resolver as dúvidas da comunidade.

Realize Login para poder seguir!