CSS em componentes PrimeFaces

Front-end
#1

Pessoa, boa tarde.
Tenho uma dúvida simples.
Estou fazendo um aplicativo e estou utilizando o Primefaces para gerar a interface gráfica.
A minha dúvida é se eu consigo substituir o CSS de um componente por outro que não seja o padrão do tema que coloquei.

Pois em uma determinada tela eu quero que um componente p:inputText que preciso que apareça em uma cor diferente.
Tentei usar o StyleClass, Style e até mesmo criar um arquivo CSS e importa-lo através do comando Class, mas não obtive sucesso.

Alguém saberia me explicar o por que?
Agradeço desde já pela ajuda!!!

#2

[quote=Zenity]Pessoa, boa tarde.
Tenho uma dúvida simples.
Estou fazendo um aplicativo e estou utilizando o Primefaces para gerar a interface gráfica.
A minha dúvida é se eu consigo substituir o CSS de um componente por outro que não seja o padrão do tema que coloquei.

Pois em uma determinada tela eu quero que um componente p:inputText que preciso que apareça em uma cor diferente.
Tentei usar o StyleClass, Style e até mesmo criar um arquivo CSS e importa-lo através do comando Class, mas não obtive sucesso.

Alguém saberia me explicar o por que?
Agradeço desde já pela ajuda!!![/quote]
O problema é a prioridade do css(os pontos) olhe isso: http://tableless.com.br/pontuacao-especificidade-css/
Mas vc pode criar seu proprio tema, a especificação do prime explica como.
Outra forma é vc entrar em http://jqueryui.com/themeroller/
definir seu thema e colocar o css em seu projeto, essa forma para mim é a mais facil.

#3

Dê uma olhada na documentação do Primefaces. Lá, ele informa as classes dos componentes, a partir dai você pode reescrever dentro do seu próprio CSS colocando !important para sobrescrever o padrão do Primefaces.

#4

Obrigado amigos!

yoshikichi Vou consultar seus links e qualquer coisa volto aqui.

diogozero
O problema é que eu quero fazer um estilo apenas para um componente.
Mas vou analisar melhor os links que o outro amigo passou e qualquer coisa volto aqui.

#5

Galera, só mais uma dúvida.

Não sei porque meu CSS simplesmente não inicia.
Tenha uma página padrão com a seguinte codificação no início

[code]<h:head>

Menu Droid [/code]

No index.jsf faço o seguinte:

[code]

<ui:decorate template="/template/padrao.xhtml">

    <ui:define name="centro">

        Aqui é o centro do index!

    </ui:define>

</ui:decorate>
[/code]

E meu CSS está da seguinte forma:

[code]@CHARSET “ISO-8859-1”;

.colunaAcoes {
width: 100px;
text-align: center;
}

.colunaDescricao{
width: 610px;
text-align: left;
}

.body {
background-color: #eeeeee;
font-size: 40;
}

.excluir{
font-size: 24px;
}

.menu {
width: 200px;
}

.layoutPrincipal {
min-width:1020px;
max-width:1020px;
min-height:600px;
}
[/code]

Esse arquivo CSS ta dentro da pasta Resources.
Posso fazer qualquer modificação nele que não acontece nada nas minhas páginas.
Alguém saberia me dizer o por que?

#6

[quote=Zenity]Obrigado amigos!

yoshikichi Vou consultar seus links e qualquer coisa volto aqui.

diogozero
O problema é que eu quero fazer um estilo apenas para um componente.
Mas vou analisar melhor os links que o outro amigo passou e qualquer coisa volto aqui.[/quote]
Então se vc quer apenas um elemento, vc tem que verificar a prioridade do css.
Por exemplo, se o primefaces definiu um estilo:

tag .classe subtag{ ...}

E vc vai e define .classeNova{...]
A pontuação da definição do css do prime é maior, ai a prioridade é dele, ou seja vc tem que definir um css com uma pontuação de prioridade maior.

#7

[quote=yoshikichi][quote=Zenity]Obrigado amigos!

yoshikichi Vou consultar seus links e qualquer coisa volto aqui.

diogozero
O problema é que eu quero fazer um estilo apenas para um componente.
Mas vou analisar melhor os links que o outro amigo passou e qualquer coisa volto aqui.[/quote]
Então se vc quer apenas um elemento, vc tem que verificar a prioridade do css.
Por exemplo, se o primefaces definiu um estilo:

tag .classe subtag{ ...}

E vc vai e define .classeNova{...]
A pontuação da definição do css do prime é maior, ai a prioridade é dele, ou seja vc tem que definir um css com uma pontuação de prioridade maior.

[/quote]

yoshikichi obrigado pela atenção!
E com relação ao problema descrito acima, saberia me indicar o que pode ser?

#8

Vou utilizar um exemplo não primefaces, mas é a mesma coisa:

<style type="text/css">
	div>div.ClasseA {
		position: relative;
		top: 10%;
		left: 20%;
		background-color: red;
		width: 30%;
		height: 20%;
		color: white;
		padding-left: 30%;
		padding-top: 30%;
	}
	.classeA{
		position: relative;
		top: 0%;
		left: 0%;
		background-color: blue;
		width: 100%;
		height: 100%;
		color: red;
		padding-left: 0;
		padding-top: 0;
                font-size: 30px;
	
	}
</style>

	<div id="divA" class="classeA">
		TESTE
	</div>

VC viu que tem duas definição no css, a primeira defini um estilo para uma div com classA dentro de um outra div, a segunda defini um estilo apenas para uma classe.
Se vc contar os pontos de prioridade, a primeira definição supera a segunda, por isso todo css da 2 definição que também foi definido na 1 é ignorado, menos o font-size: 30px; uma vez que não consta na primeira definição.

é mais ou menos isso que acontece no primefaces, suas definições tem prioridade menores.

#9