Problema com CSS no JSF&Primefaces

Programação Java
, , ,
#1

Projeto – JSF CDI Mysql //Não estou usando Maven

Boa Tarde pessoal, minha questão é a seguinte: Gostaria de ao invés de utilizar style="…"; no código xhtml, para deixar mais elegante o código, fazer uso do css.

por exemplo, quero ao invés de :

<p:fieldset style="background-color: #9ECADE;">

fazer uso de uma classe no css para então atribuir o estilo. Criei então um diretório em WebContent - resources - css - style.css dentro do css então fiz uma pequena edição:

.barra-navegacao{
    background-color: #9ECADE;
}

e dentro do meu template, fico assim:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:head>
    <link href="https://fonts.googleapis.com/css?family=Righteous"
        rel="stylesheet" />
    <h:outputStylesheet library="css" name="style2.css" />
</h:head>
<h:body>
    <div id="cabecalho" align="center">
        <p:graphicImage library="img" name="logo01.png" />
        <h1 align="center">
            <p:fieldset>
                <ui:insert name="titulo" />
            </p:fieldset>
        </h1>

    </div>

    <div>

        <ui:insert name="conteudo" />

    </div>
</h:body>
</html>

porem, o problema é que a edição não funciona, e quando funciona, é como se ficasse salvo em algum lugar o css, e quando eu edito, não atualiza a edição no css. Alguém poderia me ajudar pfvr ??

Aliás, gostaria tmb de saber, como altero um componente do Primefaces, por exemplo: cor, tamanho e etc por classes css. Estou com a doc baixada, e pesquisando nela, mas ta difícil kk’’

#2

Nos projetos em JSF só utilizamos através de arquivos de estilo externos, da mesma forma que você fez e funciona sem problema algum.

Para vincular ao elemento precisa utilizar o styleClass

<p:fieldset styleClass="barra-navegacao">

O que pode estar acontecendo é algum problema na hora da importação do arquivo em css, se quiser modificar para testar pode deixar a importação da seguinte forma:

<link rel="stylesheet" href="/resources/css/style2.css" type="text/css">

Desas forma o arquivo sempre será referenciado do contexto raiz / da aplicação.

Outra coisa que precisa tomar cuidado ao usar css é que alguns componentes possuem bastante código html para sua renderização, as vezes é necessário aplicar o css em outro elemento que não o principal, mas este não deve ser seu caso.