Alterar o CSS do Primefaces[RESOLVIDO]

Pessoal,

Estou começando no JSF, uso a versao 2.0.4 e do primefaces 2.2. Queria saber como faço para alterar o CSS do primefaces.

Descompactor o JAR dele? Vi no fórum várias coisas sobre CSS do primefaces, mas ninguem fala do inicio do processo de alterar o CSS.

Por favor me ajude to precisando fazer um sistema e me agarrei nisso.

Um grande abraço e que Deus lhe abençoe.

Use o Firebug para descobrir a classe do elemento que voce quer alterar e coloque mais ou menos assim:

.classe-do-primefaces{

   font-size: 12px !important;


}

Sempre usando o !impotant

Entre no site da jQuery e veja as opções de alterar o CSS dos tems disponíveis do primefaces usando uma interface bem dinamica para modelá-la.

Ai você poderá baixar este tema e usá-lo no seu sistema :wink:

Depois pode inserir este tema no seu template desta forma:

<link type="text/css" rel="stylesheet" href="theme/tema_customizado.css" />

exato, use a sugestão do Takeshi91. E além disso, no arquivo que vc vai baixar no site da jquery vc pode acrescentar classes que não tem no arquivo e estilizá-las como quiser. Para descobrir os nomes das classes do primefaces aconselho baixar o guia de referência. Outra forma é ver o código da página gerada através do firebug, para ver o nome de algumas classes que ele gera na hora que a página é compilada.

Baixe o User Guide da primefaces, lá tem todas as styleClasses que cada componente recebe, uma para cada propriedade à parte.

Ai você deita e rola. :smiley:

Obrigado pela atenção de todos.

Takeshi91, depois que eu crio o meu CSS no site do JQuery e coloco no meu projeto ele vai substituir o estilo do primefaces ou tenho que fazer algo a mais.

Eu poderia testar, mas estou no trabalho e só tem como ser à noite em casa.

Abraços
Ademir

Sim, ele substitui o layout padrão da framework.

Só adicionar esta pasta em algum lugar do seu projeto, direcionar o diretorio e importar. :wink:

Pessoal,

seguindo as orientações dos amigos acima deu certinho aqui. Gostaria de agradecer a atenção e ajuda de todos.

Abraços
Ademir

[quote=Takeshi91]Entre no site da jQuery e veja as opções de alterar o CSS dos tems disponíveis do primefaces usando uma interface bem dinamica para modelá-la.

Ai você poderá baixar este tema e usá-lo no seu sistema :wink:

Depois pode inserir este tema no seu template desta forma:

<link type="text/css" rel="stylesheet" href="theme/tema_customizado.css" />

Takeshi91,

Sou novo com o primeface. Por favor me ajuda a utilizar este tema personalizado.

Eu gerei o zip através do site que você apontou.

O que faço com o zip ? Coloquei no WebContent/WEB-INF/lib e adicionei ao buildpath.

No web.xml estou colocando adicionei isso:

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

Porém estou recebendo este erro ao executar a aplicação:

HTTP Status 500 - 

--------------------------------------------------------------------------------

type Exception report

message

descriptionThe server encountered an internal error () that prevented it from fulfilling this request.

exception 

javax.servlet.ServletException: Error loading theme, cannot find "theme.css" resource of "primefaces-smoothness" library
root cause 

javax.faces.FacesException: Error loading theme, cannot find "theme.css" resource of "primefaces-smoothness" library
note The full stack traces of the exception and its root causes are available in the GlassFish Server Open Source Edition 3.1.1 logs.

O themes.css não esta mesmo no zip.

Por favor me ajuda.

[quote=AdemirPinto]Pessoal,

seguindo as orientações dos amigos acima deu certinho aqui. Gostaria de agradecer a atenção e ajuda de todos.

Abraços
Ademir[/quote]

Amigo,

Sou novo com o primeface. Por favor me ajuda a utilizar este tema personalizado.

Eu gerei o zip através do site apontado.

O que faço com o zip ? Coloquei no WebContent/WEB-INF/lib e adicionei ao buildpath.

No web.xml estou colocando adicionei isso:

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

Porém estou recebendo este erro ao executar a aplicação:

HTTP Status 500 - 

--------------------------------------------------------------------------------

type Exception report

message

descriptionThe server encountered an internal error () that prevented it from fulfilling this request.

exception 

javax.servlet.ServletException: Error loading theme, cannot find "theme.css" resource of "primefaces-smoothness" library
root cause 

javax.faces.FacesException: Error loading theme, cannot find "theme.css" resource of "primefaces-smoothness" library
note The full stack traces of the exception and its root causes are available in the GlassFish Server Open Source Edition 3.1.1 logs.

O themes.css não esta mesmo no zip.

Por favor me ajuda.

Abra o arquivo do primefaces-versao.jar com o winrar.
Navegue pelas seguintes pastas:

  • META-INF -> resources -> primefaces;
  • Abra o arquivo primefaces.css, com um duplo clique nele;
  • Aperte as teclas Ctrl + F;
  • Faça a busca pela seguinte expressão:
    * .ui-selectonemenu .ui-selectonemenu-label;
  • Altere o valor de width: 100%; para width: 90% !important; ;
  • salve o arquivo e feche o editor de texto;
  • Confirme o pedido de Atualizar o arquivo, clicando em Sim.
    Pronto, você alterou o local desejado sem criar outro aquivo.
    Funciona para todos os SelectOneMenu e em todas as páginas.
    Faça os testes nos navegadores Opera e google chrome, que o problema desapareceu.