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

M

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.

M

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.

M

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