CSS Customizado em JSF

6 respostas
programaçãojsfcssjava
N

Alguém pode me dar alguma de como gerar ou personalizar css em jsf. tipo customizar css dinamicamente.

6 Respostas

Mike

Partindo do pressuposto que você tem uma pasta chamada “style” e o nome do arquivo css é “theme.css”.

<h:outputStylesheet library=“style” name=“theme.css”></h:outputStylesheet>
A pasta “style” tem que estar dentro de uma pasta chamada “resources” dentro de WebContent

Para carregar o novo css na pagina, aperta Ctrl F5

Na sua pagina, clica com o botão direito do mouse no componente, vai em inspecionar, ai aparecerá o seu componente.

Cada componente do jsf/primefaces possui diversas classes, ai você tem que passar alguma dessas classes no seu css.

Manda aqui o componente que você quer alterar, que ai fica mais facil de entender

N

Isso eu já sei, mas quero algo que o próprio usuário da app. possa customizar. Tipo, só para mudar as cores e alguns detalhes assim.

Mike

Pedi pra você mandar um componente aqui, pq eu ia inspeciona-lo e então te explicaria melhor, como não mandou, fiz um aqui.

<div class="ui-panelgrid ui-panelgrid-responsive">
    <div class="ui-grid-row">
           <div class="ui-panel-grid-cell">

           </div>
    </div>
<div>

o css seria assim:

.ui-panelgrid.ui-panelgrid-responsive .ui-grid-row .ui-panel-grid-cell {
padding: 4px;
}

Perceba o seguinte, cada classe você irá comecar com um ponto (.), como ui-panelgrid e ui-panelgrid-responsive estão no mesmo componente, eu deixo eles tudo juntos (.ui-panelgrid.ui-panelgrid-responsive), ui-grid-row e ui-panel-grid-cell estão em outros componentes, entao eu dou um espaço entre as classes

N

Não foi isso que eu quis dizer, eu já sei muito sobre CSS. O que eu quis dizer foi alguma forma de o próprio usuário poder customizá-la. Eu estou usando material design na minha app, e só queria criar uma forma de o usuário poder customizar com as cores que ele quisesse.
A ideia que eu tive foi de criar algum código que gerasse esse arquivo CSS com as cores escolhidas pelo usuários, mas só perguntei aqui, caso alguém saiba alguma outra forma.

Mike

Aaaaah,desculpa, entendi errado haha
O PrimeFaces tem o ThemeSwitcher para trocar o tema, do contrario teria que usar javascript

N

kkkkkkk

Criado 8 de fevereiro de 2018
Ultima resposta 8 de fev. de 2018
Respostas 6
Participantes 2