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