CSS em componentes PrimeFaces

16 de outubro de 2012 7 respostas

Zenity 16 de outubro de 2012

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

7 Respostas

yoshikichi 16 de out. de 2012

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

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.

diogozero 16 de out. de 2012

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.

Zenity 16 de out. de 2012

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.

Zenity 16 de out. de 2012

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

<h:head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>Menu Droid</title>
      <h:outputStylesheet name="css/main.css" library="css"/>
      <h:outputScript library="javascript" name="jscodes.js" />
</h:head>

No index.jsf faço o seguinte:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jsp/jstl/core"> 

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

        <ui:define name="centro">

            Aqui é o centro do index!

        </ui:define>

    </ui:decorate>

</html>

E meu CSS está da seguinte forma:

@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;
}

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?

yoshikichi 16 de out. de 2012

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.

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.

Zenity 16 de out. de 2012

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

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.

tableless.com.br

Pontuação de especificidade da CSS

Entenda como o browser calcula a especificidade do seu seletor e evite conflitos entre estilos.

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

yoshikichi 17 de out. de 2012

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.

Criado 16 de outubro de 2012

Ultima resposta 17 de out. de 2012

Respostas 7

Participantes 3

7 Respostas

Topicos relacionados