Css + primefaces

Já tentou usar o !important no seu css?

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

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

javaCBA:

colocquei assim:

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

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

width: 500px !important;

coloquei no

#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;

coloquei no float e no width e nada

javaCBA:

coloquei no

#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;

coloquei no float e no width e nada

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

assume o theme.css do primefaces

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.

sorry, dupliquei sem querer o post acima

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

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

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

Voce tem que pegar o class que io primefaces gerou.

como eu faço isso? :shock:

O firebug mostra.

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?

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

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: :?:

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

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.

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

Alterei sim como vc falou:

<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
  
    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>
    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
    <welcome-file-list>
        <welcome-file>faces/login/login.xhtml</welcome-file>
    </welcome-file-list>
    <context-param>  
        <param-name>primefaces.THEME</param-name>  
        <param-value>aristo</param-value>  
    </context-param>     
</web-app>

E qual tema voce baixou.

O

<param-value>aristo</param-value>

muda a cada tema, na página do primefaces tem os nomes

Inicialmente tinha baixado esse mesmo, por exemplo, agora baixei outro tema e vou trocar:

1º Baixei o tema glass-x.

2º importei para minha biblioteca.

3º inseri o seguinte comando no meu template para que sirva para todas as páginas.

<h:outputStylesheet library="glass-x" name="theme.css"/>

Foi esses os passos.

Ta correto?

Ah, esqueci de mecionar que alterei o web.xml

[code]

http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">


Faces Servlet
javax.faces.webapp.FacesServlet
1


Faces Servlet
/faces/*



30



faces/login/login.xhtml


primefaces.THEME
glass-x

Quando eu usei eu não precisei usar

<h:outputStylesheet library="glass-x" name="theme.css"/>

só adicionei o jar no biuld path e alterei o web.xml e só

Não sei se este tópico ainda está valendo, mas vai aí uma dica pra quem tb “apanhou” dos temas do PrimeFaces.

acesse o link
www.jqueryui.com/themeroller

Baixe um tema pronto ou personalize o seu.

Copie a pasta css para o sua pasta web (WebContent no caso do Eclipse).

E faça algo mais ou menos assim:

<h:body>
         <link type="text/css" rel="stylesheet" 	href="#{request.contextPath}/css/custom-theme/jquery-ui-1.8.17.custom.css" />
....

Note que no meu caso está “custom-theme”, pq este foi personalizado, caso vc baixe um pronto, altere o nome para
o nome do tema.

Falew!

Vlw ae… me ajudou muito mesmo.
Meu erra em que eu estava indo no build path e clicando em add external jar, onde as vezes o eclipse se perde, então eu simplesmente copiei o .jar para a pasta lib e pronto funcionou perfeitamente.

OBS: tive que editar o xml.

** Vou deixar a contribuição pra outros que pesquisarem mas foi mal, só agora vi que o post é muito velho **
Cara eu te aconselho a criar uma div que englobe as duas colocando um display: inline-block nela
Outra coisa que observei no seu CSS foi que vc criou uma largura de 50% para cada uma das div´s. Isso também poder estar prejudicando o posicionamento delas uma ao lado da outra. Coloque 49% em cada uma delas pra dar mais chances pra elas funcionarem. Se elas ficarem na posição desejada coloca um padding-right na primeira com 1 ou 2% pra afastar uma da outra. Acho que assim o CSS melhora.

Agora quanto ao Primefaces, acho que vc pode subscrever ele com o inspetor de elementos como algumas pessoas lhe informaram ai. Te aconselho a criar um Theme.css e subscrever estas mesmas classes. Segue a dica

/*** subscrevendo o estilo original primefaces ***/

.ui-message-info,.ui-message-error,.ui-message-warn,.ui-message-fatal {

border: 0!important;

margin: 0!important;

padding: 0!important;

}

.ui-messages-error,.ui-message-error {

color: #D8000C;

background-color: #fff!important;

}

Não use div class-"??" com o Primefaces, insira dentro da tag desejada o styleClass="" e depois crie o seu estilo em cima dele no css.
Se quiser criar seu próprio css, declare ele dentro do body do JSF, veja abaixo:

<h:head>

</h:head>

<h:body>
<f:facet name=“last”>
<h:outputStylesheet library=“default” name=“css/your-custom.css” />
</f:facet>
…