Css + primefaces

Front-end
#1

oi pessoal

estou tentando colocar um css na minha view, porque nao consegui fazer com primefaces a divisao de um panel.
No caso, quero colocar dois panel

[code]


<p:outputPanel id=“dados_escritorio”>
<p:panel header=“comercial”>
</p:panel>
</p:outputPanel>
[/code]

meu css está assim:

 <style type="text/css">
 	#campoEsquerdo{
 		float:left;
 		width: 50%;
 		height:100px;
 		background-color: #006400;
 	}
 	
 	#campoDireito{
 		float:right;
 		width: 50%;
 		height:100px;
 		background-color: #FF0000;
 	}     
</style>

mas nao funciona. É como se o css do primefaces sobreescrevesse o css que eu coloquei.

Alguem tem alguma ideia?

valew

#2

Já tentou usar o !important no seu css?

#3

colocquei assim:

[code]
#campoEsquerdo{
float:left;
width: 50%;
height:100px;
background-color: #006400;
!important;
}

#campoDireito{
	float:right;
	width: 50%;
	height:100px;
	background-color: #FF0000;
	!important;
}

[/code]

mas nao deu certo. Continua aparendo um panel abaixo do outro

#4

[quote=javaCBA]colocquei assim:

[code]
#campoEsquerdo{
float:left;
width: 50%;
height:100px;
background-color: #006400;
!important;
}

#campoDireito{
	float:right;
	width: 50%;
	height:100px;
	background-color: #FF0000;
	!important;
}

[/code]

mas nao deu certo. Continua aparendo um panel abaixo do outro[/quote]

O !important voce coloca logo após a um estilo que voce quer que tenha mais importancia:

width: 500px !important;
#5

coloquei no

[code]
#campoEsquerdo{
float:left !important;
width: 50% !important;
height:100px;
background-color: #006400;
!important;
}

#campoDireito{
	float:right !important;
	width: 50% !important;
	height:100px;
	background-color: #FF0000;[/code]

coloquei no float e no width e nada

#6

[quote=javaCBA]coloquei no

[code]
#campoEsquerdo{
float:left !important;
width: 50% !important;
height:100px;
background-color: #006400;
!important;
}

#campoDireito{
	float:right !important;
	width: 50% !important;
	height:100px;
	background-color: #FF0000;[/code]

coloquei no float e no width e nada[/quote]

Voce está usando o Firebug? se tiver, usa pra descobrir qual CSS ele está assumindo.

#7

assume o theme.css do primefaces

#8

O que voce pode fazer é:

  • Nao use ID para estilizar. Pois o JSF tem um esquema estranho que dá ID ao elemento gerado por ele mesmo.
  • Usando firebug, identificar qual class do css está atribuída ao elemento que deseja estilizar
  • Voce mesmo escrever um estilo no seu CSS para esta class
  • Anota-lo com !important

tipo:


.classe-gerada-pelo-prime{



}

Antigamente quando mexia com JSF, isso funcionava comigo.

Esses problemas de inflexibilidade, e outras me fizeram abandonar essa tecnologia vomitada pela SUN.

#9

sorry, dupliquei sem querer o post acima

#10

acabei de criar, mas nao pegou o css

.campoEsquerdo{ float:left !important; width: 50% !important; height:100px; background-color: #006400; }

no codigo chamei assim:

<p:outputPanel id="dados_pessoa" class="campoEsquerdo">

nao funciona

#11

ah tentei editar pelo proprio firebug, e ele só assume do primefaces

#12

[quote=javaCBA]acabei de criar, mas nao pegou o css

.campoEsquerdo{ float:left !important; width: 50% !important; height:100px; background-color: #006400; }

no codigo chamei assim:

<p:outputPanel id="dados_pessoa" class="campoEsquerdo">

nao funciona[/quote]

Voce tem que pegar o class que io primefaces gerou.

#13

como eu faço isso? :shock:

#14

O firebug mostra.

#15

o firebug nao mostrou nada diferente pra mim, apenas os css do primefaces mesmo.

O unico que ele tentou mostrar diferente, ta assim:

<link type="text/css" rel="stylesheet" href="RES_NOT_FOUND" />

e eu nao criei um estilo a parte pra isso, eu coloquei na mesma pagina. Só chamei no componente.

Mesmo assim o primefaces cria um css pra mim?

#16

mais alguma forma de achar o css criado pelo primefaces? nao achei ainda

#17

pessoal, ainda nao consegui resolver o problema. Nao consegui fazer um css sobreescrever o css do primefaces.

Eu quero alterar o tamanho do panel, pra caber dois, um do lado do outro…

nao consegui ate agora. Alguem pode ajudar? :shock: :?:

#18

Voce pode baixar ou criar se próprio tema em http://www.primefaces.org/themes.html, no arquivo .jar tem o theme.css aí
só é alterar. E para usar um tema, basta no web.xlm colocar

<context-param>  
   <param-name>primefaces.THEME</param-name>  
   <param-value>aristo</param-value>  
</context-param>

aristo é nome, e para cada um que voce baixar terá um nome diferente

#19

Já importei o .jar, porém como importo o css do tema. Não estou conseguindo deixar a aplicação com o visual rendondinho, está meio grotesco, tudo quadrado.

#20

Voce alterou o web.xml? como falei e adicionou seu jar a sua aplicação?